themepile-abstractio 1.0.4 → 4.1.7

data/docs/components/global.html.erb

@@ -0,0 +1,92 @@
+<% @side_nav = "css" %>
+
+<div class="row">
+  <div class="large-9 push-3 columns">
+    <div class="row">
+      <div class="large-12 columns">
+        <% @page_title = "Global" %>
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">Every Abstractio project needs to include these global styles in order to work properly. These include things like basic formatting and global utility classes.</h4>
+
+        <hr>
+
+<%= code_example "
+/* Set box-sizing globally to handle padding and border widths */
+*,
+*:before,
+*:after {
+  @include box-sizing(border-box);
+}
+
+html,
+body { font-size: $base-font-size; }
+
+/* Default body styles */
+body {
+  background: $body-bg;
+  color: $body-font-color;
+  padding: 0;
+  margin: 0;
+  font-family: $body-font-family;
+  font-weight: $body-font-weight;
+  font-style: $body-font-style;
+  line-height: 1;
+  position: relative;
+}
+
+/* Override outline from normalize, we don't like it */
+a:focus { outline: none; }
+
+/* Grid Defaults to get images and embeds to work properly */
+img,
+object,
+embed { max-width: 100%; height: auto; }
+
+object,
+embed { height: 100%; }
+img { -ms-interpolation-mode: bicubic; }
+
+#map_canvas,
+.map_canvas {
+  img,
+  embed,
+  object { max-width: none !important;
+  }
+}
+
+/* Miscellaneous useful HTML classes */
+.left         { float: left !important; }
+.right        { float: right !important; }
+.text-left    { text-align: left !important; }
+.text-right   { text-align: right !important; }
+.text-center  { text-align: center !important; }
+.text-justify { text-align: justify !important; }
+.hide         { display: none; }
+
+/* Font smoothing */
+/* Antialiased font smoothing works best for light text on a dark background. */
+/* Apply to single elements instead of globally to body. */
+/* Note this only applies to webkit-based desktop browsers on the Mac. */
+.antialiased { -webkit-font-smoothing: antialiased; }
+
+/* Get rid of gap under images by making them display: inline-block; by default */
+img { display: inline-block; }
+
+/* Make sure textarea takes on height automatically */
+textarea { height: auto; min-height: 50px; }
+
+/* Make select elements 100% width by default */
+select { width: 100%; }
+", :css %>
+
+      </div>
+    </div>
+
+  </div>
+
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+
+</div>
+

data/docs/components/grid.html.erb

@@ -0,0 +1,366 @@
+<% @side_nav = "grid" %>
+
+    <style>
+      .row.display { background: #eee; font-size: 11px; margin-bottom: 10px; }
+      .row.display .columns, .row.display .column { background: #e7e7e7; border: 1px solid #ddd; font-size: 13px; font-weight: bold; text-indent: 3px; padding-top: 8px; color: #444; padding-bottom: 8px; }
+    </style>
+
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Grid" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">Create powerful multi-device layouts quickly and easily with the 12-column, nestable Abstractio grid. If you're familiar with grid systems, you'll feel right at home. If not, you'll learn quickly.</h4>
+        <hr>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <h3>Using our Predefined HTML Classes</h3>
+        <p>These are examples of different ways to use the Abstractio Grid. Abstractio uses <code>box-sizing: border-box</code> so that borders and padding do not affect the overall width of the columns, making the math dead-simple. Since Abstractio is mobile-first, we'll stack content by default. You do have access to an entirely separate small grid to use up to the 768px breakpoint. This means you can create some pretty complex layouts and even drop columns if you want.</p>
+
+<%= code_example '
+<div class="row">
+  <div class="small-2 large-4 columns">...</div>
+  <div class="small-4 large-4 columns">...</div>
+  <div class="small-6 large-4 columns">...</div>
+</div>
+<div class="row">
+  <div class="large-3 columns">...</div>
+  <div class="large-6 columns">...</div>
+  <div class="large-3 columns">...</div>
+</div>
+<div class="row">
+  <div class="small-6 large-2 columns">...</div>
+  <div class="small-6 large-8 columns">...</div>
+  <div class="small-12 large-2 columns">...</div>
+</div>
+<div class="row">
+  <div class="small-3 columns">...</div>
+  <div class="small-9 columns">...</div>
+</div>
+<div class="row">
+  <div class="large-4 columns">...</div>
+  <div class="large-8 columns">...</div>
+</div>
+<div class="row">
+  <div class="small-6 large-5 columns">...</div>
+  <div class="small-6 large-7 columns">...</div>
+</div>
+<div class="row">
+  <div class="large-6 columns">...</div>
+  <div class="large-6 columns">...</div>
+</div>', :html %>
+
+        <div class="row display">
+          <div class="small-2 large-4 columns"><span class="show-for-small">2</span><span class="hide-for-small">4</span></div>
+          <div class="small-4 large-4 columns">4</div>
+          <div class="small-6 large-4 columns"><span class="show-for-small">6</span><span class="hide-for-small">4</span></div>
+        </div>
+        <div class="row display">
+          <div class="large-3 columns"><span class="show-for-small">full</span><span class="hide-for-small">3</span></div>
+          <div class="large-6 columns"><span class="show-for-small">full</span><span class="hide-for-small">6</span></div>
+          <div class="large-3 columns"><span class="show-for-small">full</span><span class="hide-for-small">3</span></div>
+        </div>
+        <div class="row display">
+          <div class="small-6 large-2 columns"><span class="show-for-small">6</span><span class="hide-for-small">2</span></div>
+          <div class="small-6 large-8 columns"><span class="show-for-small">6</span><span class="hide-for-small">8</span></div>
+          <div class="small-12 large-2 columns"><span class="show-for-small">full</span><span class="hide-for-small">2</span></div>
+        </div>
+        <div class="row display">
+          <div class="small-3 columns">3</div>
+          <div class="small-9 columns">9</div>
+        </div>
+        <div class="row display">
+          <div class="large-4 columns"><span class="show-for-small">full</span><span class="hide-for-small">4</span></div>
+          <div class="large-8 columns"><span class="show-for-small">full</span><span class="hide-for-small">8</span></div>
+        </div>
+        <div class="row display">
+          <div class="small-6 large-5 columns"><span class="show-for-small">6</span><span class="hide-for-small">5</span></div>
+          <div class="small-6 large-7 columns"><span class="show-for-small">6</span><span class="hide-for-small">7</span></div>
+        </div>
+        <div class="row display">
+          <div class="large-6 columns"><span class="show-for-small">full</span><span class="hide-for-small">6</span></div>
+          <div class="large-6 columns"><span class="show-for-small">full</span><span class="hide-for-small">6</span></div>
+        </div>
+
+        <hr>
+
+        <h4>Infinitely Nest Your Grid</h4>
+        <p>The grid allows for nesting down as far as you'd like, though at a certain point it will get absurd. You can use this nesting to create quite complex layouts, as well as some other tricks like form layouts or visual elements.</p>
+
+<%= code_example '
+<div class="row">
+  <div class="small-8 columns">8
+    <div class="row">
+      <div class="small-8 columns">8 Nested
+        <div class="row">
+          <div class="small-8 columns">8 Nested Again</div>
+          <div class="small-4 columns">4</div>
+        </div>
+      </div>
+      <div class="small-4 columns">4</div>
+    </div>
+  </div>
+  <div class="small-4 columns">4</div>
+</div>', :html %>
+
+        <div class="row display">
+          <div class="small-8 columns">8
+            <div class="row">
+              <div class="small-8 columns">8 Nested
+                <div class="row">
+                  <div class="small-8 columns">8 Nested Again</div>
+                  <div class="small-4 columns">4</div>
+                </div>
+              </div>
+              <div class="small-4 columns">4</div>
+            </div>
+          </div>
+          <div class="small-4 columns">4</div>
+        </div>
+
+        <hr>
+
+        <h4>Offsets</h4>
+        <p>Offsets allow you to create additional space between columns in a row. Like the rest of the grid, they're nestable. You can use classes like <code>.large-offset-1</code> and <code>.small-offset-3</code> to manipulate your column positions in different ways. You can offset up to 11 since you wouldn't ever offset a full-width column.</p>
+
+<%= code_example '
+<div class="row">
+  <div class="large-1 columns">1</div>
+  <div class="large-11 columns">11</div>
+</div>
+<div class="row">
+  <div class="large-1 columns">1</div>
+  <div class="large-10 large-offset-1 columns">10, offset 1</div>
+</div>
+<div class="row">
+  <div class="large-1 columns">1</div>
+  <div class="large-9 large-offset-2 columns">9, offset 2</div>
+</div>
+<div class="row">
+  <div class="large-1 columns">1</div>
+  <div class="large-8 large-offset-3 columns">8, offset 3</div>
+</div>', :html %>
+
+        <div class="row display">
+          <div class="large-1 columns">1</div>
+          <div class="large-11 columns">11</div>
+        </div>
+        <div class="row display">
+          <div class="large-1 columns">1</div>
+          <div class="large-10 large-offset-1 columns">10, offset 1</div>
+        </div>
+        <div class="row display">
+          <div class="large-1 columns">1</div>
+          <div class="large-9 large-offset-2 columns">9, offset 2</div>
+        </div>
+        <div class="row display">
+          <div class="large-1 columns">1</div>
+          <div class="large-8 large-offset-3 columns">8, offset 3</div>
+        </div>
+
+        <hr>
+
+        <h4>Centered Columns</h4>
+        <p>Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element, itself. This is accomplished by adding a class of <code>large-centered</code> or <code>small-centered</code> depending on which breakpoint you want the columns to center on. Small versions will carry through all breakpoints if not overridden by a large version. You can center any number of columns you have. To have a column not carry it's small-centered to large, add a class of <code>large-uncentered</code>.</p>
+
+<%= code_example '
+<div class="row">
+  <div class="small-3 small-centered columns">3 centered</div>
+</div>
+<div class="row">
+  <div class="small-6 large-centered columns">6 centered</div>
+</div>
+<div class="row">
+  <div class="small-9 small-centered columns">9 centered</div>
+</div>
+<div class="row">
+  <div class="small-11 small-centered columns">11 centered</div>
+</div>', :html %>
+
+        <div class="row display">
+          <div class="small-3 small-centered columns">3 centered</div>
+        </div>
+        <div class="row display">
+          <div class="small-6 large-centered columns">6 centered, large</div>
+        </div>
+        <div class="row display">
+          <div class="small-9 small-centered large-uncentered columns">9 centered small</div>
+        </div>
+        <div class="row display">
+          <div class="small-11 small-centered columns">11 centered</div>
+        </div>
+
+        <hr>
+
+        <h4>Source Ordering</h4>
+
+        <p>Using these source ordering classes, you can shift columns around between our breakpoints. This means you can have a sub-nav on the left on large displays, but go below on small ones. <code>.push-#</code> is the syntax you'll use.</p>
+
+
+<%= code_example '
+<div class="row">
+  <div class="small-2 push-10 columns">2</div>
+  <div class="small-10 pull-2 columns">10, last</div>
+</div>
+<div class="row">
+  <div class="small-3 push-9 columns">3</div>
+  <div class="small-9 pull-3 columns">9, last</div>
+</div>
+<div class="row">
+  <div class="small-4 push-8 columns">4</div>
+  <div class="small-8 pull-4 columns">8, last</div>
+</div>
+<div class="row">
+  <div class="small-5 push-7 columns">5</div>
+  <div class="small-7 pull-5 columns">5, last</div>
+</div>
+<div class="row">
+  <div class="small-6 push-6 columns">6</div>
+  <div class="small-6 pull-6 columns">6, last</div>
+</div>', :html %>
+
+        <div class="row display">
+          <div class="small-2 push-10 columns">2</div>
+          <div class="small-10 pull-2 columns">10, last</div>
+        </div>
+        <div class="row display">
+          <div class="small-3 push-9 columns">3</div>
+          <div class="small-9 pull-3 columns">9, last</div>
+        </div>
+        <div class="row display">
+          <div class="small-4 push-8 columns">4</div>
+          <div class="small-8 pull-4 columns">8, last</div>
+        </div>
+        <div class="row display">
+          <div class="small-5 push-7 columns">5</div>
+          <div class="small-7 pull-5 columns">5, last</div>
+        </div>
+        <div class="row display">
+          <div class="small-6 push-6 columns">6</div>
+          <div class="small-6 pull-6 columns">6, last</div>
+        </div>
+
+        <hr>
+
+        <h4>Small Grid</h4>
+        <p>As you've probably noticed in the examples above, you have access to a small and large grid. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. You can override your small grid classes by adding large grid classes to it. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a target="_blank" href="https://github.com/themepile/abstractio/tree/master/scss/abstractio/components">_abstractio-global.scss</a>, <a href="https://github.com/themepile/abstractio/blob/master/scss/abstractio/components/_global.scss">_global.scss</a> and <a target="_blank" href="https://github.com/themepile/abstractio/tree/master/scss/abstractio/components">_grid.scss</a> from Github and throw them into a Abstractio folder in your project directory.</p>
+
+<%= code_example '
+<div class="row">
+  <div class="small-2 columns">2</div>
+  <div class="small-10 columns">10, last</div>
+</div>
+<div class="row">
+  <div class="small-3 columns">3</div>
+  <div class="small-9 columns">9, last</div>
+</div>', :html %>
+
+        <div class="row display">
+          <div class="small-2 columns">2</div>
+          <div class="small-10 columns">10, last</div>
+        </div>
+        <div class="row display">
+          <div class="small-3 columns">3</div>
+          <div class="small-9 columns">9, last</div>
+        </div>
+
+        <hr>
+
+        <h3>Building With Mixins</h3>
+        <p>If you are keen on SCSS and use it for your Abstractio projects, you have access to grid mixins that will let you layout the page without using presentational classes that you don't want. You can create your own set of classes or even create your own grid. Setting any of the options to 'false' will leave off those styles, giving you lots of control over your CSS output. Here's an example structure you might use with the grid mixin:</p>
+
+        <h5>Basic Mixin Usage</h5>
+<%= code_example '
+/* Mixin options creating rows */
+@include grid-row($behavior);
+
+/* The default value is false, which will bring in the default row styles */
+$behavior: false
+
+/* If the element you are creating as a row is nested within another element */
+/* that is also a row, you need to add the proper nesting styles */
+$behavior: nest
+
+/* You can use this option to collapse the container row margins */
+/* This comes in handy when working with forms inside the grid */
+$behavior: collapse
+
+/* If you have a nested row and want it to be collapsed, you need to add this option */
+$behavior: nest-collapse
+', :css %>
+
+<%= code_example '
+/* Mixin options creating columns, these must be nested inside or a row */
+@include grid-column($columns, $last-column, $center, $offset, $push, $pull, $collapse, $float);
+
+/* The most commonly used option with a column */
+/* This sets the width properties for the column, use a number to represent columns */
+$columns: #
+
+/* Use this option if your columns do not add up to 12. */
+/* We make the last column default to float:right to keep things aligned */
+/* If you do not want this, set $last-column to true */
+$last-column: false
+
+/* If you have a single column inside a row and want it centered, set this to true */
+$center: false
+
+/* Control how many columns you offset by switching this into a number. */
+$offset: false
+
+/* You can use source ordering with this mixin too, just set this to a number. */
+$push: false
+
+/* You can use source ordering with this mixin too, just set this to a number. */
+$pull: false
+
+/* If you have a collapsed row, you need to set the columns to collapse as well. */
+$collapse: false
+
+/* By default, we include float: left. */
+/* To help control this, we made it an option. Set this to false to not include those styles. */
+$float: left
+', :css %>
+
+<%= code_example '
+#masthead { @include grid-row; @include panel;
+  & > hgroup { @include grid-column(4); }
+  & > section { @include grid-column(8); }
+}', :css %>
+
+        <header id="masthead">
+          <hgroup>
+            <h2>Title</h2>
+          </hgroup>
+          <section>
+            <p>Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+          </section>
+        </header>
+
+        <hr>
+
+        <h5>Default SCSS Variables</h5>
+<%= code_example '
+$row-width:     emCalc(1000px) !default;
+$column-gutter: emCalc(30px) !default;
+$total-columns: 12 !default;
+', :css %>
+
+        <hr>
+
+        <h4>Get Advanced With Media Query Changes</h4>
+        <p>We kept media queries out of the code for our grid mixins. This will enable you to include the mixins inside of whatever breakpoint you'd like, putting you in complete control. If you want to create 10 breakpoints and shift the layout around between each one, by all means. If you want to use only the default breakpoints, <a href="../sass.html">we've got variables for that</a>.</p>
+
+      </div>
+    </div>
+  </div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+</div>