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


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.


  • Did not require me to structure my css in any specific way
  • Did not require me to actually include the html markup in my css
  • It allowed for great flexibility 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.
  • 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