style-guide 0.3.0 → 0.4.0

data/app/views/style_guide/bootstrap_base/_button:_disabled_anchor.erb

@@ -1,2 +0,0 @@
-<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
-<a href="#" class="btn btn-large disabled">Link</a>

data/app/views/style_guide/bootstrap_base/_button:_disabled_element.erb

@@ -1,2 +0,0 @@
-<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
-<button type="button" class="btn btn-large" disabled>Button</button>

data/app/views/style_guide/bootstrap_base/_button_sizes.erb

@@ -1,16 +0,0 @@
-<p>
-  <button type="button" class="btn btn-large btn-primary">Large button</button>
-  <button type="button" class="btn btn-large">Large button</button>
-</p>
-<p>
-  <button type="button" class="btn btn-primary">Default button</button>
-  <button type="button" class="btn">Default button</button>
-</p>
-<p>
-  <button type="button" class="btn btn-small btn-primary">Small button</button>
-  <button type="button" class="btn btn-small">Small button</button>
-</p>
-<p>
-  <button type="button" class="btn btn-mini btn-primary">Mini button</button>
-  <button type="button" class="btn btn-mini">Mini button</button>
-</p>

data/app/views/style_guide/bootstrap_base/_button_types.erb

@@ -1,51 +0,0 @@
-<table class="table table-bordered table-striped">
-  <thead>
-    <tr>
-      <th>Button</th>
-      <th>class=""</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><button type="button" class="btn">Default</button></td>
-      <td><code>btn</code></td>
-      <td>Standard gray button with gradient</td>
-    </tr>
-    <tr>
-      <td><button type="button" class="btn btn-primary">Primary</button></td>
-      <td><code>btn btn-primary</code></td>
-      <td>Provides extra visual weight and identifies the primary action in a set of buttons</td>
-    </tr>
-    <tr>
-      <td><button type="button" class="btn btn-info">Info</button></td>
-      <td><code>btn btn-info</code></td>
-      <td>Used as an alternative to the default styles</td>
-    </tr>
-    <tr>
-      <td><button type="button" class="btn btn-success">Success</button></td>
-      <td><code>btn btn-success</code></td>
-      <td>Indicates a successful or positive action</td>
-    </tr>
-    <tr>
-      <td><button type="button" class="btn btn-warning">Warning</button></td>
-      <td><code>btn btn-warning</code></td>
-      <td>Indicates caution should be taken with this action</td>
-    </tr>
-    <tr>
-      <td><button type="button" class="btn btn-danger">Danger</button></td>
-      <td><code>btn btn-danger</code></td>
-      <td>Indicates a dangerous or potentially negative action</td>
-    </tr>
-    <tr>
-      <td><button type="button" class="btn btn-inverse">Inverse</button></td>
-      <td><code>btn btn-inverse</code></td>
-      <td>Alternate dark gray button, not tied to a semantic action or use</td>
-    </tr>
-    <tr>
-      <td><button type="button" class="btn btn-link">Link</button></td>
-      <td><code>btn btn-link</code></td>
-      <td>Deemphasize a button by making it look like a link while maintaining button behavior</td>
-    </tr>
-  </tbody>
-</table>

data/app/views/style_guide/bootstrap_base/_code:_inline.erb

@@ -1 +0,0 @@
-Wrap inline snippets of code with <code>&lt;code&gt;</code>.

data/app/views/style_guide/bootstrap_base/_images.erb

@@ -1,136 +0,0 @@
-
-
-        <!-- Images
-        ================================================== -->
-        <section id="images">
-          <div class="page-header">
-            <h1>Images</h1>
-          </div>
-
-          <p>Add classes to an <code>&lt;img&gt;</code> element to easily style images in any project.</p>
-          <div class="bs-docs-example bs-docs-example-images">
-            <img src="http://placehold.it/140x140" class="img-rounded">
-            <img src="http://placehold.it/140x140" class="img-circle">
-            <img src="http://placehold.it/140x140" class="img-polaroid">
-          </div>
-<pre class="prettyprint linenums">
-&lt;img src="..." class="img-rounded"&gt;
-&lt;img src="..." class="img-circle"&gt;
-&lt;img src="..." class="img-polaroid"&gt;
-</pre>
-          <p><span class="label label-info">Heads up!</span> <code>.img-rounded</code> and <code>.img-circle</code> do not work in IE7-8 due to lack of <code>border-radius</code> support.</p>
-
-
-        </section>
-
-
-          <h2>Icon examples</h2>
-          <p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p>
-
-          <h4>Buttons</h4>
-
-          <h5>Button group in a button toolbar</h5>
-          <div class="bs-docs-example">
-            <div class="btn-toolbar">
-              <div class="btn-group">
-                <a class="btn" href="#"><i class="icon-align-left"></i></a>
-                <a class="btn" href="#"><i class="icon-align-center"></i></a>
-                <a class="btn" href="#"><i class="icon-align-right"></i></a>
-                <a class="btn" href="#"><i class="icon-align-justify"></i></a>
-              </div>
-            </div>
-          </div>
-<pre class="prettyprint linenums">
-&lt;div class="btn-toolbar"&gt;
-  &lt;div class="btn-group"&gt;
-
-    &lt;a class="btn" href="#"&gt;&lt;i class="icon-align-left"&gt;&lt;/i&gt;&lt;/a&gt;
-    &lt;a class="btn" href="#"&gt;&lt;i class="icon-align-center"&gt;&lt;/i&gt;&lt;/a&gt;
-    &lt;a class="btn" href="#"&gt;&lt;i class="icon-align-right"&gt;&lt;/i&gt;&lt;/a&gt;
-    &lt;a class="btn" href="#"&gt;&lt;i class="icon-align-justify"&gt;&lt;/i&gt;&lt;/a&gt;
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-          <h5>Dropdown in a button group</h5>
-          <div class="bs-docs-example">
-            <div class="btn-group">
-              <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
-              <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
-              <ul class="dropdown-menu">
-                <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
-                <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
-                <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
-                <li class="divider"></li>
-                <li><a href="#"><i class="i"></i> Make admin</a></li>
-              </ul>
-            </div>
-          </div>
-<pre class="prettyprint linenums">
-&lt;div class="btn-group"&gt;
-  &lt;a class="btn btn-primary" href="#"&gt;&lt;i class="icon-user icon-white"&gt;&lt;/i&gt; User&lt;/a&gt;
-  &lt;a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"&gt;&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
-  &lt;ul class="dropdown-menu"&gt;
-    &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-pencil"&gt;&lt;/i&gt; Edit&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-trash"&gt;&lt;/i&gt; Delete&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-ban-circle"&gt;&lt;/i&gt; Ban&lt;/a&gt;&lt;/li&gt;
-    &lt;li class="divider"&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="#"&gt;&lt;i class="i"&gt;&lt;/i&gt; Make admin&lt;/a&gt;&lt;/li&gt;
-  &lt;/ul&gt;
-&lt;/div&gt;
-</pre>
-
-          <h5>Small button</h5>
-          <div class="bs-docs-example">
-            <a class="btn btn-small" href="#"><i class="icon-star"></i></a>
-          </div>
-<pre class="prettyprint linenums">
-&lt;a class="btn btn-small" href="#"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt;&lt;/a&gt;
-</pre>
-
-
-          <h4>Navigation</h4>
-          <div class="bs-docs-example">
-            <div class="well" style="padding: 8px 0; margin-bottom: 0;">
-              <ul class="nav nav-list">
-                <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
-                <li><a href="#"><i class="icon-book"></i> Library</a></li>
-                <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
-                <li><a href="#"><i class="i"></i> Misc</a></li>
-              </ul>
-            </div>
-          </div>
-<pre class="prettyprint linenums">
-&lt;ul class="nav nav-list"&gt;
-  &lt;li class="active"&gt;&lt;a href="#"&gt;&lt;i class="icon-home icon-white"&gt;&lt;/i&gt; Home&lt;/a&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-book"&gt;&lt;/i&gt; Library&lt;/a&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-pencil"&gt;&lt;/i&gt; Applications&lt;/a&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a href="#"&gt;&lt;i class="i"&gt;&lt;/i&gt; Misc&lt;/a&gt;&lt;/li&gt;
-&lt;/ul&gt;
-</pre>
-
-          <h4>Form fields</h4>
-          <form class="bs-docs-example form-horizontal">
-            <div class="control-group">
-              <label class="control-label" for="inputIcon">Email address</label>
-              <div class="controls">
-                <div class="input-prepend">
-                  <span class="add-on"><i class="icon-envelope"></i></span><input class="span2" id="inputIcon" type="text">
-                </div>
-              </div>
-            </div>
-          </form>
-<pre class="prettyprint linenums">
-&lt;div class="control-group"&gt;
-  &lt;label class="control-label" for="inputIcon"&gt;Email address&lt;/label&gt;
-  &lt;div class="controls"&gt;
-    &lt;div class="input-prepend"&gt;
-      &lt;span class="add-on"&gt;&lt;i class="icon-envelope"&gt;&lt;/i&gt;&lt;/span&gt;
-      &lt;input class="span2" id="inputIcon" type="text"&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-        </section>
-

data/app/views/style_guide/bootstrap_base/_tables.erb

@@ -1,409 +0,0 @@
-
-
-
-
-        <!-- Tables
-        ================================================== -->
-        <section id="tables">
-          <div class="page-header">
-            <h1>Tables</h1>
-          </div>
-
-          <h2>Default styles</h2>
-          <p>For basic styling&mdash;light padding and only horizontal dividers&mdash;add the base class <code>.table</code> to any <code>&lt;table&gt;</code>.</p>
-          <div class="bs-docs-example">
-            <table class="table">
-              <thead>
-                <tr>
-                  <th>#</th>
-                  <th>First Name</th>
-                  <th>Last Name</th>
-                  <th>Username</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>1</td>
-                  <td>Mark</td>
-                  <td>Otto</td>
-                  <td>@mdo</td>
-                </tr>
-                <tr>
-                  <td>2</td>
-                  <td>Jacob</td>
-                  <td>Thornton</td>
-                  <td>@fat</td>
-                </tr>
-                <tr>
-                  <td>3</td>
-                  <td>Larry</td>
-                  <td>the Bird</td>
-                  <td>@twitter</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-<pre class="prettyprint linenums">
-&lt;table class="table"&gt;
-  …
-&lt;/table&gt;
-</pre>
-
-
-          <hr class="bs-docs-separator">
-
-
-          <h2>Optional classes</h2>
-          <p>Add any of the following classes to the <code>.table</code> base class.</p>
-
-          <h3><code>.table-striped</code></h3>
-          <p>Adds zebra-striping to any table row within the <code>&lt;tbody&gt;</code> via the <code>:nth-child</code> CSS selector (not available in IE7-IE8).</p>
-          <div class="bs-docs-example">
-            <table class="table table-striped">
-              <thead>
-                <tr>
-                  <th>#</th>
-                  <th>First Name</th>
-                  <th>Last Name</th>
-                  <th>Username</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>1</td>
-                  <td>Mark</td>
-                  <td>Otto</td>
-                  <td>@mdo</td>
-                </tr>
-                <tr>
-                  <td>2</td>
-                  <td>Jacob</td>
-                  <td>Thornton</td>
-                  <td>@fat</td>
-                </tr>
-                <tr>
-                  <td>3</td>
-                  <td>Larry</td>
-                  <td>the Bird</td>
-                  <td>@twitter</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-<pre class="prettyprint linenums" style="margin-bottom: 18px;">
-&lt;table class="table table-striped"&gt;
-  …
-&lt;/table&gt;
-</pre>
-
-          <h3><code>.table-bordered</code></h3>
-          <p>Add borders and rounded corners to the table.</p>
-          <div class="bs-docs-example">
-            <table class="table table-bordered">
-              <thead>
-                <tr>
-                  <th>#</th>
-                  <th>First Name</th>
-                  <th>Last Name</th>
-                  <th>Username</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td rowspan="2">1</td>
-                  <td>Mark</td>
-                  <td>Otto</td>
-                  <td>@mdo</td>
-                </tr>
-                <tr>
-                  <td>Mark</td>
-                  <td>Otto</td>
-                  <td>@TwBootstrap</td>
-                </tr>
-                <tr>
-                  <td>2</td>
-                  <td>Jacob</td>
-                  <td>Thornton</td>
-                  <td>@fat</td>
-                </tr>
-                <tr>
-                  <td>3</td>
-                  <td colspan="2">Larry the Bird</td>
-                  <td>@twitter</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-<pre class="prettyprint linenums">
-&lt;table class="table table-bordered"&gt;
-  …
-&lt;/table&gt;
-</pre>
-
-          <h3><code>.table-hover</code></h3>
-          <p>Enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p>
-          <div class="bs-docs-example">
-            <table class="table table-hover">
-              <thead>
-                <tr>
-                  <th>#</th>
-                  <th>First Name</th>
-                  <th>Last Name</th>
-                  <th>Username</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>1</td>
-                  <td>Mark</td>
-                  <td>Otto</td>
-                  <td>@mdo</td>
-                </tr>
-                <tr>
-                  <td>2</td>
-                  <td>Jacob</td>
-                  <td>Thornton</td>
-                  <td>@fat</td>
-                </tr>
-                <tr>
-                  <td>3</td>
-                  <td colspan="2">Larry the Bird</td>
-                  <td>@twitter</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-<pre class="prettyprint linenums" style="margin-bottom: 18px;">
-&lt;table class="table table-hover"&gt;
-  …
-&lt;/table&gt;
-</pre>
-
-          <h3><code>.table-condensed</code></h3>
-          <p>Makes tables more compact by cutting cell padding in half.</p>
-          <div class="bs-docs-example">
-            <table class="table table-condensed">
-              <thead>
-                <tr>
-                  <th>#</th>
-                  <th>First Name</th>
-                  <th>Last Name</th>
-                  <th>Username</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td>1</td>
-                  <td>Mark</td>
-                  <td>Otto</td>
-                  <td>@mdo</td>
-                </tr>
-                <tr>
-                  <td>2</td>
-                  <td>Jacob</td>
-                  <td>Thornton</td>
-                  <td>@fat</td>
-                </tr>
-                <tr>
-                  <td>3</td>
-                  <td colspan="2">Larry the Bird</td>
-                  <td>@twitter</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-<pre class="prettyprint linenums" style="margin-bottom: 18px;">
-&lt;table class="table table-condensed"&gt;
-  …
-&lt;/table&gt;
-</pre>
-
-
-          <hr class="bs-docs-separator">
-
-
-          <h2>Optional row classes</h2>
-          <p>Use contextual classes to color table rows.</p>
-          <table class="table table-bordered table-striped">
-            <colgroup>
-              <col class="span1">
-              <col class="span7">
-            </colgroup>
-            <thead>
-              <tr>
-                <th>Class</th>
-                <th>Description</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  <code>.success</code>
-                </td>
-                <td>Indicates a successful or positive action.</td>
-              </tr>
-              <tr>
-                <td>
-                  <code>.error</code>
-                </td>
-                <td>Indicates a dangerous or potentially negative action.</td>
-              </tr>
-              <tr>
-                <td>
-                  <code>.warning</code>
-                </td>
-                <td>Indicates a warning that might need attention.</td>
-              </tr>
-              <tr>
-                <td>
-                  <code>.info</code>
-                </td>
-                <td>Used as an alternative to the default styles.</td>
-              </tr>
-            </tbody>
-          </table>
-          <div class="bs-docs-example">
-            <table class="table">
-              <thead>
-                <tr>
-                  <th>#</th>
-                  <th>Product</th>
-                  <th>Payment Taken</th>
-                  <th>Status</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr class="success">
-                  <td>1</td>
-                  <td>TB - Monthly</td>
-                  <td>01/04/2012</td>
-                  <td>Approved</td>
-                </tr>
-                <tr class="error">
-                  <td>2</td>
-                  <td>TB - Monthly</td>
-                  <td>02/04/2012</td>
-                  <td>Declined</td>
-                </tr>
-                <tr class="warning">
-                  <td>3</td>
-                  <td>TB - Monthly</td>
-                  <td>03/04/2012</td>
-                  <td>Pending</td>
-                </tr>
-                <tr class="info">
-                  <td>4</td>
-                  <td>TB - Monthly</td>
-                  <td>04/04/2012</td>
-                  <td>Call in to confirm</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-<pre class="prettyprint linenums">
-...
-  &lt;tr class="success"&gt;
-    &lt;td&gt;1&lt;/td&gt;
-    &lt;td&gt;TB - Monthly&lt;/td&gt;
-    &lt;td&gt;01/04/2012&lt;/td&gt;
-    &lt;td&gt;Approved&lt;/td&gt;
-  &lt;/tr&gt;
-...
-</pre>
-
-
-          <hr class="bs-docs-separator">
-
-
-          <h2>Supported table markup</h2>
-          <p>List of supported table HTML elements and how they should be used.</p>
-          <table class="table table-bordered table-striped">
-            <colgroup>
-              <col class="span1">
-              <col class="span7">
-            </colgroup>
-            <thead>
-              <tr>
-                <th>Tag</th>
-                <th>Description</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  <code>&lt;table&gt;</code>
-                </td>
-                <td>
-                  Wrapping element for displaying data in a tabular format
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <code>&lt;thead&gt;</code>
-                </td>
-                <td>
-                  Container element for table header rows (<code>&lt;tr&gt;</code>) to label table columns
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <code>&lt;tbody&gt;</code>
-                </td>
-                <td>
-                  Container element for table rows (<code>&lt;tr&gt;</code>) in the body of the table
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <code>&lt;tr&gt;</code>
-                </td>
-                <td>
-                  Container element for a set of table cells (<code>&lt;td&gt;</code> or <code>&lt;th&gt;</code>) that appears on a single row
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <code>&lt;td&gt;</code>
-                </td>
-                <td>
-                  Default table cell
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <code>&lt;th&gt;</code>
-                </td>
-                <td>
-                  Special table cell for column (or row, depending on scope and placement) labels<br>
-                  Must be used within a <code>&lt;thead&gt;</code>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <code>&lt;caption&gt;</code>
-                </td>
-                <td>
-                  Description or summary of what the table holds, especially useful for screen readers
-                </td>
-              </tr>
-            </tbody>
-          </table>
-<pre class="prettyprint linenums">
-&lt;table&gt;
-  &lt;caption&gt;...&lt;/caption&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th&gt;...&lt;/th&gt;
-      &lt;th&gt;...&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;td&gt;...&lt;/td&gt;
-      &lt;td&gt;...&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;
-</pre>
-
-        </section>