diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/assets/css/bootstrap-responsive.css | 4 | ||||
| -rw-r--r-- | docs/assets/css/docs.css | 18 | ||||
| -rw-r--r-- | docs/base-css.html | 82 | ||||
| -rw-r--r-- | docs/components.html | 2 | ||||
| -rw-r--r-- | docs/templates/pages/base-css.mustache | 82 | ||||
| -rw-r--r-- | docs/templates/pages/components.mustache | 2 |
6 files changed, 95 insertions, 95 deletions
diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index acebb64d3..3936d8c20 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -3,6 +3,10 @@ visibility: hidden; } @media (max-width: 480px) { + .page-header h1 small { + display: block; + line-height: 18px; + } .form-horizontal .control-group > label { float: none; width: auto; diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 5a6bd971f..41029ded1 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -657,14 +657,13 @@ form.well { } /* Change up some type stuff */ - h1 small { - display: block; - line-height: 20px; - } - /* More space between sections */ h2 { margin-top: 27px; } + h2 small { + display: block; + line-height: 18px; + } h3 { margin-top: 18px; } @@ -681,6 +680,7 @@ form.well { } .jumbotron p { margin-right: 0; + margin-left: 0; font-size: 18px; line-height: 24px; } @@ -695,6 +695,10 @@ form.well { .quick-links { margin: 40px 0 0; } + .quick-links li { + margin-top: 5px; + margin-bottom: 5px; + } /* hide the bullets on mobile since our horizontal space is limited */ .quick-links .divider { display: none; @@ -744,10 +748,10 @@ form.well { .subnav .nav > li { float: none; } - .subnav .nav a { + .subnav .nav > li > a { border: 0; } - .subnav .nav li + li a { + .subnav .nav > li + li a { border-top: 1px solid #e5e5e5; } diff --git a/docs/base-css.html b/docs/base-css.html index 167cb5e69..740e0e143 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -71,6 +71,7 @@ <div class="subnav"> <ul class="nav pills"> <li><a href="#typography">Typography</a></li> + <li><a href="#code">Code</a></li> <li><a href="#tables">Tables</a></li> <li><a href="#forms">Forms</a></li> <li><a href="#buttons">Buttons</a></li> @@ -343,51 +344,46 @@ </dl> </div> </div><!-- /row --> +</section> - <!-- Code --> - - <h2>Code <small>Inline and block</small></h2> - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th style="width: 190px;">Element</th> - <th>Result</th> - </tr> - </thead> - <tbody> - <tr> - <td><code><code></code></td> - <td>In a line of text like this, your wrapped code will look like this <code><html></code> element.</td> - </tr> - <tr> - <td><code><pre></code></td> - <td> -<pre><div> - <h1>Heading</h1> - <p>Something right here…</p> -</div></pre> - <p><strong>Note:</strong> Be sure to keep code within <code><pre></code> tags as close to the left as possible; it will render all tabs.</p> - </td> - </tr> - <tr> - <td><code><pre class="prettyprint"></code></td> - <td> - <p>Using the google-code-prettify library, your blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.</p> -<pre class="prettyprint"><div> - <h1>Heading</h1> - <p>Something right here…</p> -</div></pre> -<pre class="prettyprint linenums"><div> - <h1>Heading</h1> - <p>Something right here…</p> -</div></pre> - <p><a href="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.</p> - </td> - </tr> - </tbody> - </table> +<!-- Code +================================================== --> +<section id="code"> + <div class="page-header"> + <h1>Code <small>Inline and block code snippets</small></h1> + </div> + <div class="row"> + <div class="span4"> + <h2>Inline</h2> + <p>Wrap inline snippets of code with <code><code></code>.</p> +<pre class="prettyprint linenums"> +For example, <code>section</code> should be wrapped as inline. +</pre> + </div><!--/span--> + <div class="span4"> + <h2>Basic block</h2> + <p>Use <code><pre></code> for multiple lines of code. Be sure to turn any carets into their unicode characters for proper rendering.</p> +<pre class="prettyprint linenums" style="margin-bottom: 9px;"> +<pre> + &lt;p&gt;Sample text here...&lt;/p&gt; +</pre> +</pre> + <p><strong>Note:</strong> Be sure to keep code within <code><pre></code> tags as close to the left as possible; it will render all tabs.</p> + </div><!--/span--> + <div class="span4"> + <h2>Google Prettify</h2> + <p>Take the same <code><pre></code> element and add two optional classes for enhanced rendering.</p> +<pre class="prettyprint linenums" style="margin-bottom: 9px;"> +<pre class="prettyprint + linenums"> + &lt;p&gt;Sample text here...&lt;/p&gt; +</pre> +</pre> + <p><a href="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.</p> + </div><!--/span--> + </div><!--/row--> </section> @@ -1070,9 +1066,9 @@ <div class="control-group"> <label class="control-label">Form sizes</label> <div class="controls docs-input-sizes"> + <input class="span1" type="text" placeholder=".span1"> <input class="span2" type="text" placeholder=".span2"> <input class="span3" type="text" placeholder=".span3"> - <input class="span4" type="text" placeholder=".span4"> <p class="help-block">Use the same <code>.span*</code> classes from the grid system for input sizes.</p> </div> </div> diff --git a/docs/components.html b/docs/components.html index a52558220..499e6b87c 100644 --- a/docs/components.html +++ b/docs/components.html @@ -948,7 +948,7 @@ <table class="table table-bordered table-striped"> <thead> <tr> - <th style="width: 190px;">Labels</th> + <th>Labels</th> <th>Markup</th> </tr> </thead> diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index ad27d2be8..23d72efd5 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -6,6 +6,7 @@ <div class="subnav"> <ul class="nav pills"> <li><a href="#typography">{{_i}}Typography{{/i}}</a></li> + <li><a href="#code">{{_i}}Code{{/i}}</a></li> <li><a href="#tables">{{_i}}Tables{{/i}}</a></li> <li><a href="#forms">{{_i}}Forms{{/i}}</a></li> <li><a href="#buttons">{{_i}}Buttons{{/i}}</a></li> @@ -278,51 +279,46 @@ </dl> </div> </div><!-- /row --> +</section> - <!-- Code --> - - <h2>{{_i}}Code <small>Inline and block</small>{{/i}}</h2> - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th style="width: 190px;">{{_i}}Element{{/i}}</th> - <th>{{_i}}Result{{/i}}</th> - </tr> - </thead> - <tbody> - <tr> - <td><code><code></code></td> - <td>{{_i}}In a line of text like this, your wrapped code will look like this <code><html></code> element.{{/i}}</td> - </tr> - <tr> - <td><code><pre></code></td> - <td> -<pre><div> - <h1>{{_i}}Heading{{/i}}</h1> - <p>{{_i}}Something right here…{{/i}}</p> -</div></pre> - <p>{{_i}}<strong>Note:</strong> Be sure to keep code within <code><pre></code> tags as close to the left as possible; it will render all tabs.{{/i}}</p> - </td> - </tr> - <tr> - <td><code><pre class="prettyprint"></code></td> - <td> - <p>{{_i}}Using the google-code-prettify library, your blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.{{/i}}</p> -<pre class="prettyprint"><div> - <h1>{{_i}}Heading{{/i}}</h1> - <p>{{_i}}Something right here…{{/i}}</p> -</div></pre> -<pre class="prettyprint linenums"><div> - <h1>{{_i}}Heading{{/i}}</h1> - <p>{{_i}}Something right here…{{/i}}</p> -</div></pre> - <p>{{_i}}<a href="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.{{/i}}</p> - </td> - </tr> - </tbody> - </table> +<!-- Code +================================================== --> +<section id="code"> + <div class="page-header"> + <h1>{{_i}}Code{{/i}} <small>{{_i}}Inline and block code snippets{{/i}}</small></h1> + </div> + <div class="row"> + <div class="span4"> + <h2>Inline</h2> + <p>Wrap inline snippets of code with <code><code></code>.</p> +<pre class="prettyprint linenums"> +{{_i}}For example, <code>section</code> should be wrapped as inline.{{/i}} +</pre> + </div><!--/span--> + <div class="span4"> + <h2>Basic block</h2> + <p>{{_i}}Use <code><pre></code> for multiple lines of code. Be sure to turn any carets into their unicode characters for proper rendering.{{/i}}</p> +<pre class="prettyprint linenums" style="margin-bottom: 9px;"> +<pre> + &lt;p&gt;{{_i}}Sample text here...{{/i}}&lt;/p&gt; +</pre> +</pre> + <p>{{_i}}<strong>Note:</strong> Be sure to keep code within <code><pre></code> tags as close to the left as possible; it will render all tabs.{{/i}}</p> + </div><!--/span--> + <div class="span4"> + <h2>Google Prettify</h2> + <p>Take the same <code><pre></code> element and add two optional classes for enhanced rendering.</p> +<pre class="prettyprint linenums" style="margin-bottom: 9px;"> +<pre class="prettyprint + linenums"> + &lt;p&gt;{{_i}}Sample text here...{{/i}}&lt;/p&gt; +</pre> +</pre> + <p>{{_i}}<a href="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.{{/i}}</p> + </div><!--/span--> + </div><!--/row--> </section> @@ -1005,9 +1001,9 @@ <div class="control-group"> <label class="control-label">{{_i}}Form sizes{{/i}}</label> <div class="controls docs-input-sizes"> + <input class="span1" type="text" placeholder=".span1"> <input class="span2" type="text" placeholder=".span2"> <input class="span3" type="text" placeholder=".span3"> - <input class="span4" type="text" placeholder=".span4"> <p class="help-block">{{_i}}Use the same <code>.span*</code> classes from the grid system for input sizes.{{/i}}</p> </div> </div> diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 98e7c3f3f..d08ea98b5 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -883,7 +883,7 @@ <table class="table table-bordered table-striped"> <thead> <tr> - <th style="width: 190px;">{{_i}}Labels{{/i}}</th> + <th>{{_i}}Labels{{/i}}</th> <th>{{_i}}Markup{{/i}}</th> </tr> </thead> |