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)
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.
- Push the repo, enable github pages (looking at
/docsfolder) 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.