It sure is
However, all this discussion and feedback on naming has given us some great insight on how we can make the general workflow much smoother (along with renaming a few things for clarity). Fingers crossed, we get it right this time!
It sure is
However, all this discussion and feedback on naming has given us some great insight on how we can make the general workflow much smoother (along with renaming a few things for clarity). Fingers crossed, we get it right this time!
I would encourage you to use terminology that is memorable while having at least some sort of semantic value, without rewriting the definitions.
I like this direction.
This naming would side-step the whole varied interpretation (and expectations) of ‘components’ while reinforcing the overall concept (and name) of Elements.
[1] Short for ‘Global Site Elements’, which are specific to a site, whereas atoms and elements are part of your general toolbox available to use on any site you create in Elements.
Addendum: I wonder if atoms are even necessary as a separate object type, They could simply be categorized ‘core or base elements’ in the elements panel list? That would leave only elements and global (site) elements - which I think is where we started.
ok my take on the naming, created a quick example, a little explanation licence.
First container is the Component, just copy and paste that bit on the page or any other page.
The next code is just a single line of code - a box, copy anywhere - Atom
The next container is the Component/Global, this is a copy of the first Component, imagine it is now a global, I have used variables to represent the global override switch, a bit of a stretch as this is not Elements (could have just changed the code). Just change the variables in the css, this is the stretch as I would have to create variables for every copy in this example, or just change the code, roll on Elements
Dan if you have time, this is just html css, I have progressed to 3d, can create the cube straight from my head now, the font-size in the css in the html bit controls size of cube, and distance from top and left, have set the size as 0.1rem and 30rem. If you hover on any side then don’t move the cursor you can see inside. Will this work in elements
apologies keep asking you to test
Was really hoping to avoid the Elements/elements issue. Stacks/stacks
Caused so much confusion.
How about this?
Atoms
Atoms represent the most basic elements of a webpage; they are at the foundation of your page design. They include things like containers, grids, headings, text, and buttons. They are singular items, like Lego bricks.
Structures
Structures are generally pre-built sections, each with their own unique set of features. They include things like navigation bars, footers, layouts, and galleries. They are often fixed layouts that offer a limited amount of customization.
Macros
Macros are user-created groups of atoms and/or structures. Macros can help maintain a consistent design language across your entire site. You can reuse macro blocks across your site, so you need only update the content in one place and have it automatically mirrored to all other instances of that macro.
If ‘components’ is potentially confusing for devs (and some folks already familiar with other visual web design tools), ‘macros’ (Photoshop, Office, etc) would likely leave non-devs scratching their heads.
Apple used to have macros in some of their software applications, notably in older versions of tools like AppleWorks and iWork (Pages, Numbers, and Keynote). These macros allowed users to automate repetitive tasks within the applications.
A macro is a sequence of commands and instructions that you group together as a single command to automate repetitive tasks. This is a common description. It makes sense.
How about Components, and Global (or linked) Components?
Chat GPT sums up pretty nicely what the general consensus on the meaning of Components in Web Design means.
And here’s a quick mock-up of that suggestion in context of the app (it’s missing a heading, but you get the idea).
I think it’ll become clearer once we can play around with the beta and see if the names fit user expectations and mental models.
Components with global/linked/active/site/etc components could work, and while sections feels a little off right now - it might be just fine in actual usage.
@Dan, I liked atoms, structures, and macros. Made sense in my head. I actually don’t care. I’m simply trying to help you come to a consensus. Another idea is below. You are already calling them “Legos.” And building with bricks makes structures.
Bricks
Bricks represent the most basic elements of a webpage; they are the foundation of your page design. They include items such as containers, grids, headings, text, and buttons. They are singular items, like Lego bricks.
Structures
Structures are generally pre-built groups of bricks forming structures, each with its own unique set of features. They include items such as navigation bars, footers, layouts, and galleries. These are often fixed layouts that offer a limited amount of customization.
Globals
Globals are user-created groups of bricks and/or Structures. Globals help maintain a consistent design language across your entire site. You can reuse global brick/structures across your site, so you only need to update the content in one place, and it will automatically be mirrored to all other instances of that global.
But honestly, I don’t care. All apps have their own way. I just prefer the names to be memorable and distinct enough that when we provide support on the forum, everyone knows exactly what is being referred to.
I like Sections
Think you should stay with components, because Tailwind site have a component area. If Elements is using Tailwind think components is a natural way of identifying this part. Stick with Tailwind.
Sections feels a bit too content specific, where often these ‘blocks’ are simply used as containers (rect, flex, grid, etc.) to group various related content/components. I think it would be interesting if you could semantically set containers to individual HTML elements such as section, aside, nav, main, header, footer, and div (probably the default).
Containers
Components
Global (Live/Site) Components
Maybe? I’m not entirely sure what the sections are supposed to represent in your screenshot as they look like content or custom/global components. I’m sure it’ll all start to make sense in time.
Thank you for all the incredible work Dan and Team. I’m on the edge of my seat for Elements! I’m just going to throw this out there… how about Molecules for the now ‘Components’ and ‘Components’ for the now ‘Globals’.