Themes

There are three main files that are used to turn the HubSpot CMS Boilerplate into a theme. The first is the theme.json file which is used to set meta information for the theme’s directory. The information that is set in the theme.json file is what shows when choosing what theme to use from the page dashboard.

The second is the fields.json file which is used to create fields that content creators and marketers can edit on a global level across their entire site.

Lastly, we include a theme-overrides.css file. While the first two files in the theme are mandatory for a theme to be created, the theme-overrides.css file is our opinionated approach to passing your theme values from your fields.json file into your CSS in an easy to manage way.

At the top of the theme-overrides.css file, we set HubL variables that reference back to the theme values in fields.json. The reason we used HubL variables at the top of the theme-overrides.css style sheet was for two main reasons:

1. Theme values names can get fairly long (especially if the field being referenced is grouped multiple times).
2. Using variables makes it easier to change the theme value in one location without having to do a find and replace (e.g. if you eventually wanted to change the name of a theme field you'd just have to change the value for the variable instead of every instance where the theme value is used).

Within the theme-overrides.css file we follow the same general order for our styles as main.css style sheet and comment out each of the style sheet’s sections as clearly as possible.

For more information on the concept of themes, please refer to this article.