Groundwork

Metalsmith blog & modular CSS template. It rocks.

• Uses Metalsmith static site generator
• Out-of-the-box Modular CSS Metalsmith blog
• Combines individual modular CSS files into one stylesheet
• Vanilla HTML, CSS and JS
• Easily modify with the plugin of your choice
• Proof of concept – Modular CSS can be this easy

Features

• Modified BEM syntax for extendable CSS eg .button--big
• PostCSS-cssnext plugin for using latest features in plain CSS
• Metalsmith build process, from src to build
• Handlebars for plain HTML templates
• nodemon to watch for file changes
• browser-sync to automatically preview changes in browser

Setting up

Make sure to have Node.js installed.

Clone repo, install packages

$ git clone git@github.com:growdigital/groundwork.git
$ cd groundwork
$ npm install

Usage

Start the build, watch and browsersync script:

$ npm run dev 

Add CSS modules in src/assets/modules, either components, objects or utilities.

If you just want to build the site without previewing, run:

$ npm run build

To run Metalsmith in debug mode, add DEBUG=metalsmith* to the npm start script in package.json:

"start": "DEBUG=metalsmith* node index.js",

Organisation of CSS

1. Variables: global variables and site-wide settings eg responsive.css
2. Base: unclassed HTML elements eg a {}
3. Objects: cosmetic-free objects, abstractions, and design patterns eg o-media.css
4. Components: discrete, complete chunks of UI eg carousel.css
5. Utilities: high-specificity, very explicit selectors that trump everything else. Overrides and helper classes eg .u-hiddenvisually {}
6. Shameful: temporarily disorganised CSS eg ._-bloody-hack {} lives in shame.css

Documentation will be on the website www.groundwork.rocks.

Credits

• Hiearchy derived from Inuit CSS by @CSSWizardry
• Organisation inspired by PatternLab by @brad_frost
• Inuit CSS guide by @SonniesEdge
• Principles from SUIT CSS by @necolas
• It started with a SMACSS by @snookca
• Trumping utilities derived from SUIT CSS utilities
• Syntax is BEM, modified by @CSSWizardry
• Shameful CSS by @CSSWizardry
• Nicole Sullivan for everything and the media object
• Groundwork logo by Jesse Bennett-Chamberlain