skeletor_backbone 0.0.5 → 0.0.6

data/app/assets/stylesheets/skeletor/globals/mixins/_vertical_spacing.sass

@@ -0,0 +1,29 @@
+//  Skeletor Vertical Spacing
+//    -> Shorthand for REM vertical spacing (margin-bottom)
+//
+//  Available as:
+//    +skeletor-vertical-spacing()
+//    +s-vertical-spacing()
+//    +s-vs()
+//
+// -----------------------------------------------------------------------------
+
+@import "skeletor/globals/mixins/rem"
+
+// ----- Vertical Spacing Mixin ----- //
+=skeletor-vertical-spacing($target)
+  +skeletor-rem(margin-bottom, $target)
+
+
+// ----- Alias for Vertical Spacing Mixin ----- //
+=s-vertical-spacing($target)
+  +skeletor-vertical-spacing($target)
+
+=s-vs($target)
+  +skeletor-vertical-spacing($target)
+
+
+// ----- If no-conflict set to allow simpler mixin name ----- //
+// @if $no-conflict
+//   =vertical-spacing($target)
+//     +skeletor-vertical-spacing($target)

data/app/assets/stylesheets/skeletor/modules/_forms.sass

@@ -0,0 +1,27 @@
+// Forms
+//    -> Module for styled `form` elements
+//
+// =============================================================================
+// Table of Contents
+// =============================================================================
+//
+//  MODULE.....................Base module class
+//  MODIFIERS..................Modifiers to base module class
+//
+
+// -----------------------------------------------------------------------------
+//  :: MODULE
+// -----------------------------------------------------------------------------
+.form
+
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: MODIFIERS
+// -----------------------------------------------------------------------------
+
+// ----- Fieldset with Border ----- //
+.fieldset--bordered
+  border: 1px solid $light-gray

data/app/assets/stylesheets/skeletor/modules/_rules.sass

@@ -0,0 +1,54 @@
+// Rules
+//    -> Module for styled `hr` elements
+//
+// =============================================================================
+// Table of Contents
+// =============================================================================
+//
+//  IMPORTS....................Import Sass Settings and Functions
+//  MODULE.....................Base module class
+//  MODIFIERS..................Modifiers to base module class
+//
+
+
+// -----------------------------------------------------------------------------
+//  :: IMPORTS
+// -----------------------------------------------------------------------------
+@import "skeletor/globals/mixins/position"
+
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: MODULE
+// -----------------------------------------------------------------------------
+.rule
+  @extend hr
+
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: MODIFIERS
+// -----------------------------------------------------------------------------
+.rule--dotted
+  border-bottom-style: dotted
+
+.rule--dashed
+  border-bottom-style: dashed
+
+.rule--ornament
+  position: relative
+
+  &:after
+    +skeletor-position(absolute, 0px 0px 0 0px)
+    content: "\00A7"
+    line-height: 0
+    text-align: center
+
+  // Pass in arbitrary ornament through a data attribute.
+  // hr.rule--ornament{data-ornament="!"}
+  &[data-ornament]
+    content: attr(data-ornament)

data/app/assets/stylesheets/skeletor/modules/_tables.sass

@@ -0,0 +1,43 @@
+// Tables
+//    -> Module for styled `table` elements
+//
+// =============================================================================
+// Table of Contents
+// =============================================================================
+//
+//  MODULE.....................Base module class
+//  MODIFIERS..................Modifiers to base module class
+//
+
+// -----------------------------------------------------------------------------
+//  :: MODULE
+// -----------------------------------------------------------------------------
+.table
+
+
+
+
+
+// -----------------------------------------------------------------------------
+//  :: MODIFIERS
+// -----------------------------------------------------------------------------
+
+// ----- Bordered Tables ----- //
+.table--bordered
+  th, td
+    border: 1px solid $light-gray
+
+    &:empty
+      border: none
+
+  thead tr:last-child th
+    border-bottom-width: 2px
+
+  tbody tr th:last-of-type
+    border-right-width: 2px
+
+
+// ----- Striped Tables ----- //
+.table--striped
+  tbody tr:nth-of-type(odd)
+    background-color: $lightest-gray

data/app/controllers/skeletor_backbone/skeletor_controller.rb

@@ -0,0 +1,10 @@
+module SkeletorBackbone
+  class SkeletorController < ActionController::Base
+
+    def index
+      params[:preview_style] = 'skeletor-preview' if params[:preview_style].blank? || params[:preview_style] == 'skeletor'
+      @preview_style = params[:preview_style]
+    end
+
+  end
+end

data/app/views/skeletor_backbone/skeletor/index.html.erb

@@ -0,0 +1,445 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Skeletor Preview</title>
+
+    <%= stylesheet_link_tag @preview_style %>
+
+    <style>
+      .cf:after {
+        clear: both;
+        content: '';
+        display: table;
+      }
+
+      .s-header {
+        background: #3975a7; /* #a2a9af, #778899, #bbc3cc, #c8cfd6, #3975a7*/
+/*        height: 120px;
+        padding: 10px;*/
+        margin-bottom: 20px;
+      }
+
+      .s-header h1 {
+        color: #eee;
+        margin-bottom: 0;
+      }
+
+      .s-header img {
+        float: left;
+        margin-right: 40px;
+        height: 120px;
+        width: auto;
+      }
+
+      .s-lead {
+        font-size: 20px;
+        color: #eee;
+        margin: 0;
+      }
+
+      .s-section {
+        margin: 0 auto;
+        width: 95%;
+        max-width: 1140px;
+      }
+
+      form {
+        width: 50%;
+      }
+
+    </style>
+  </head>
+
+  <body>
+
+    <header class="s-header cf">
+      <%= image_tag "skeletor/skeletor.png" %>
+      <h1>Skeletor Preview</h1>
+      <p class="s-lead">This preview page is used for visually testing various HTML elements</p>
+    </header>
+
+    <section class="s-section">
+
+      <h3>Paragraphs</h3>
+
+      <p>Bacon ipsum dolor sit amet pig salami chuck, fatback biltong andouille cow
+      jerky. Filet mignon brisket rump, landjaeger ground round short ribs shankle
+      ribeye meatloaf pancetta jerky. Boudin turkey meatball t-bone pig, beef ribs
+      spare ribs shank chuck kevin.</p>
+
+      <p>Short loin pork loin salami sausage, corned beef strip steak bacon tongue.
+      Shankle pork belly salami chuck porchetta venison flank, shank andouille jerky
+      pancetta. Ham shankle turducken pork ground round. Turducken sirloin t-bone,
+      fatback jerky pastrami biltong tenderloin kielbasa kevin pancetta doner.</p>
+
+      <hr class="rule--ornament">
+
+      <h3>Headings</h3>
+
+      <h1>Heading 1</h1>
+      <h2>Heading 2</h2>
+      <h3>Heading 3</h3>
+      <h4>Heading 4</h4>
+      <h5>Heading 5</h5>
+      <h6>Heading 6</h6>
+
+      <hr class="rule--ornament">
+
+      <h3>Unordered List</h3>
+
+      <ul>
+        <li>Unordered List Item 1</li>
+        <li>Unordered List Item 2</li>
+        <ul>
+          <li>Unordered List Item 2.1</li>
+          <li>Unordered List Item 2.2</li>
+          <ul>
+          <li>Unordered List Item 2.2.1</li>
+          <li>Unordered List Item 2.2.2</li>
+          <li>Unordered List Item 2.2.3</li>
+          </ul>
+        </ul>
+        <li>Unordered List Item 3</li>
+        <ul>
+          <li>Unordered List Item 3.1</li>
+          <li>Unordered List Item 3.2</li>
+        </ul>
+        <li>Unordered List Item 4</li>
+      </ul>
+
+      <hr class="rule--ornament">
+
+      <h3>Ordered List</h3>
+
+      <ol>
+        <li>Ordered List Item 1</li>
+        <li>Ordered List Item 2</li>
+        <ol>
+          <li>Ordered List Item 2.1</li>
+          <li>Ordered List Item 2.2</li>
+          <ol>
+          <li>Ordered List Item 2.2.1</li>
+          <li>Ordered List Item 2.2.2</li>
+          <li>Ordered List Item 2.2.3</li>
+          </ol>
+        </ol>
+        <li>Ordered List Item 3</li>
+        <ol>
+          <li>Ordered List Item 3.1</li>
+          <li>Ordered List Item 3.2</li>
+        </ol>
+        <li>Ordered List Item 4</li>
+      </ol>
+
+      <hr class="rule--ornament">
+
+      <h3>Definition List</h3>
+
+      <dl>
+        <dt>Topic One</dt>
+        <dd>This is the definition for Topic One.</dd>
+        <dt>Topic Two</dt>
+        <dd>This is the definition for Topic Two.</dd>
+        <dt>Topic Three</dt>
+        <dd>This is the definition for Topic Three.</dd>
+      </dl>
+
+      <hr class="rule--ornament">
+
+      <h3>Tables</h3>
+
+      <table>
+        <caption>Default Table - No Classes</caption>
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>Column 1</th>
+            <th>Column 2</th>
+            <th>Column 3</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          <tr>
+            <td>1</td>
+            <td>Item One</td>
+            <td>$17.53</td>
+            <td>true</td>
+          </tr>
+
+          <tr>
+            <td>2</td>
+            <td>Item Two</td>
+            <td>$9.71</td>
+            <td>true</td>
+          </tr>
+
+          <tr>
+            <td>3</td>
+            <td>Item 3</td>
+            <td>$23.55</td>
+            <td>false</td>
+          </tr>
+
+          <tr>
+            <td>4</td>
+            <td>Item Four</td>
+            <td>$12.04</td>
+            <td>false</td>
+          </tr>
+
+          <tr>
+            <td>5</td>
+            <td>Item Five</td>
+            <td>$21.93</td>
+            <td>true</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <table class="table--bordered">
+        <caption>Table - Bordered</caption>
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>Column 1</th>
+            <th>Column 2</th>
+            <th>Column 3</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          <tr>
+            <td>1</td>
+            <td>Item One</td>
+            <td>$17.53</td>
+            <td>true</td>
+          </tr>
+
+          <tr>
+            <td>2</td>
+            <td>Item Two</td>
+            <td>$9.71</td>
+            <td>true</td>
+          </tr>
+
+          <tr>
+            <td>3</td>
+            <td>Item 3</td>
+            <td>$23.55</td>
+            <td>false</td>
+          </tr>
+
+          <tr>
+            <td>4</td>
+            <td>Item Four</td>
+            <td>$12.04</td>
+            <td>false</td>
+          </tr>
+
+          <tr>
+            <td>5</td>
+            <td>Item Five</td>
+            <td>$21.93</td>
+            <td>true</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <table class="table--striped">
+        <caption>Table - Striped</caption>
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>Column 1</th>
+            <th>Column 2</th>
+            <th>Column 3</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          <tr>
+            <td>1</td>
+            <td>Item One</td>
+            <td>$17.53</td>
+            <td>true</td>
+          </tr>
+
+          <tr>
+            <td>2</td>
+            <td>Item Two</td>
+            <td>$9.71</td>
+            <td>true</td>
+          </tr>
+
+          <tr>
+            <td>3</td>
+            <td>Item 3</td>
+            <td>$23.55</td>
+            <td>false</td>
+          </tr>
+
+          <tr>
+            <td>4</td>
+            <td>Item Four</td>
+            <td>$12.04</td>
+            <td>false</td>
+          </tr>
+
+          <tr>
+            <td>5</td>
+            <td>Item Five</td>
+            <td>$21.93</td>
+            <td>true</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <hr class="rule--ornament">
+
+      <h3>Forms</h3>
+
+      <form action="">
+        <fieldset>
+          <legend>Default Form - No Classes</legend>
+
+          <p>
+            <label>
+              <span>Required Text Input: </span>
+              <strong><abbr title="required">*</abbr></strong>
+              <input type="text" placeholder="Required Text input" required>
+            </label>
+          </p>
+
+          <p>
+            <label>
+              <span>Text Input: </span>
+              <input type="text" placeholder="Text input">
+            </label>
+          </p>
+
+          <p>
+            <label>
+              <span>Disabled Text Input: </span>
+              <input type="text" placeholder="Text input" disabled>
+            </label>
+          </p>
+
+          <p>
+            <label>
+              <span>Select input: </span>
+              <select>
+                <option>Option 1</option>
+                <option>Option 2</option>
+                <option>Option 3</option>
+              </select>
+            </label>
+          </p>
+
+          <p>
+            <label>
+              <input type="checkbox">
+              <span>Checkbox 1 </span>
+            </label>
+
+            <br>
+
+            <label>
+              <input type="checkbox">
+              <span>Checkbox 2 </span>
+            </label>
+          </p>
+
+          <p>
+            <label>
+              <input type="radio" name="rbox">
+              <span>Radio 1 </span>
+            </label>
+
+            <br>
+
+            <label>
+              <input type="radio" name="rbox">
+              <span>Radio 2 </span>
+            </label>
+          </p>
+
+          <p>
+            <label>Text area 1
+              <textarea name="textarea" rows="10" placeholder="Text area"></textarea>
+            </label>
+          </p>
+
+          <p>
+            <input type="submit" class="button button-primary">
+            <input type="reset" class="button" value="Clear">
+          </p>
+        </fieldset>
+      </form>
+
+      <form action="">
+        <fieldset class="fieldset--bordered">
+          <legend>Form - Fieldset Border</legend>
+          <p>
+            <label>
+              <span>Text Input: </span>
+              <input type="text" placeholder="Text input">
+            </label>
+          </p>
+
+          <p>
+            <input type="submit" class="button button-primary">
+            <input type="reset" class="button" value="Clear">
+          </p>
+        </fieldset>
+      </form>
+
+
+      <hr class="rule--ornament">
+
+      <h3>Blockquote</h3>
+
+      <blockquote cite="http://www.imdb.com/character/ch0000672/quotes">
+        <p>Some random quote by some random person.</p>
+        <footer><a href="">Random Person</a></footer>
+      </blockquote>
+
+      <hr class="rule--ornament">
+
+      <h3>Pre Code</h3>
+
+      <pre><code>&lt;p&gt;This is an example for pre code tags.&lt;/p&gt;</code></pre>
+
+      <hr class="rule--ornament">
+
+      <h3>Inline Text Formatting</h3>
+
+        <p>This is the <abbr title="Abbreviation">ABBR</abbr> element.</p>
+        <p>This is the <b>b</b> element.</p>
+        <p>This is the <cite>cite</cite> element.</p>
+        <p>This is the <code>code</code> element.</p>
+        <p>This is the <del>del</del> element.</p>
+        <p>This is the <dfn>dfn</dfn> element.</p>
+        <p>This is the <em>em</em> element.</p>
+        <p>This is the <i>i</i> element.</p>
+        <p>This is the <ins>ins</ins> element.</p>
+        <p>This is the <kbd>kbd</kbd> element.</p>
+        <p>This is the
+          <mark>mark</mark>
+          element.</p>
+        <p>This is the <samp>samp</samp> element.</p>
+        <p>This is the <small>small</small> element.</p>
+        <p>This is the <strong>strong</strong> element.</p>
+        <p>This is the <sub>sub</sub> element.</p>
+        <p>This is the <sup>sup</sup> element.</p>
+        <p>This is the <var>var</var> element.</p>
+
+    </section>
+
+    <footer class="s-footer">
+
+    </footer>
+
+  </body>
+</html>