A Living Styleguide made with Jekyll

Jump Straight to the Tool


There are a lot of really great styleguide methods, tools and examples out thereā€¦ I struggled to find one that was easy to quickly get into, without a load of installation, and, was flexible enough to use on a wide variety of projects.

Pattern Lab is kind of seen as the gold-standard when it comes to documenting styles and patterns that follow some form of the atomic design approach - but I am not a big fan of PHP, and I found it super difficult to customize the interface.

Pattern Lab by Brad Frost & Dave Olsen

Pattern Lab

This learning-curve, or lack of customize-ability was the case for many a tool I found listed on styleguides.io. While there are a lot of good ones out there, I always found myself looking for something that could be used with my current set-up, for me, that means Jekyll-based.

I decided to roll my own to get exactly what I wanted.

What I wanted to build:

  • Use only Jekyll as a pre-requisit
  • A very simple method of building HTML based components/patterns and scss styles
  • Tracking the maturity of patterns
  • Add documentation for developers, designers and pattern approvers
  • Create sample pages that show patterns in use with real content, without the use of (what can be messy) variables
  • Lastly, a wrapper that is unobtrusive and easy to visually customize

What I got:

All the code is free for you to reuse on LivingStyleguide.cc.

Living Styleguide Homepage


Pattern Example

Pattern Example

Pattern Maturity

Pattern Maturity

I would love to know what other people think about styleguide tools, what works for you? Drop me a comment below.