Dev Dairy Ep33 - Component Categories

Hello again,

Later today we’ll be releasing Elements Beta 7. In this new build we’ve fixed a tonne of reported issues, removed Sections and reorganized the components into categories. I go over some of these changes in the dev diary video below.

After I recorded this video @bon pointed out that I could have used a “Card” component for the Sticky instead of putting a Container in a Container… I think it was his polite way of saying “you’re doing it wrong”. However, my take-a-away from this is that Elements is pretty darn flexible (and powerful), and there’s no single way to build the design you want :stuck_out_tongue_closed_eyes:

Pssst. We’ve also been working on part of a bigger feature that will enable us to do a lot of exciting things in the future… however, the first part wasn’t quite ready to show off today, so you’ll have to wait till next week for that one :nerd_face:

Project Resource

New Tutorial

Yesterday we also released our first Elements video tutorial, it was on building a blurry background with a custom component using TailwindCSS.

Get The Beta

You can sign-up here to be notified when the Elements beta is publicly available. If you’re interested in jointing the early Private Beta you can request to be added to the list over in this thread.

Please note, we’re adding new users slowly to the private beta to enable us to manage all the feedback. If you’re already on the waiting list, just hang-tight, we will get to you soon!

Feedback

Keep the feedback coming, and if you have any thoughts about today’s video please post them below.

See you next week :wave:

Thanks,
Dan & Team Realmac.

2 Likes

I would think the button should be in content

I have not yet watched the video to review the category list names. However, according to Google and the HTML specifications, a button is intended as a call to action. It is often misused as a text element. A text link should use the <a> tag.

is it not content then the same as an image or paragraph???

If the list starts to get quite long could the categories be collapsed into single group mode like the properties? I can see it becoming unwieldy once more default items are added and when people start adding custom components it could be a real mess.

2 Likes

Think of content as something Google indexes in their database for displaying on their SERP (search engine results page). An image and text are indexed, a button is not indexed, in fact it gets in the way because the function is not designed for that purpose, it is designed to initiate an action. A text link or even an image link, is designed to deliver content. Perhaps these examples of the code will better describe how very different they are.

<a href="https://www.example.com">Visit Example.com</a>

<a href="https://www.example.com"> <img src="https://www.example.com/image.jpg" alt="Description of the image"> </a>

<button onclick="window.location.href='https://www.example.com';">Go to Example.com</button>

Maybe this video will help better than my words.

@Dan, regarding your question about the categories, my suggestion is to default to the actual usage and purpose of the component. (Yes, I also like “component” since that’s what Tailwind calls it.) Cards typically aren’t indexed because they usually don’t contain enough content. When they do have a lot of content, they’re essentially just text in a container with a background. So, I think you made the right call.

I think it’s best to think how users would view these ‘things’ not what the actual specs say about them. I would think button & horizontal line would be in Content group (as each of those only creates one basic type of thing) . Now card could be thought of as a arrangement/collection of elements together, so Layout might work well.

totally agree

Having just installed 22877 and created a new page, I would agree with @Bill and @Godber that Button & Divider should be in Content and Card should be in Layout.

1 Like