Bootstrap Style Guide Boilerplate is an easy way to generate living style guides semi-automatically, by linking a stylesheet and creating html files for each element /pattern.

Demo Get it on GitHub

Background

For some time now, I’ve found myself looking for a way to document the styles in my project without needing to add specially formatted comments to my stylesheets or make big changes to my workflow. After looking for a while I ran into Brett Jankord’s Style Guide Boilerplate and fell in love. The premise is easy. Take a php file, plug in your stylesheet, and make html pages showing off your markup. The script takes care of putting it all together into some pretty impressive documentation.

Features:

Did not require me to structure my css in any specific way

in any specific way Did not require me to actually include the html markup in my css

markup in my css It allowed for great flexibility in what I could include. Anything that can go in an html file goes.

in what I could include. Anything that can go in an html file goes. It automatically shows and formats the html source for each element.

for each element. It requires no installation, just upload to the server.

I used it for a couple of projects- but then noticed when using it with a project based on Twitter Bootstrap, that I had a lot of redundant css (css to make the actual documentation page + the css I was documenting), and that the html snippets and patterns that I needed were mostly standard bootstrap components. I set out to do a bootstrapped version of the Boilerplate.

Changes to Bootstrap edition:

Uses Bootstrap elements for page structure

Makes it easier to add text, colors, typography

Comes with bootstrap elements and patterns.

Minimizes the amount of editing needed to be done to the php file.

Here’s a screenshot

Using the guide

The guide is open source, free to use and modify. Documentation can be found in its GitHub project page.

Demo Get it on GitHub