Elements, Atoms, Components, and Globals, Oh my!

Ah yes, at the moment the live text editor doesn’t have controls to do that, we’re internally discussing the best way to implement it (and if we should). The text editor will certainly have bold, italic, and the ability to add links.

Let’s get the Alpha shipped and then see what everyone wants/needs :+1:

1 Like

Hmm, not directly, but yes… You could make a “heading” Atom into a Global and set things up that way. You’d then have a custom default for headings, plus the ability to globally change it throughout your entire site :exploding_head: Would be a pretty powerful way to set things up!

1 Like

Perhaps a way to change the default Tailwind CSS? Not just over ride the default. Thinking out loud about how to keep the file sizes small. Does this open up the possibility of other issues?

Would definitely need a way to organize globals if I did this a lot.

That’s exactly what override does, it replaces the default Tailwind CSS, so really there’s no need to worry about the size of the CSS files :smiling_face:

1 Like

Well that would seriously be an innovation if this works. So Elements does not access the Tailwind CSS from a CDN. It loads it from my server, modified to my specifications? I know Tailwind is designed to only load the CSS it uses, is this still true as well. Did the Team get all this to work in Elements?

loading anything from a CDN is a bad idea in general it breaks things with out you knowing it and your site goes haywire.

I have bought stacks in the past where I have had to rebuild them because of CDN issues.

The Theme Studio in Elements essentially allows you to configure a custom Tailwind build. Elements is not overriding anything; it’s creating a unique (but also sharable) Tailwind configuration for your project.

We don’t expose everything from Tailwind, as that would be confusing and overkill. We offer all the options needed for complete design flexibility in all of your projects.

The Theme Studio is a key feature in Elements that allows users to easily create, modify, and share themes. (Don’t think of these themes in the same way as RW Classic themes; this is on a whole new level of power and flexibility.)

It’s an amazing experience when you edit settings in the Theme Studio and see your design updates instantly. You really need to try it to experience the full enjoyment :grin:

Elements builds custom Tailwind CSS in real-time :exploding_head:. So as you add, remove, or modify any components and content in your project, Elements generates the required CSS (and only the required CSS).

Elements does not load Tailwind from a CDN. Doing so would have severely limited what we are able to do from a design and theming perspective.

To reiterate, all CSS generation happens in real-time as you edit your project. It’s truly amazing once you start working with it.

Our setup ensures that Elements produces the smallest amount of CSS possible, as it only generates the CSS you are actually using in your project.

The way Elements generates CSS for you means there is no need for each developer to write and ship the same CSS over and over again. Elements offers you a modern, reliable, flexible design system that both developers and end users can utilize.

Also, the way we have exposed a design system in Elements allows the app, third-party developers, and end users to all create code, components, and content separately but still maintain consistency from a design/theming perspective. Again, you really need to give this a spin to fully appreciate what Elements is capable of :smiley:

3 Likes

@dan if possible could you test these with Elements (see how a users variables work), long story short (still practising TW and css). I was trying to learn :: before :: after, came across an animated border in TW using ::after. I converted to css to practice, except it was a fixed square. Thought I would try as an exercise to maker responsive, no media queries or pixels for square/circle. I then was trying to understand variables and calcs, changed the css version to almost all variable in the :root. Then I thought I would also convert to TW with variables, then TW with no variables, hopefully this could get turned into a custom html with using theme studio and into an Element proper. Probably of no use to anyone. Loads of variables to change can be circle or square

css version vars

TW version vars

TW only

Anxiously waiting!

I want too!

Okay now your just being mean! :joy:

3 Likes

The Tailwind only version works a treat and is the way you’d want to do it in Elements. Here’s a quick video I recorded showing your code in action!

3 Likes

Looking forward to it. :slight_smile:

3 Likes

excellent can’t wait to try, too many things to try

2 Likes

@ben This really is some pretty cool tech. Very excited to see this in action!

3 Likes

So, I’m probably being a bit daft but I’m still scratching my head on components vs globals. In my understanding, components are essentially layout templates that (in your words) “include things like navigation, footers, etc”. When components are placed on a page there is no link back to the original component, and any changes to the component are only local to the individual instance(s). If the original component (in the library) is updated, none of the existing instances of that component will update, and only new instances will reflect the changes of the current state of the library component.

Globals on the other hand enforce a linkage back to the original ‘global’ library component/element/etc - where any change to any instance of the global on a page will be updated not only to every page in the site—and the original object contained in the component library—unless individual properties have been overridden, in which case the global component will still update all site instances, but any overrides will remain in-place for each instance of the global.

My concern here is twofold.

One, what you call globals are often referred to as (site) components in just about every other modern web design application/framework. And what you call components have more in common with static ‘snippets’ or ‘templates’ than what folks might expect from a ‘live’ component.

Two, the only real difference between components and globals appears to be the ‘live’ link back to the original object in the component library, and the ability to override individual linked properties on instances.

It also feels as if globals are often site specific, whereas components (and atoms) are general building blocks. In this case, it would be helpful to clearly separate site ‘globals’ from ‘atoms’ and ‘components’ in the application UI. Perhaps having a separate ‘tab’ in the sidebar as originally proposed?

I’m not against learning new things, but I’m also struggling to get the current atom, components, and global mental model right in my head. Unless I’m missing something it potentially feels overly complex for no real reason.

There are basic/core elements/atoms, ‘static’ templates/components (aka collections of elements/atoms), and ‘live/active’ global(s) site specific components. Am I missing something obvious?

I really believe that once you get to use Elements it will all make sense.

In the meantime, I hope the documentation here helps clarify the difference between Atoms, Components, and Globals for you.

1 Like

Maybe.

The name “Snippets” is already used in a RW product. It would only serve to confuse people to have two different meanings for the same name. Additionally, I associate templates more with themes. This aligns closely with Google’s results for “website templates” or “website themes,” which yield similar basic outcomes.

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.

A Global can and likely will consist of a whole assembly of Atoms and Components. I envision creating entire pages as Globals and using them repeatedly across the entire website, only overriding the text. This approach could also be used to build unique blog categories with different navigation for each category.

I am concerned about adding extra columns or sidebars. This often results in more clicks and layers to accomplish a task and can potentially hide features—out of sight, out of mind.

However, you might be right, although it’s hard to judge without having used it.

1 Like

Hopefully :crossed_fingers:.

We’ve been discussing this (again) internally… and we might be making a few more changes… third times a charm.

Not sure if the changes will make it into the first beta, but it shouldn’t be long after. More news soon.

1 Like

Naming things that work well with the mental model you’re trying to create is hard—especially for folks coming in cold to a new app/experience with often wildly different expectations.