Cornerstone
===========

Barebones WordPress starter theme. Modular CSS, minification, optimisation, all with the magic of [gulp], using [Node.js], based on [_s] theme.

Was previously groundwork but that is the name of an existing WordPress theme.

## Why?

1. Design
  1. Facilitate modular CSS and JavaScript using separate files
  2. Automate creation of SVG icons
2. Speed
  1. Compress JPEGs
  2. Create 8-bit PNGs with 8-bit transparency
  3. Concatenate CSS and JavaScript into single files
  4. Minify HTML, CSS and JavaScript
3. Fallbacks
  1. Use PNG fallbacks for SVG icons for <=IE8 and Android 2.3
  2. Use simplest CSS preprocessor ([cssnext]), as future-proof as possible

## Made using...

* [Node.js] platform
* [cssnext] CSS preprocessor
* [Rizzo]-derived file structure
* [Modified BEM]-style CSS methodology
* [SUIT CSS] inspired style & structure
* [WordPress] tabs, not spaces ;)
* [gulp] taskrunner
* [EditorConfig] coding style invigilator

## Style guide

### Coding style

* See `/.editorconfig` [config]
* [WordPress] uses tabs, so I have to
* Markdown generally works best with 4 spaces
* See [SUIT CSS] documentation for more detail on more general coding style

## CSS

* Use [modified BEM] for naming convention and [SUIT CSS] style utilities
* Using pixels for type sizes
* Ems for type margins and padding and breakpoints
* Pixels for other measurements (which shouldn't be many)

## Scaffolding

All `src` files are compiled into the `dist` directory; in an ideal world, the
contents of the `dist` folders aren't version controlled as everything is built
on deployment.

The `assets` directory contains all the site-wide images, JavaScript and CSS.

To facilitate modular CSS, the `blocks` directory contains discrete, self-
contained chunks of CSS, JavaScript and potentially HTML. This makes the code
easier to maintain eg to edit the `.button` class, edit the `button.css` CSS
file.

The `block` directory is divided up into high-level `components` (eg `header`, 
`footer`), `graphics` (eg colours, typography, iconography) and `ui` (eg user 
interface elements such as navigation, buttons, form elements, list styling 
etc). This makes it easier to create a living styleguide. See Lonely Planet's 
[Rizzo] for an example.

[Node.js]: http://nodejs.org/
[cssnext]: http://cssnext.io/
[gulp]: http://gulpjs.com/
[EditorConfig]: http://editorconfig.org/
[Rizzo]: http://rizzo.lonelyplanet.com/styleguide/design-elements/colours
[config]: https://github.com/growdigital/groundforce/blob/master/.editorconfig
[Modified BEM]: http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
[SUIT CSS]: https://github.com/suitcss/suit/blob/master/doc/README.md
[WordPress]: https://make.wordpress.org/core/handbook/best-practices/coding-standards/css/
[_s]: http://underscores.me/