While you're not required to use them, HAXcms supplies a series of elements that can make theme development effortless. You can see the source of these in greater detail under the theme directory of haxcms-elements . This is a brief overview of what they are and what they provide to your interface.

HAXcms seeks to apply the SDS pattern, a technique we made up just for this sentence, for dramatic effect . As everyone knows who is about to read the next heading, SDS stands for:

So. Damn. Semantic.

Learn two theme code view with arrows pointing out all the different HAXcms theme level elements

Whew, I need an ice cold drink to wash away the semantic sweats.

Yes, that's right, HAXcms allows you to theme a complex state managed system without needing to understand state management... like... at all.

"But I understand state management and it's important to me"

That's awesome, four people on twitter, but most designers just want to design! They don't need or want to understand the intricacies of making a collapsed field area expand relative to what item has been dictated as active in the store*.

*an intentionally confusing worded sentence

We use MobX to do our state management if that's something you care about and some of our themes directly implement and interface with the state management layer. See Simple Blog's footer element for a great example of why state management is a PITA.

Back to the elements jerk

Ok fine, here they are. Here's the list of ES module imports to get them

Now here's what each of them provide you (pretty self explanatory because #SDS)

See the elements themselves for more details API examples and check out our themes as we leverage them heavily across the core themes.

A word about style

We use CSS variables to style all the bits inside of our custom elements. So if you don't like the styling, look at the CSS variables we make available and style away. The "Learn 2 theme" is a great example implementing multiple levels of styling against multiple HAXcms site elements. You can always you know, go back and reread the CSS variables section .