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