kss-bootstrap

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Style Guide</title> <meta name="description" content="" /> <meta name="generator" content="kss-node" /> <meta name="viewport" content="width=device-width, minimal-ui">  <link type="text/css" rel="stylesheet" href="public/kss.css"> <link type="text/css" rel="stylesheet" href="public/prettify.css"> {{{styles}}} <script src="http://code.jquery.com/jquery.js"></script> </head> <body class="kss-styleguide" data-spy="scroll" data-target="#sidebar"> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="./index.html">Styleguide</a> </div> <div class="collapse navbar-collapse navbar-styleguide-collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="./">Home</a></li> {{#eachRoot}} <li> <a href="section-{{referenceURI}}.html">{{header}}</a> </li> {{/eachRoot}} </ul> </div> </div> </nav> <div class="container"> <div class="row"> {{#if homepage}} <article class="col-md-12"> <section class="kss-depth-{{ depth }} jumbotron"> <h1>Styleguide</h1> </section> {{{homepage}}} {{else}} <article class="col-xs-12 col-sm-9"> {{! Find each section, in order. If there's no markup or modifiers supplied, use a Markdown-only layout instead. The "root" element comes first in this loop, and can be detected using the "#whenDepth 1" block as seen below. }} {{#eachSection rootName}} {{#ifDepth 1}} <section class="kss-depth-{{ depth }} jumbotron"> <div class="component-description"> <h1 class="kss-title" id="{{ referenceURI }}">{{ header }}</h1> {{else}} <section class="kss-depth-{{ depth }}"> <div class="component-description"> <h{{ depth }} class="kss-title" id="{{ referenceURI }}"> <span class="kss-ref badge pull-right">{{ referenceURI }}</span> {{ header }} </h{{ depth }}> {{/ifDepth}} {{#eachParameter}} <h4><span class="pull-right"><code>{{name}}</code></span> {{{description}}}</h4> {{/eachParameter}} {{#if description}} <div class="kss-box">{{{description}}}</div> {{/if}} {{#if markup}} <div class="kss-example">{{{markup}}}</div> <pre class="prettyprint lang-html">{{markup}}</pre> {{#eachModifier}} <h4>{{{description}}} <span class="pull-right"><code>{{name}}</code></span></h4> <div class="kss-example">{{{markup}}}</div> {{/eachModifier}} <hr /> {{/if}} </div> </section> {{/eachSection}} {{/if}} </article> {{#if homepage}} {{else}} <div class="col-xs-6 col-sm-3" id="sidebar"> <div class="list-group" data-spy="affix"> {{#eachSection rootName}} {{#ifDepth 0}}  {{/ifDepth}} {{#ifDepth 1}}  {{/ifDepth}} {{#ifDepth 2}} <a class="list-group-item" href="#{{referenceURI}}">{{ header }}</a> {{/ifDepth}} {{/eachSection}} </div> </div> {{/if}} </div> </div> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="public/kss.js"></script> <script src="public/prettify.js"></script> <script> jQuery(document).ready(function(){ // Ensure code blocks are highlighted properly... jQuery('pre>code').addClass('prettyprint'); prettyPrint(); // Set the navigation to be the correct width. jQuery('#sidebar .list-group').on('affix.bs.affix', function () { jQuery('#sidebar .list-group').width(jQuery('.col-sm-3').width()); }); }); </script> {{{scripts}}} </body> </html>