Style Guides at amillionmonkeys

Since Patterns Day last year I've been using Clearleft's Fractal to create style guides for almost all front end projects I'm working on. Last week I took an afternoon out to create a start package which is available on github, for use on a few forthcoming projects.

This gives me a few tools I use in every project:

  • A Style Guide
  • Linting and compiling of SASS
  • Vendor prefixing of CSS properties
  • Combining svg files into one with symbol elements (with SVGStore)
  • Concat and uglification of javascript

Combined with a few other bits and bobs it gives me a pretty sweet workflow that goes something like this:

  • Copy the contents of my project starter into a new git repo.
  • Run npm install
  • Run fractal build
  • Push the repo, enable github pages (looking at /docs folder) and just like I'm up and running with a style guide.
  • A bit further along the line, I fire up a Digital Ocean server using Forge, hook up github and then my style guide and anything else that finds its way into the repo is deployed to its own environment.


A lot of this setup is borrowed from Paul Robert's 24 Ways Style Guide (also built with Fractal).

Things I would like to do

I'm trying to use Design Tokens more and more when building anything front end. To display these nicely in Fractal I wish there was a nicer way to use JSON in SASS or convert SASS maps to JSON.

Things I don't want to do

The setup deliberately doesn't include Webpack. For most of the front end stuff I do, a task runner will suffice. so I'm sticking with this for now.

Show Comments