Structuring your Sass

When setting up a new web project getting things right from the beginning is hugely important. Using Sass, style sheets can now be split into more manageable chunks without adding extra http requests. The Bear boilerplate (created following this earlier post) splits CSS into the following 5 sections…

• Vendor
• Base
• Framework
• Modules
• Theme

Vendor – This folder contains third party Sass files such as normalize and Font Awesome. More files can be added as and when they are needed such as print resets and browser fallbacks.

Base – This folder contains the starting points for the project, global variables, mixins and placeholders.

Framework – Here the layout of the site is defined with a grid function (Maze) and breakpoints. The layout.scss file is used to create the page wireframe blocks.

Modules – Reusable blocks of code are defined including list items, buttons and typography.

Theme – The theme files contain the sites unique styling elements broken down in to site sections including Header, Footer, Nav etc.

Below is the start up style.scss file used to pull in each sub file:

	
/* vendor - default fall backs & external .scss files.
========================================================================== */

@import vendor/_normalize.scss;

/* base - base variable file along with starting points mixins & placeholders.
========================================================================== */

@import base/_base.scss;
@import base/_mixins.scss;
@import base/_placeholders.scss;


/* framework - structure & layout files including the maze grid function.
========================================================================== */

@import framework/_grid.scss;
@import framework/_layout.scss;
@import framework/_breakpoints.scss;

/* modules - individual site elements.
========================================================================== */

@import modules/_buttons.scss;
@import modules/_lists.scss;
@import modules/_color-manipulation.scss;

/* theme - theme styles for each area of the site.
========================================================================== */

@import theme/_header.scss;
@import theme/_nav.scss;
@import theme/_main.scss;
@import theme/_footer.scss;
@import theme/_shame.scss;


/* web fonts - google web font include.
========================================================================== */

@import url(http://fonts.googleapis.com/css?family=roboto:400,100,100italic,300,300italic,400italic,500,900italic,900,500italic,700,700italic);

	

Expansion

The structured folders make future development much easier, allowing anybody to quickly find the files they wish to edit or to add new mixins and placeholders.

The site structure can also be expanded for larger or more complex projects, each theme component for example can be expanded to include a layout and style section, replacing the generic layout file used for smaller projects.

The full set of files can be viewed or downloaded from GitHub.

Share on Twitter