# Elements, Atoms, Components, and Globals, Oh my! **URL:** \ **Category:** RapidWeaver Elements\ **Created:** [June 21, 2024, 3:47pm UTC](https://forums.realmacsoftware.com/t/elements-atoms-components-and-globals-oh-my/43556 "2024-06-21T15:47:54Z")\ **Posts on this page:** 19\ **Page:** 3
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [July 12, 2024, 3:43pm UTC](https://forums.realmacsoftware.com/t/elements-atoms-components-and-globals-oh-my/43556/41 "2024-07-12T15:43:30Z")
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! ---
**Author:** ![Flash](https://avatars.discourse-cdn.com/v4/letter/f/f475e1/32.png) [@Flash](https://forums.realmacsoftware.com/u/Flash)\ **Post date:** [July 12, 2024, 5:18pm UTC](https://forums.realmacsoftware.com/t/elements-atoms-components-and-globals-oh-my/43556/42 "2024-07-12T17:18:46Z")
I would encourage you to use terminology that is memorable while having at least some sort of semantic value, without rewriting the definitions. ---
**Author:** ![anon68150607](https://avatars.discourse-cdn.com/v4/letter/a/4bbf92/32.png) [@anon68150607](https://forums.realmacsoftware.com/u/anon68150607)\ **Post date:** [July 12, 2024, 5:34pm UTC](https://forums.realmacsoftware.com/t/elements-atoms-components-and-globals-oh-my/43556/43 "2024-07-12T17:34:40Z")
> [@Flash](#): > > To simplify your mental model: > > - **Atoms** : Basic building blocks. > - **Components** : Reusable collections or pre-built sections of Atoms. > - **Globals** : Live-linked collections of atoms and components that update across the site unless overridden. I like this direction. - **Atoms** : Basic building blocks; containers, blocks, text, header, image, etc. - **Elements** : Reusable collections of pre-composed atoms/elements, and likely to be the main building blocks in an Elements userā€™s toolbox. - **Globals** [1]: Live-linked collections of atoms and elements that update across a site/project unless overridden. This would work well with users referring to page elements as ā€˜global site navā€™ or ā€˜global headers/footersā€™ which are likely global versions of a nav, header or footer element, whereas a carousel element might simply be a (non-global) element used on the home page. 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. šŸ¤” ---
**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\ **Post date:** [July 12, 2024, 6:27pm UTC](https://forums.realmacsoftware.com/t/elements-atoms-components-and-globals-oh-my/43556/44 "2024-07-12T18:27:00Z")
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 > **[Tailwind Play](https://play.tailwindcss.com/7HggBcLmBh)** > > An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser. ---
**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\ **Post date:** [July 12, 2024, 6:34pm UTC](https://forums.realmacsoftware.com/t/elements-atoms-components-and-globals-oh-my/43556/45 "2024-07-12T18:34:20Z")
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 > **[Tailwind Play](https://play.tailwindcss.com/pcPkDXkmYQ?file=css)** > > An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser. ---
**Author:** ![Flash](https://avatars.discourse-cdn.com/v4/letter/f/f475e1/32.png) [@Flash](https://forums.realmacsoftware.com/u/Flash)\ **Post date:** [July 12, 2024, 6:49pm UTC](https://forums.realmacsoftware.com/t/elements-atoms-components-and-globals-oh-my/43556/46 "2024-07-12T18:49:39Z")
Was really hoping to avoid the Elements/elements issue. Stacks/stacks Caused so much confusion. ---
**Author:** ![Flash](https://avatars.discourse-cdn.com/v4/letter/f/f475e1/32.png) [@Flash](https://forums.realmacsoftware.com/u/Flash)\ **Post date:** [July 12, 2024, 7:39pm UTC](https://forums.realmacsoftware.com/t/elements-atoms-components-and-globals-oh-my/43556/47 "2024-07-12T19:39:29Z")
@dan 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. ---
**Author:** ![anon68150607](https://avatars.discourse-cdn.com/v4/letter/a/4bbf92/32.png) [@anon68150607](https://forums.realmacsoftware.com/u/anon68150607)\ **Post date:** [July 12, 2024, 7:44pm UTC](https://forums.realmacsoftware.com/t/elements-atoms-components-and-globals-oh-my/43556/48 "2024-07-12T19:44:48Z")
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. šŸ˜‰ ---
**Author:** ![Flash](https://avatars.discourse-cdn.com/v4/letter/f/f475e1/32.png) [@Flash](https://forums.realmacsoftware.com/u/Flash)\ **Post date:** [July 12, 2024, 7:56pm UTC](https://forums.realmacsoftware.com/t/elements-atoms-components-and-globals-oh-my/43556/49 "2024-07-12T19:56:11Z")
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. ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [July 12, 2024, 9:25pm UTC](https://forums.realmacsoftware.com/t/elements-atoms-components-and-globals-oh-my/43556/50 "2024-07-12T21:25:07Z")
> [@upssjw](#): > > Will this work in elements > > apologies keep asking you to test Yes it works! ![CleanShot 2024-07-12 at 10 .23.10@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/b/8/b82db9bce457047d2af4799006aa7f53b0315f2a.jpeg) ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [July 12, 2024, 9:29pm UTC](https://forums.realmacsoftware.com/t/elements-atoms-components-and-globals-oh-my/43556/51 "2024-07-12T21:29:39Z")
> [@anon68150607](#): > > 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. šŸ˜‰ 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. ![CleanShot 2024-07-12 at 10 .27.29@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/1/3/13dad75ca0e87352f377efe35452d436b0cd171f.jpeg) ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [July 12, 2024, 9:36pm UTC](https://forums.realmacsoftware.com/t/elements-atoms-components-and-globals-oh-my/43556/52 "2024-07-12T21:36:09Z")
> [@Flash](#): > > **Structures** > Structures are generally pre-built sections, each with their own unique set of features. How about ā€œSectionsā€ instead, they would appear in the UI something like thisā€¦ ![CleanShot 2024-07-12 at 10 .35.14@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/7/0/7038c052d27fa1eb795ef5f2aa2eb2f7f9d75914.png) ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [July 12, 2024, 9:40pm UTC](https://forums.realmacsoftware.com/t/elements-atoms-components-and-globals-oh-my/43556/53 "2024-07-12T21:40:29Z")
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). ![CleanShot 2024-07-12 at 10 .39.03@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/6/5/65443592d5c6a724794fedfd670c8a19762b48c4.jpeg) ---
**Author:** ![anon68150607](https://avatars.discourse-cdn.com/v4/letter/a/4bbf92/32.png) [@anon68150607](https://forums.realmacsoftware.com/u/anon68150607)\ **Post date:** [July 12, 2024, 9:53pm UTC](https://forums.realmacsoftware.com/t/elements-atoms-components-and-globals-oh-my/43556/54 "2024-07-12T21:53:59Z")
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. ---
**Author:** ![Flash](https://avatars.discourse-cdn.com/v4/letter/f/f475e1/32.png) [@Flash](https://forums.realmacsoftware.com/u/Flash)\ **Post date:** [July 13, 2024, 12:06am UTC](https://forums.realmacsoftware.com/t/elements-atoms-components-and-globals-oh-my/43556/55 "2024-07-13T00:06:30Z")
@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. ---
**Author:** ![logrunner](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@logrunner](https://forums.realmacsoftware.com/u/logrunner)\ **Post date:** [July 13, 2024, 11:38am UTC](https://forums.realmacsoftware.com/t/elements-atoms-components-and-globals-oh-my/43556/56 "2024-07-13T11:38:48Z")
I like Sections šŸ‘ ---
**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\ **Post date:** [July 13, 2024, 7:27pm UTC](https://forums.realmacsoftware.com/t/elements-atoms-components-and-globals-oh-my/43556/57 "2024-07-13T19:27:33Z")
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. ---
**Author:** ![anon68150607](https://avatars.discourse-cdn.com/v4/letter/a/4bbf92/32.png) [@anon68150607](https://forums.realmacsoftware.com/u/anon68150607)\ **Post date:** [July 13, 2024, 7:59pm UTC](https://forums.realmacsoftware.com/t/elements-atoms-components-and-globals-oh-my/43556/58 "2024-07-13T19:59:00Z")
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. ---
**Author:** ![blackbird](https://avatars.discourse-cdn.com/v4/letter/b/b782af/32.png) [@blackbird](https://forums.realmacsoftware.com/u/blackbird)\ **Post date:** [July 24, 2024, 11:01pm UTC](https://forums.realmacsoftware.com/t/elements-atoms-components-and-globals-oh-my/43556/59 "2024-07-24T23:01:32Z")
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ā€™. [Previous page](https://forums.realmacsoftware.com/t/elements-atoms-components-and-globals-oh-my/43556.md?page=2)