Introducing Chassis: Shared Building Blocks for My Themes
When I’m building a theme, there are parts I want to spend time designing and parts I want to have ready to work with. The header needs to fit its content. The menu needs to open on a phone. A sidebar needs to move below the article when the screen gets narrow. Those details come up across projects.
Chassis brings that shared structure into one package for ClassicPress themes and Novaris sites. It provides compiled styles, JavaScript for navigation and code-copy buttons, and PHP helpers for common components. Each theme can set its colors, fonts, spacing, and other design choices in a chassis.json file.
Giving a theme its own look
The package includes the built CSS and JavaScript. Registering the appropriate service provider makes those assets available to the project. A theme’s design settings become CSS custom properties, so changing the header color or the space around the content can be as simple as editing JSON.
Here’s a small chassis.json example, placed in the theme’s root folder:
{
"$schema": "https://raw.githubusercontent.com/techkodeninja/chassis/develop/schemas/chassis.schema.json",
"color": {
"header": {
"background": "#1d3557",
"text": "#ffffff"
},
"global": {
"accent": "#e63946",
"accent-text": "#ffffff"
}
},
"font": {
"heading": "Georgia, serif"
},
"spacing": {
"content-padding": "l",
"sidebar-gap": "xl"
},
"design": {
"radius": "0.5rem"
},
"menu": {
"toggle": "bottom-left",
"hide-on-scroll": true
}
}
I only need to include the values the theme changes. The schema helps an editor suggest settings, and a child theme can override individual values from its parent. Chassis also supports custom properties in the theme’s own stylesheet, loaded after the package styles.
The responsive breakpoints are fixed in the compiled package. The design file controls values such as colors, widths, and spacing that can be expressed as custom properties.
A mobile menu with room to adjust
The menu button sits at the bottom left on phones by default. A theme can move it to the bottom right or either side of the header through menu.toggle. Settings under menu.design control its background, text, border, and padding.
While scrolling down, the button hides to give the page more room. It returns when you scroll up, reach the top or bottom, open the menu, or tab to the button. Setting "hide-on-scroll": false keeps it visible.
The script also handles Escape, clicking outside the menu, and opening submenus on touch screens. Those interactions are useful to share because they need attention in every theme, regardless of its colors or typography.
Connecting ClassicPress and Novaris
For a ClassicPress theme built on Backdrop, registering the Chassis provider loads the main CSS, the ClassicPress stylesheet, the design settings, and the JavaScript. The platform stylesheet covers markup such as comments, captions, widgets, and gallery shortcodes.
On a Novaris site, the provider copies the built assets to public/assets/chassis. The theme prints them using styles() in the head and scripts() near the end of the page, with the Chassis styles before its own stylesheet. Novaris also gets button and badge template tags.
The underlying SCSS is still organized in eight numbered layers. I can use its Sass tools in custom theme partials when I need a shared spacing value or breakpoint helper.
Still taking shape
Chassis is developing quickly. I’m working toward a setup where a theme can start with the shared structure and spend more of its code on the design itself. The repository includes a theme-building guide and examples of the configuration.
There’s still verification to do. The current changelog notes that the Backdrop provider and ClassicPress stylesheet haven’t yet been tested on a live ClassicPress site, and the complete guide still needs an end-to-end walkthrough. I’ll keep refining those parts as I use the package in more projects.