CSS

This setup uses PurifyCSS to remove unused CSS from the compiled file. This means selectors not in a template or js file will be removed. This can be problematic for developing content blocks in which classes are set by CMS properties. As a fix, there is a file called _purifykeep.html in the templates folder which can be used as a list of selectors that should not be purged.

SCSS Folder Structure

There are a two main folders for scss files, components and globals. This is somewhat arbitrary, mainly for organization. The important thing to note here is that new files added to a folder are not compiled automatically. To add a new component file, I will create the file, then import it on the list of all components. This gives you control over compile order.

scss/
  components/
    _component.scss  // an individual component, perhaps a specific block
    ...
    components.scss  // the list of all components to compile

  globals/
    _grid.scss  // all my global grid styles, etc.
    ...
    globals.scss  // the list of all components to compile

  main.scss  // compiles globals, then components, then some other random stuff

After all the scss is processed and compiled, grunt adds in all the third-party css files.

CPCSS

There is a second css file generated for control panel css. It compiles only the main.scss file in the control-panel directory.

CSS Lib

The following third-party style sheets are included in a lib directory for convenience. The files in css/lib must be moved to the third-party folder for use.

• Animate
• Font Awesome