The Sass version of my personal boilerplate.
PHP JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Sassy Frills

This is the Sass version of my personal boilerplate. I generally use this one for responsive projects - generating a separate stylesheet for ie7 and ie8 is really easy.

Sass files included as a submodule from

The PHP layout system is based on the work of my awesome workmate Anthony Grignoux.



This folder is where all project assets are kept.

  • css is where Sass files will be compiled to.
  • css/fonts is for all self-hosted fonts.
  • css/images is for images used in CSS files.
  • js is where the custom scripts are concatenated and minified via a Grunt task.
  • js/theme is for all custom scripts. These are organised into separate files as need, and are concatenated and minified into the parent folder via a Grunt task.
  • js/vendor is for third-party JavaScript. (todo: replace with Bower dependancies)
  • media is for media used in html files.


The layouts folder contains files that define the HTML structure of a page. Layouts include all modules listed in a page, and can display content conditionally based on a page's variables.

Keeping layouts and modules separate allows for easier maintenance and reuse. Layouts are called by passing a variable in the url, eg. index.php?page=hp&layout=1col. Alternative layouts for a given page can then be called in the same fashion, and linked to in the _integration file.


The lib folder contains variables, utilities, and calls to project assets.


The modules folder contains the HTML (as PHP files) for individual modules and components. These can be further organised into subfolders if preferred. Individual modules will be included in pages via the layout files.


The pages folder contains variables that are used in layouts to display conditional content, and an array of modules that are to be included on the page in various locations.

  • _integration contains a list to implemented pages. Each page has at least one variable in its url (layout), and others can be added as needed.
  • _hp is an example page that lists some example modules to be included. Other variables can be added as needed.


The tasks folder contains Grunt tasks and options separated into individual files. For more complicated projects that require individual assets per module (for development as plugins on large sites or generators), I use dynamic compass tasks.

  • Install Grunt if not already installed.

  • Install project dependencies: run npm install in a command line at the root directory.

  • Run grunt in a command line at the root directory. CSS/JS/PHP/image changes are automatically injected into the browser.

  • To compile just Sass files (without debug comments):

    • run grunt css
  • To optimise images:

    • run grunt img
  • To concatenate and minify JavaScript files:

    • run grunt js
  • To detect errors and potential script problems with jsHint :

    • run grunt jshint
  • To build everything before a Git commit:

    • run grunt theme