Do you know full on web component development? Well, you can build a new theme from scratch. The best way to learn is by picking a part some of our examples. For this we'll analyze the haxcms-slide-theme .

Import classes / web components

As you can see this theme imports a few basic components helpful in the development of most themes. First we import PolymerElement and the HAXCMSTheme mix-in from our theme wiring library. Theme wiring provides a basis for wiring any custom element into the state management of HAXcms, typically without having to deal with any concepts of state!

Mix-ins

Next we get the mix-in statement. Note how HAXCMSTheme wraps the PolymerElement class, thereby giving us a mix of the two together.

HAXCMSTheme mix-in class

You can learn more about what the mix-in class provides by digging into the HAXCMSThemeWiring.js class. This class bridges the HAXcms store (written in mobx) with the design layer. This way you can leverage anything in the store by writing the polymer convention for referencing a data bound variable in the template.

Here's the variables you'll commonly see in our themes, direct from the store with an example of what a dom bind of that would look like in a template

That last line with activeItemFields is part of the raw power under the hood of this approach. You can use HAXcms to create field definitions (in HAXschema ) that then extend the capabilities of your pages.

Required CSS

There is one small required block of CSS when doing web component / theme development for HAXcms. It is the following:

This helps ensure that when your user clicks the edit button that they see the HAXeditor as opposed to the body of content they are currently working with. Then when they hit save, the HAXeditor sends the content to the backend which then updates the front end and they see the changes. This CSS ensures that it isn't visible during editing.

Required HTML

Related to the CSS, the following block of HTML must appear in your template somewhere (or in the case of simple-blog , an element leveraged by your theme). You can make this look like whatever you want beyond this but this ensures the HAXeditor can correctly target and be integrated using the HAXCMSTheme mix-in. There are ways to position and reposition the HAXeditor dynamically that will not be covered here but can be seen in simple-blog .

From there, design away. Write whatever CSS and HTML and JS you want! The example themes referenced in our docs all provide blue prints for different ways of leveraging our template system.

Next we'll discuss our Core template elements which you'll want to leverage in order to make theme development even cleaner!