LivingCSS Style Guide is a node.js tool that parses comments in your CSS to generate a living style guide using Markdown, Handlebars, and Prism syntax highlighter. It is also available as a gulp plugin for ease of use.
This page has been generated with LivingCSS using default options. Below are some examples of what a style guide (in this case Bootstrap) would look like inside LivingCSS.
Visit LivingCSS on github for more information on how to use LivingCSS and its options.
All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.
<h1>h1. heading</h1>
<h2>h2. heading</h2>
<h3>h3. heading</h3>
<h4>h4. heading</h4>
<h5>h5. heading</h5>
<h6>h6. heading</h6>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum et ipsum tristique ultrices. Ut commodo tortor sit amet aliquam facilisis. Maecenas eleifend convallis feugiat. Ut feugiat metus nec dolor luctus, in tristique tortor tempus. Donec iaculis lectus quam, non vulputate mi aliquam quis. Mauris lobortis turpis vitae nisl gravida gravida. Sed rutrum lacus non mauris luctus, vel condimentum nunc eleifend. Aenean nec rutrum lectus, non maximus neque. Mauris vestibulum ligula id metus accumsan maximus. Donec viverra ligula at rhoncus lobortis. Aenean vel purus mauris.
<p>...</p>Use the button classes on an <a>, <button>, or <input> element.
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">Provide contextual feedback messages.
Wrap any in .alert and on of the four contextual classes for basic alert messages.
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>