css

All .css files in one of the five subfolders get compiled into one big file. You can write in existing files and add new ones and they'll get imported automatically.

PostCSS Plugins

The boilerplate uses PostCSS, and includes a few plugins by default:

• postcss-import: Inlines @imported stylesheets to create one big stylesheet.

• postcss-simple-vars: Makes it possible to use `$variables in your CSS.

• postcss-focus: Adds a :focus selector to every :hover.

• autoprefixer-core: Prefixes your CSS automatically, supporting the last two versions of all major browsers and IE 8 and up.

• cssnano: Optimizes your CSS file. For a full list of optimizations check the offical website.

• postcss-reporter: Makes warnings by the above plugins visible in the console.

For a full, searchable catalog of plugins go to postcss.parts.

Folder structure

The boilerplate comes with a basic folder structure to keep the CSS files organised. This is what the folders are for:

• base: Global styling, e.g. setting the box–model for all elements

• components: Component specific styling, e.g. buttons, modals,...

• layout: Global layouts, e.g. article, homepage,...

• utils: Utility files, e.g. variables, mixins, functions,...

• vendor: External files, e.g. a CSS reset

• main.css: All CSS files from the above directories are @imported into this file and inlined with postcss-import.