themepile-abstractio 1.0.4 → 4.1.7

data/docs/components/switch.html.erb

@@ -0,0 +1,290 @@
+<% @side_nav = "forms" %>
+
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Switch" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">Switches can be used instead of regular radio buttons to switch between two options. They are customizable and use styles that won't show on phones that don't support media queries. On these devices, they will appear as regular radio buttons.</h4>
+
+        <div class="small-2 switch tiny">
+          <input id="a" name="switch-a" type="radio" checked>
+          <label for="a" onclick="">Off</label>
+
+          <input id="a1" name="switch-a" type="radio">
+          <label for="a1" onclick="">On</label>
+
+          <span></span>
+        </div>
+
+        <div class="small-3 switch small">
+          <input id="b" name="switch-b" type="radio" checked>
+          <label for="b" onclick="">Off</label>
+
+          <input id="b1" name="switch-b" type="radio">
+          <label for="b1" onclick="">On</label>
+
+          <span></span>
+        </div>
+
+        <div class="small-4 switch radius">
+          <input id="c" name="switch-c" type="radio" checked>
+          <label for="c" onclick="">Off</label>
+
+          <input id="c1" name="switch-c" type="radio">
+          <label for="c1" onclick="">On</label>
+
+          <span></span>
+        </div>
+
+        <div class="small-6 switch large round">
+          <input id="d" name="switch-d" type="radio" checked>
+          <label for="d" onclick="">Off</label>
+
+          <input id="d1" name="switch-d" type="radio">
+          <label for="d1" onclick="">On</label>
+
+          <span></span>
+        </div>
+
+        <hr>
+
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <h3>Build With Predefined HTML Classes</h3>
+        <p>There are two ways to build switches in Abstractio 4: with our predefined HTML classes or with our mixins. Building switches using our predefined classes is simple, you'll just need a <code>div.switch</code> wrapped around a specific input/label markup. From there, you can update the styles as you need to. The switches width is 100% of the container you put it in or you can use our grid classes, <code>.small-#</code> or <code>.large-#</code>, directly on the switch.</p>
+
+<%= code_example '
+<!-- Default switch -->
+<div class="switch">
+  <input id="x" name="switch-x" type="radio" checked>
+  <label for="x" onclick="">Off</label>
+
+  <input id="x1" name="switch-x" type="radio">
+  <label for="x1" onclick="">On</label>
+
+  <span></span>
+</div>
+
+<!-- Using class options -->
+<div class="switch large round">
+  <input id="z" name="switch-z" type="radio" checked>
+  <label for="z" onclick="">Off</label>
+
+  <input id="z1" name="switch-z" type="radio">
+  <label for="z1" onclick="">On</label>
+
+  <span></span>
+</div>', :html %>
+
+        <p>The class options:</p>
+        <ul class="disc">
+          <li><code>radius</code>: Add this to the the switch container to get a 3px radius paddle and edges</li>
+          <li><code>round</code>: Add this to the the switch container to get a round paddle and edges</li>
+          <li><code>tiny</code>: Set the height and text of the switch to tiny</li>
+          <li><code>small</code>: Set the height and text of the switch to small</li>
+          <li><code>large</code>: Set the height and text of the switch to large</li>
+        </ul>
+
+        <p>To use these styles, make sure you have the default Abstractio CSS package or that you've selected switches from a custom package. These should be linked up following our default <a href="../index.html">HTML page structure</a>.</p>
+
+        <hr>
+
+        <h3>Build with our Mixins</h3>
+        <p>We've included SCSS mixins used to style switches. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/themepile/abstractio/blob/master/scss/abstractio/_abstractio-global.scss">_abstractio-global.scss</a>, <a href="https://github.com/themepile/abstractio/blob/master/scss/abstractio/components/_global.scss">_global.scss</a> and <a href="https://github.com/themepile/abstractio/blob/master/scss/abstractio/components/_switch.scss">_switch.scss</a> from Github and throw them into a Abstractio folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
+
+<%= code_example '
+@import "abstractio/abstractio-global", "abstractio/components/global", "abstractio/components/switch";
+', :css %>
+
+        <p>The markup is pretty simple, you'll only need a single class or ID on the container to apply the mixin.</p>
+
+<%= code_example '
+<div class="your-class-name">
+  <input id="z" name="switch-z" type="radio" checked>
+  <label for="z" onclick="">Off</label>
+
+  <input id="z1" name="switch-z" type="radio">
+  <label for="z1" onclick="">On</label>
+
+  <span></span>
+</div>
+', :html %>
+
+        <h5>Quick Mixin</h5>
+        <p>You can build your labels using our global mixin by including it on your custom class or ID in your own stylesheet. The mixin contains options for changing the key styles, the rest of the defaults can be modified using the available variables. The global mixin looks like this:</p>
+
+<%= code_example '
+/* Using the default styles */
+.your-class-name { @include switch; }', :css %>
+
+        <div class="switch">
+          <input id="y" name="switch-y" type="radio" checked>
+          <label for="y" onclick="">Off</label>
+
+          <input id="y1" name="switch-y" type="radio">
+          <label for="y1" onclick="">On</label>
+
+          <span></span>
+        </div>
+
+        <p>There are <strong>ten options</strong> you can customize on the fly when writing this mixin. These controls things like: padding, text size, color and radius. Setting any of these options to false will negate those styles.</p>
+
+<%= code_example '
+/* Using the available options */
+.your-class-name {
+  @include switch($transition-speed, $transition-ease, $height, $font-size, $line-height, $paddle-bg, $positive-color, $negative-color, $radius, $base-style);
+}
+
+/* This sets the speed at which the switch toggles */
+$transition-speed: $switch-paddle-transition-speed
+
+/* This sets the ease of the switch transition */
+$transition-ease: $switch-paddle-transition-ease
+
+/* This controls the overall height of the switch */
+$height: $switch-height-med
+
+/* You can set a different font-size for you switch */
+$font-size: $switch-font-size-med
+
+/* You can set a different line-height too */
+$line-height: 2.3em
+
+/* This controls the background of the paddle */
+$paddle-bg: $switch-paddle-bg
+
+/* Set the box-shadow color for the right side of the switch */
+$positive-color: $switch-positive-color
+
+/* Set the box-shadow color for the left side of the switch */
+$negative-color: $switch-negative-color
+
+/* Set this to true for default radius or any number for complete control */
+$radius: false
+
+/* If you set this to false, base styles are left out */
+$base-style: true
+', :css %>
+
+        <div class="switch-custom">
+          <input id="w" name="switch-w" type="radio" checked>
+          <label for="w" onclick="">Off</label>
+
+          <input id="w1" name="switch-w" type="radio">
+          <label for="w1" onclick="">On</label>
+
+          <span></span>
+        </div>
+
+        <h5>Base Mixin</h5>
+        <p>You also have access to a few internal mixins that can create parts of the button as needed. The base mixin will create a switch base that only include structural styles.</p>
+
+<%= code_example '
+.your-class-name { @include switch-base($transition-speed, $transition-ease); }
+', :css %>
+
+        <div class="switch-custom-base">
+          <input id="o" name="switch-o" type="radio" checked>
+          <label for="o" onclick="">Off</label>
+
+          <input id="o1" name="switch-o" type="radio">
+          <label for="o1" onclick="">On</label>
+
+          <span></span>
+        </div>
+
+        <h5>Size Mixin</h5>
+        <p>The size mixin will let you control the size of the switch, font-size and line-height.</p>
+
+<%= code_example '
+.your-class-name {
+  @include switch-base($transition-speed, $transition-ease);
+  @include switch-size($height, $font-size, $line-height);
+}
+', :css %>
+
+        <div class="switch-custom-base size">
+          <input id="o2" name="switch-o2" type="radio" checked>
+          <label for="o2" onclick="">Off</label>
+
+          <input id="o3" name="switch-o2" type="radio">
+          <label for="o3" onclick="">On</label>
+
+          <span></span>
+        </div>
+
+        <h5>Style Mixin</h5>
+        <p>The last internal mixin you have access to for buttons is the style mixin. This will help you style background color, text color, positive/negative color, etc.</p>
+
+<%= code_example '
+.your-class-name {
+  @include switch-base($transition-speed, $transition-ease);
+  @include switch-size($height, $font-size, $line-height);
+  @include switch-style($paddle-bg, $positive-color, $negative-color, $radius, $base-style);
+}
+', :css %>
+
+        <div class="switch-custom-base size style">
+          <input id="o4" name="switch-o3" type="radio" checked>
+          <label for="o4" onclick="">Off</label>
+
+          <input id="o5" name="switch-o3" type="radio">
+          <label for="o5" onclick="">On</label>
+
+          <span></span>
+        </div>
+
+        <h5>Default SCSS Variables</h5>
+
+<%= code_example '
+/* Controlling border styles and background colors for the switch container */
+$switch-border-color:             darken(#fff, 20%);
+$switch-border-style:             solid;
+$switch-border-width:             1px;
+$switch-bg:                       #fff;
+
+/* We use these to control the switch heights for our default classes */
+$switch-height-tny:               22px;
+$switch-height-sml:               28px;
+$switch-height-med:               36px;
+$switch-height-lrg:               44px;
+$switch-bottom-margin:            emCalc(20px);
+
+/* We use these to control default font sizes for our classes. */
+$switch-font-size-tny:            11px;
+$switch-font-size-sml:            12px;
+$switch-font-size-med:            14px;
+$switch-font-size-lrg:            17px;
+$switch-label-side-padding:       6px;
+
+/* We use these to style the switch-paddle */
+$switch-paddle-bg:                #fff;
+$switch-paddle-fade-to-color:     darken($switch-paddle-bg, 10%);
+$switch-paddle-border-color:      darken($switch-paddle-bg, 35%);
+$switch-paddle-border-width:      1px;
+$switch-paddle-border-style:      solid;
+$switch-paddle-transition-speed:  .1s;
+$switch-paddle-transition-ease:   ease-out;
+$switch-positive-color:           lighten($success-color, 50%);
+$switch-negative-color:           #f5f5f5;
+
+/* Outline Style for tabbing through switches */
+$switch-label-outline:            1px dotted #888;', :css %>
+
+        <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_abstractio-global.scss</strong>.</p>
+
+      </div>
+    </div>
+  </div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+
+</div>

data/docs/components/tables.html.erb

@@ -0,0 +1,125 @@
+<% @side_nav = "css" %>
+
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Tables" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">Okay, they're not the sexiest things ever, but tables get the job done (for tabular data, of course).</h4>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <table>
+          <thead>
+            <tr>
+              <th width="200">Table Header</th>
+              <th>Table Header</th>
+              <th width="150">Table Header</th>
+              <th width="150">Table Header</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Content Goes Here</td>
+              <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
+              <td>Content Goes Here</td>
+              <td>Content Goes Here</td>
+            </tr>
+            <tr>
+              <td>Content Goes Here</td>
+              <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
+              <td>Content Goes Here</td>
+              <td>Content Goes Here</td>
+            </tr>
+            <tr>
+              <td>Content Goes Here</td>
+              <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
+              <td>Content Goes Here</td>
+              <td>Content Goes Here</td>
+            </tr>
+          </tbody>
+        </table>
+
+        <hr>
+
+        <h3>Build With Predefined HTML Classes</h3>
+        <p>Tables are built from a mixin, but since tables don't rely on any classes to build, you can use the table element and customize with your CSS. If you are using SCSS, the variables will help you customize the look and feel.</p>
+
+<%= code_example '
+<table>
+  <thead>
+    <tr>
+      <th width="200">Table Header</th>
+      <th>Table Header</th>
+      <th width="150">Table Header</th>
+      <th width="150">Table Header</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Content Goes Here</td>
+      <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
+      <td>Content Goes Here</td>
+      <td>Content Goes Here</td>
+    </tr>
+    <tr>
+      <td>Content Goes Here</td>
+      <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
+      <td>Content Goes Here</td>
+      <td>Content Goes Here</td>
+    </tr>
+    <tr>
+      <td>Content Goes Here</td>
+      <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
+      <td>Content Goes Here</td>
+      <td>Content Goes Here</td>
+    </tr>
+  </tbody>
+</table>', :html %>
+
+        <hr>
+
+        <h5>Default SCSS Variables</h5>
+
+<%= code_example '
+/* These control the background color for the table and even rows */
+$table-bg:               #fff;
+$table-even-row-bg:      #f9f9f9;
+
+/* These control the table cell border style */
+$table-border-style:     solid;
+$table-border-size:      1px;
+$table-border-color:     #ddd;
+
+/* These control the table head styles */
+$table-head-bg:          #f5f5f5;
+$table-head-font-size:   emCalc(14px);
+$table-head-font-color:  #222;
+$table-head-font-weight: bold;
+$table-head-padding:     emCalc(8px) emCalc(10px) emCalc(10px);
+
+/* These control the row padding and font styles */
+$table-row-padding:      emCalc(9px) emCalc(10px);
+$table-row-font-size:    emCalc(14px);
+$table-row-font-color:   #222;
+$table-line-height:      emCalc(18px);
+
+/* These are for controlling the display and margin of tables */
+$table-display:          table-cell;
+$table-margin-bottom:    emCalc(20px);', :css %>
+
+        <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_abstractio-global.scss</strong>.</p>
+
+
+      </div>
+    </div>
+  </div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+</div>

data/docs/components/thumbnails.html.erb

@@ -0,0 +1,89 @@
+<% @side_nav = "css" %>
+
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Thumbnails" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">If you are going to use an image as an anchor, we got you covered. All you gotta do is wrap an <code>a.th</code> around your image and voilà!</h4>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <a class="th" href="../img/demos/demo1.jpg"><img src="../img/demos/demo1-th.jpg"></a>
+
+        <hr>
+
+        <h3>Building With Predefined HTML Class</h3>
+        <p>We make it really easy to create thumbnails links out of images. Simply wrap your <code>&lt;img&gt;</code> inside a <code>&lt;a class="th"&gt;</code> and you're good to go! You may alternately choose to add a class of <code>.radius</code> to give it a neat little border-radius.</p>
+
+<%= code_example '
+<a class="th radius" href="../img/demos/demo2.png">
+<img src="../img/demos/demo2-th.png">
+</a>', :html %>
+
+        <a class="th radius" href="../img/demos/demo2.jpg"><img src="../img/demos/demo2-th.jpg"></a>
+
+        <hr>
+
+        <h3>Build with our Mixins</h3>
+        <p>We've included SCSS mixins used to style labels. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/themepile/abstractio/blob/master/scss/abstractio/_abstractio-global.scss">_abstractio-global.scss</a>, <a href="https://github.com/themepile/abstractio/blob/master/scss/abstractio/components/_global.scss">_global.scss</a> and <a href="https://github.com/themepile/abstractio/blob/master/scss/abstractio/components/_thumbs.scss">_thumbs.scss</a> from Github and throw them into a Abstractio folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
+
+<%= code_example '
+@import "abstractio/abstractio-global", "abstractio/components/global", "abstractio/components/labels";
+', :css %>
+
+        <h5>Quick Mixin</h5>
+        <p>You can build your labels using our global mixin by including it on your custom class or ID  in your own stylesheet. The mixin contains options for changing the background color, which also controls the border and text color. You'll also have the ability to change the font-size and padding. The rest of the defaults can be modified using the available variables. The global mixin looks like this:</p>
+
+<%= code_example '
+/* Using the default styles */
+.your-class-name { @include thumb; }', :css %>
+
+        <p><a class="th" href="../img/demos/demo3.jpg"><img src="../img/demos/demo3-th.jpg"></a></p>
+
+        <p>There are also three options you can customize on the fly when writing this mixin. These controls things like: border-width and hover styles for the box-shadow.</p>
+
+<%= code_example '
+/* Using the available options */
+.your-class-name { @include thumb($border-width, $box-shadow, $box-shadow-hover); }
+
+/* Control the width of the white area around the thumbnails */
+$border-width: $thumb-border-width
+
+/* Control the default box-shadow that looks like a 1px border */
+$box-shadow: $thumb-box-shadow
+
+/* Change up the style of that box-shadow on hover */
+$box-shadow-hover: $thumb-box-shadow-hover
+', :css %>
+
+        <p>You can also add the radius and single-transition mixin on top of this to create even more versatility!</p>
+
+        <p><a class="th-custom" href="../img/demos/demo4.jpg"><img src="../img/demos/demo4-th.jpg"></a></p>
+
+        <h5>Default SCSS Variables</h5>
+
+<%= code_example '
+/* We use these to control border styles */
+$thumb-border-style:     solid;
+$thumb-border-width:     4px;
+$thumb-border-color:     #fff;
+$thumb-box-shadow:       0 0 0 1px rgba(#000,.2);
+$thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5);
+
+/* Radius and transition speed for thumbs */
+$thumb-radius:           $global-radius;
+$thumb-transition-speed: 200ms;', :css %>
+
+      </div>
+    </div>
+  </div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+</div>