Jekyll Style Guide

👋 Hi! My name's Matthew, and I built this Jekyll-based tool that you can use to generate and document product or system user interface (UI) patterns in a simple Style Guide.

Why?

There are a lot of really great styleguide 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.

Requirements

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

Help

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 in 2018 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.

License

This tool is free for everyone to use, and modify, but don't try and sell it. Available under Apache license version 2.0.

It was built using Jekyll, it's design principle is based on the US Design Standards, and the css architecture is based on the Simple SCSS Playbook.

View License File

A few parts of this project are not in the public domain:

• Material Icons font files included in the styleguide/fonts directory were extracted from Github.
• HK Grotesk font files included in the styleguide/fonts directory were extracted from Hanken, copyright Alfredo Marco Pradil and Stefan Peev.
• jQuery [jquery-2.1.4.min.js] was extracted from jQuery, copyright The jQuery Foundation.
• Roboto font files in fonts/roboto were extracted from Google Fonts, copyright Christian Robertson.
• Normalize [_normalize.scss] was extrcted from Normalize.css, copyright Nicolas Gallagher and Jonathan Neal.

Please check with the respective rights holders for license details.