“Building a front-end style guide with Jekyll” was the topic for the Cape Town Front-end Developers meetup. Justin Slack who currently works at New Media Labs, presented his topic.
As per the title of the Meetup, Justin used Jekyll, which is a static website generator, to show how it could be used to generate a front-end style guide.
You can access the source code to his style guide on GitHub: Front-end style guide with Jekyll.
Being a Windows user, Jekyll isn’t a very viable solution for me, due to the Ruby requirement. However, it is possible, but I haven’t yet tried it myself.
Design style guides and code standards documents have been a successful way of ensuring brand and code consistency, but in between the code and the design examples, web-based style guides are emerging. These are maintained by front-end developers, and are more dynamic than visual design guidelines, documenting every component and its code on the site in one place.
— Anna Debenham
The idea behind building a “living” style guide that is dynamic and easy to maintain is definitely an appealing one, especially when working on larger projects. Ian Feather wrote this great article: A Maintainable Style Guide where he discusses how the Lonely Planet’s style guide is kept up to date via an API.
Below is a list of some of my favourite style guides currently online:
Further reading
Cape Town Front-end Developers is a Meetup group of some of the talented front-end web developers currently working in Cape Town.
Thanks to 22seven for hosting the event.