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.
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)
- site-active-title -
the title of the active item wrapped in a h1 tag
- all child menu items based on a criteria match
- part of the outline based on criteria match
- a basic footer with license element based on site details
- a basic modal with button that can house other elements
- a breadcrumb trail for the active menu item
- site links but as a simple line of dots
- buttons for navigating through the active items in the menu. This is next, previous, parent and first child kinds of options.
- A visualization of the hierarchy of your site, complete with checkmarks given per page the user goes to (optional) as well as a lot of styling options and a highlighted bar that scrolls the menu into view for small screens. It's fantastic and one line.
- Top level menu links with indicator that scrolls to focus
- print button with support for 4 levels of printing the site
- a button that displays a link (opened in a new window) to get the RSS feed in RSS 2.0 or Atom 1.0 format (also applies correct semantic values for bots to discover)
- a link to the homepage of the site wrapped in an h1 tag
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