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 https://github.com/skymaiden/skymaiden-sass.
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.
- 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 installin a command line at the root directory.
gruntin 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):
To optimise images:
To detect errors and potential script problems with jsHint :
To build everything before a Git commit: