Cornerstone =========== ![Cornerstone logo](dist/assets/img/logo.png) _Modular, performant, simple._ Barebones WordPress starter theme, for front end developers that want an easy [gulp]-based start in a theme's life. ## 1. What's in it for me? 1. [Modular CSS] and [JavaScript], concatenated and minified into single files. * Automated creation of [SVG icons]. * [Optimised bitmap] and [SVG images]. * **Very** barebones HTML and CSS. ## 2. How to use 1. **Make the theme your own**: download it [from GitHub], give it a new name by doing a find & replace on `cornerstone` (don't fork it, as you want an independent copy). * Ensure you have [Node.js] installed. * Run `npm install` in the `cornerstone` directory to install the gulp plugins. * Run `gulp`, which takes files from the [`src`] directory and generates single CSS and JavaScript files and optimised SVG, PNG fallbacks and bitmap images into the [`dist`] directory. * Make changes to the CSS/JS/SVG/whatever, the [gulp task] keeps a watchful eye and automatically re-generates files. * Modular CSS is in the [`src/modules/`] directory. Global settings, utilities and images are in [`src/assets/`]. * For long-term maintenance, use [Composer] to manager your WordPress install ([Roots] have a very good tutorial on [Using Composer With WordPress]). Even better, use [Trellis] and [Bedrock]. ### 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. ## 3. 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). ## 4. 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 [`modules`] directory is divided up into high-level [`blocks`] 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. ## 5. Made using... * [Node.js] platform * [gulp] taskrunner * [cssnext] CSS preprocessor * [Modified BEM]-style CSS methodology * [SUIT CSS] inspired style & structure * [Rizzo]-derived file structure * [WordPress] tabs, not spaces ;) * [EditorConfig] coding style invigilator * Based on stripped-down [_s] theme. * Big hat tip to [Roots] and all their inspirational WordPress work. ## 6. Licensing The Cornerstone theme is [GPL v3] license, ie you can use it for anything but it has to keep the GPL license. The Cornerstone logo is by [Jesse Bennett-Chamberlain], who is just a little bit brilliant, and is copyright © Grow Digital Ltd. [Node.js]: http://nodejs.org/ [cssnext]: http://cssnext.io/ [gulp]: http://gulpjs.com/ [EditorConfig]: http://editorconfig.org/ [`/.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/ [GPL v3]: http://www.gnu.org/licenses/gpl-3.0.html [Jesse Bennett-Chamberlain]: http://31three.com/ [Roots]: https://roots.io/ [Composer]: https://getcomposer.org/ [Using Composer With WordPress]: https://roots.io/screencasts/using-composer-with-wordpress/ [config]: https://github.com/growdigital/cornerstone/blob/master/.editorconfig [`src`]: https://github.com/growdigital/cornerstone/tree/master/src [`dist`]: https://github.com/growdigital/cornerstone/tree/master/dist [`src/modules/`]: https://github.com/growdigital/cornerstone/tree/master/src/modules [`modules`]: https://github.com/growdigital/cornerstone/tree/master/src/modules [`src/assets/`]: https://github.com/growdigital/cornerstone/tree/master/src/assets [`assets`]: https://github.com/growdigital/cornerstone/tree/master/src/assets [gulp task]: https://github.com/growdigital/cornerstone/blob/master/gulpfile.js#L148 [Modular CSS]: https://github.com/growdigital/cornerstone/blob/master/gulpfile.js#L61 [JavaScript]: https://github.com/growdigital/cornerstone/blob/master/gulpfile.js#L127 [SVG icons]: https://github.com/growdigital/cornerstone/blob/master/gulpfile.js#L82 [Optimised bitmap]: https://github.com/growdigital/cornerstone/blob/master/gulpfile.js#L115 [SVG images]: https://github.com/growdigital/cornerstone/blob/master/gulpfile.js#L73 [from GitHub]: https://github.com/growdigital/cornerstone/archive/master.zip [Trellis]: https://roots.io/trellis/ [Bedrock]: https://roots.io/bedrock/ [`blocks`]: https://github.com/growdigital/cornerstone/tree/master/src/modules/blocks [`button.css`]: https://github.com/growdigital/cornerstone/blob/master/src/modules/ui/buttons/button/button.css [`header`]: https://github.com/growdigital/cornerstone/tree/master/src/modules/blocks/header [`footer`]: https://github.com/growdigital/cornerstone/tree/master/src/modules/blocks/footer [`graphics`]: https://github.com/growdigital/cornerstone/tree/master/src/modules/graphics [`ui`]: https://github.com/growdigital/cornerstone/tree/master/src/modules/ui