style-guide 0.2.1 → 0.3.0

data/Gemfile.lock

@@ -1,7 +1,8 @@
 PATH
   remote: .
   specs:
-    style-guide (0.2.0)
+    style-guide (0.3.0)
+      i18n
       jquery-rails
       rails
 
@@ -59,7 +60,7 @@ GEM
       em-websocket (>= 0.2.0)
       guard (>= 1.5.0)
       multi_json (~> 1.0)
-    guard-rspec (2.3.0)
+    guard-rspec (2.3.1)
       guard (>= 1.1)
       rspec (~> 2.11)
     hike (1.2.1)

data/app/assets/stylesheets/style_guide/example.css

@@ -1,20 +1,69 @@
 .style-guide-partial {
+  padding-top: 30px;
+  background-color: white;
+  margin: 10px 0;
+  padding: 10px;
+}
+
+.style-guide-example-header {
+  font-weight:100;
+  color: #888;
+  font-size: 24px;
+  line-height: 40px;
+  margin-top: 0;
+  margin-bottom: 20px;
+  border-bottom: 1px solid #ddd;
+}
+
+.style-guide-example-description {
+  margin-bottom: 15px;
+  color: #5D5C5C;
+}
+
+.style-guide-example-description code {
+  white-space: nowrap;
+  color: #d14;
+  background-color: #f5f5f5;
+  padding: 2px 4px;
+  border: 1px solid #ddd;
+  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.style-guide-example {
   position: relative;
-  padding: 39px 19px 14px;
-  *padding-top: 19px;
+  padding: 10px 20px;
+  padding-top: 32px;
   background-color: #fff;
-  border: 1px solid #ddd;
+  border: 1px solid #f5f5f5;
+  overflow: hidden;
 }
 
-.style-guide-partial:after {
+.style-guide-example:after {
   content: "Example";
   position: absolute;
   top: -1px;
   left: -1px;
-  padding: 3px 7px;
-  font-size: 12px;
+  padding: 0 5px;
+  font-size: 11px;
+  line-height: 18px;
+  height: 18px;
   font-weight: 100;
   background-color: #f5f5f5;
   border: 1px solid #ddd;
   color: #888;
+  opacity: 0.75;
+}
+
+.style-guide-partial .style-guide-example-source {
+  margin-top: 0;
+  padding: 10px 20px;
+  background: #f5f5f5;
+  border-color: #ddd;
+  overflow-x: scroll;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
 }

data/app/assets/stylesheets/style_guide/header.css

@@ -1,12 +1,13 @@
 .style-guide-header {
-  padding: 40px 0;
+  padding: 60px 0 40px 0;
   color: white;
   text-align: center;
   text-shadow: 0 1px 3px rgba(0,0,0,.3), 0 0 20px rgba(0,0,0,.075);
   background: #f5f5f5;
-  -webkit-box-shadow: inset 0 -3px 7px rgba(0,0,0,.1);
-     -moz-box-shadow: inset 0 -3px 7px rgba(0,0,0,.1);
-          box-shadow: inset 0 -3px 7px rgba(0,0,0,.1);
+  overflow: hidden;
+  -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,.1);
+     -moz-box-shadow: inset 0 0 10px rgba(0,0,0,.1);
+          box-shadow: inset 0 0 10px rgba(0,0,0,.1);
 }
 
 .style-guide-header h1 {
@@ -20,7 +21,6 @@
 @media (min-width: 480px) {
   .style-guide-header h1 {
     text-align: left;
-    text-indent: 60px;
   }
 }
 

data/app/assets/stylesheets/style_guide/layout.css

@@ -1,6 +1,7 @@
 body {
   position: relative;
-  padding: 40px 0 0 0;
+  padding: 0;
+  margin: 0;
   font-family: "ars-maquette-web";
 }
 
@@ -9,37 +10,6 @@ body {
   margin: 0 auto;
 }
 
-section {
-  padding-top: 30px;
-  background-color: white;
-  margin: 10px 0;
-  padding: 10px;
-}
-
-section h1 {
-  font-weight:100;
-  color: #888;
-  font-size: 24px;
-  line-height: 40px;
-  margin-top: 0;
-  margin-bottom: 20px;
-  border-bottom: 1px solid #ddd;
-}
-
-section > ul li {
-  margin-bottom: 5px;
-}
-
-hr.soften {
-  height: 1px;
-  margin: 70px 0;
-  background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
-  background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
-  background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
-  background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
-  border: 0;
-}
-
 @media (min-width: 480px) {
   .style-guide-content .style-guide-sidebar {
     width: 288px;
@@ -62,7 +32,7 @@ hr.soften {
   }
 
   .style-guide-content .style-guide-sections {
-    width: 650px;
+    width: 672px;
     margin-left: 288px;
     float: left;
   }

data/app/assets/stylesheets/style_guide/navbar.css

@@ -1,7 +1,3 @@
-
-/* Tweak navbar brand link to be super sleek
--------------------------------------------------- */
-
 .style-guide-bar {
   font-size: 13px;
   position: absolute;
@@ -23,34 +19,33 @@
 }
 
 .style-guide-bar a {
-  color: white;
+  color: #888;
+  text-decoration: none;
 }
 
 .style-guide-bar a.brand {
-  text-decoration: none;
-  text-shadow: 0 -1px 1px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.2);
-  line-height: 20px;
-  font-size: 20px;
-  height: 20px;
+  color: #ddd;
+  text-shadow: 0 0 10px rgba(0,0,0,.05);
 }
 
 .style-guide-bar a.brand,
 .style-guide-bar label  {
   display: block;
-  color: white;
+  height: 20px;
+  font-size: 20px;
+  line-height: 20px;
+  font-weight: normal;
   margin: 5px 10px;
   padding: 5px 10px;
-  font-weight: bold;
 }
 
 .style-guide-bar label {
-  line-height: 16px;
-  font-size: 16px;
-  height: 16px;
-  float: right;
   color: #888;
+  position: absolute;
+  top: 0;
+  right: 0;
   cursor: pointer;
-
+  text-shadow: 0 -1px 0 rgba(0,0,0,.1), 0 1px 0 rgba(255, 255, 255, 0.9);
   -webkit-user-select: none;
      -moz-user-select: -moz-none;
    -khtml-user-select: none;
@@ -72,18 +67,27 @@
   background: #ddd;
   clear: both;
   margin: 0;
-
+  padding: 0;
   -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1), 0 3px 3px rgba(0, 0, 0, .15);
      -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1), 0 3px 3px rgba(0, 0, 0, .15);
           box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1), 0 3px 3px rgba(0, 0, 0, .15);
 }
 
 .style-guide-bar li {
-  padding: 5px 5px;
-  margin: 5px 0;
+  margin: 10px 0;
   font-size: 14px;
 }
 
+.style-guide-bar li a {
+  padding: 2px 5px;
+}
+
+.style-guide-bar .active a,
+.style-guide-bar li a:hover {
+  background-color: #888;
+  color: #f5f5f5;
+}
+
 @media (min-width: 480px) {
   .style-guide-bar label {
     display: none;
@@ -99,7 +103,6 @@
 
   .style-guide-bar ul {
     margin: 0;
-
     height: auto;
     clear: none;
     background: transparent;
@@ -111,7 +114,7 @@
   .style-guide-bar li {
     display: inline-block;
     margin: 0;
-    padding:0;
+    padding: 0;
   }
 
   .style-guide-bar li a {

data/app/assets/stylesheets/style_guide/sidebar.css

@@ -3,6 +3,7 @@
 }
 
 .style-guide-sidebar ul {
+  list-style: none;
   padding: 0;
   margin: 30px 20px;
   border: 1px solid #ddd;
@@ -26,6 +27,7 @@
 }
 
 .style-guide-sidebar a i {
+  font-style: normal;
   float: right;
   font-size: 30px;
   line-height: 18px;

data/app/views/layouts/style_guide/application.html.erb

@@ -17,7 +17,7 @@
         <label for="style-guide-checkbox">Sections</label>
         <a class="brand" href="/">Style Guide</a>
         <input id="style-guide-checkbox" type="checkbox" />
-        <ul class="nav">
+        <ul>
         <% @sections.each_with_index do |section, index| %>
           <li<%= (section == @active) ? ' class="active"'.html_safe : '' %>>
             <a href="<%= style_path(section.id) %>"><%= section.title %></a>

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

@@ -0,0 +1,8 @@
+<pre>
+  def find(*files)
+    pathname.ascend do |path|
+      file_name = files.detect { |fn| path.join(fn).file? }
+      break path.join(file_name) if file_name
+    end
+  end
+</pre>

data/app/views/style_guide/bootstrap_base/_form_controls:_checkbox_and_radio.erb

@@ -0,0 +1,13 @@
+<label class="checkbox">
+  <input type="checkbox" value="">
+  Option one is this and that—be sure to include why it's great
+</label>
+
+<label class="radio">
+  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
+  Option one is this and that—be sure to include why it's great
+</label>
+<label class="radio">
+  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
+  Option two can be something else and selecting it will deselect option one
+</label>

data/app/views/style_guide/bootstrap_base/_form_controls:_input.erb

@@ -0,0 +1 @@
+<input type="text" placeholder="Text input">

data/app/views/style_guide/bootstrap_base/_form_controls:_select.erb

@@ -0,0 +1,15 @@
+<select>
+  <option>1</option>
+  <option>2</option>
+  <option>3</option>
+  <option>4</option>
+  <option>5</option>
+</select>
+
+<select multiple="multiple">
+  <option>1</option>
+  <option>2</option>
+  <option>3</option>
+  <option>4</option>
+  <option>5</option>
+</select>

data/app/views/style_guide/bootstrap_base/_form_controls:_textarea.erb

@@ -0,0 +1 @@
+<textarea rows="3"></textarea>

data/app/views/style_guide/bootstrap_base/_forms:_default_styles.erb

@@ -0,0 +1,12 @@
+<form>
+  <fieldset>
+    <legend>Legend</legend>
+    <label>Label name</label>
+    <input type="text" placeholder="Type something…">
+    <span class="help-block">Example block-level help text here.</span>
+    <label class="checkbox">
+      <input type="checkbox"> Check me out
+    </label>
+    <button type="submit" class="btn">Submit</button>
+  </fieldset>
+</form>

data/app/views/style_guide/bootstrap_base/_forms:_horizontal.erb

@@ -0,0 +1,22 @@
+<form class="form-horizontal">
+  <div class="control-group">
+    <label class="control-label" for="inputEmail">Email</label>
+    <div class="controls">
+      <input type="text" id="inputEmail" placeholder="Email">
+    </div>
+  </div>
+  <div class="control-group">
+    <label class="control-label" for="inputPassword">Password</label>
+    <div class="controls">
+      <input type="password" id="inputPassword" placeholder="Password">
+    </div>
+  </div>
+  <div class="control-group">
+    <div class="controls">
+      <label class="checkbox">
+        <input type="checkbox"> Remember me
+      </label>
+      <button type="submit" class="btn">Sign in</button>
+    </div>
+  </div>
+</form>

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

@@ -0,0 +1,8 @@
+<form class="form-inline">
+  <input type="text" class="input-small" placeholder="Email">
+  <input type="password" class="input-small" placeholder="Password">
+  <label class="checkbox">
+    <input type="checkbox"> Remember me
+  </label>
+  <button type="submit" class="btn">Sign in</button>
+</form>

data/app/views/style_guide/bootstrap_base/_forms:_search.erb

@@ -0,0 +1,4 @@
+<form class="form-search">
+  <input type="text" class="input-medium search-query">
+  <button type="submit" class="btn">Search</button>
+</form>

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

@@ -0,0 +1,136 @@
+
+
+        <!-- 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>
+