There are a lot of really great style guide methods, tools and examples out there… but, I struggled to find one that was:
- easy and quick to use,
- simple to maintain,
- a match for my current workflow,
- flexible enough to use on a wide variety of projects.
I decided that the following requirements would meet my needs:
- Use only Jekyll as a pre-requisit
- Use HMTL/CSS/JS to build a web component, template, etc. (I called these ‘patterns’)
- Track the ‘maturity’ of a pattern - i.e. is it ready to use, or not?
- Automatically add all patterns into a ‘Roadmap’
- Enable simple documentation for developers, designers and product owners to use
- Provide a style guide container or ‘shell’ that is unobtrusive and easy to visually customize
To get started using this tool check out these useful pages:
- Read the design principles
- Setup and installation info
- Learn how to add patterns, and documentation
- Understand the pattern maturity scale
- View all patterns in the Roadmap
This tool was originally published in the public domain as ‘Living Styleguide’ on 12 September 2016 by Matthew Elsom
It’s name was changed to ‘Jekyll Style Guide’ in 2018, and it’s license was updated.
It was last updated on May 14, 2022 by Matthew Elsom.
Copyright © 2016 - 2018 & Beyond. All Rights Reserved.
This tool has been tested for Google Chrome (Mac) v67+ and iOS Safari. Use with Caution.
This tool is free for everyone to use, and modify, but don’t try and sell it. Available under Apache license version 2.0.
A few parts of this project are not in the public domain:
- Material Icons font files included in the
styleguide/fontsdirectory were extracted from Github.
- HK Grotesk font files included in the
styleguide/fontsdirectory were extracted from Hanken, copyright Alfredo Marco Pradil and Stefan Peev.
[jquery-2.1.4.min.js]was extracted from jQuery, copyright The jQuery Foundation.
- Roboto font files in
fonts/robotowere extracted from Google Fonts, copyright Christian Robertson.
[_normalize.scss]was extrcted from Normalize.css, copyright Nicolas Gallagher and Jonathan Neal.
Please check with the respective rights holders for license details.