CSS

The CSS for the HubSpot CMS Boilerplate is split up into two main files, main.css and theme-overrides.css. The main.css style sheet is comprised of several CSS partials stored in separate files and pulled into main.css using HubL includes, similar to the import feature in Sass. The different CSS partials are categorized into folders based on our version of the ITCSS methodology. We used CSS partials because it made it easier to organize the CSS code and it allows multiple developers to easily work on the same project at the same time using version-control. We also split out template specific style-sheets so that they were only included in the templates they are being used on (this is a code splitting technique to help improve page performance).

Our current CSS folder structure is:

/css
  /components
    _footer.css
    _header.css
  /elements
    _forms.css
    _tables.css
    _typography.css
  /generic
    _normalize.css
    _reset.css
  /objects
    _containers-dnd.css
    _layout.css
  /templates
    _blog.css
    _system.css
  main.css
  theme-overrides.css