fishnet 1.0.1

data/app/assets/stylesheets/general/_mesh-guide.sass

@@ -0,0 +1,139 @@
+
+$fn-box-bg-color: #ff80ff !default
+$fn-box-color: #666 !default
+$fn-box-height: 30px !default
+$fn-box-margin-bottom: $gutter-width !default
+$fn-box-border: 0 solid transparent !default
+
+.fn-box
+  background-color: $fn-box-bg-color
+  border: $fn-box-border
+  overflow: hidden
+  color: $fn-box-color
+  font-weight: bold
+  line-height: $fn-box-height
+  text-align: center
+  margin-bottom: $fn-box-margin-bottom
+  height: $fn-box-height
+  &.alt
+    background-color: lighten($fn-box-bg-color, 10%)
+
+.nested-outer
+  +column(6)
+  +clearfixer
+  background-color: $fn-box-bg-color
+  border: $fn-box-border
+  height: $fn-box-height * 2
+
+.nested-inner-pull,
+.nested-inner-push
+  background-color: lighten($fn-box-bg-color, 10%)
+  border: 1px solid blue
+  height: $fn-box-height
+  margin-top: $fn-box-height * 0.5
+  color: $fn-box-color
+  font-weight: bold
+  line-height: $fn-box-height
+  text-align: center
+
+.nested-inner-pull
+  +column-pull(3,6)
+  &:after
+    content: "nested pulled"
+.nested-inner-push
+  +column-push(3,6)
+  &:after
+    content: "nested pushed"
+
+@mixin mesh-message($value, $prefix:"", $postfix:"")
+  &:after
+    content: "#{$prefix}#{$value}#{$postfix}"
+
+// ### Typical Columns
+@mixin add-guide-column-classes($columns:$columns)
+  @for $i from 1 through $columns
+    .fn-col-#{$i}
+      @extend .fn-box
+      +column($i, $columns)
+      +mesh-message($i, "col-")
+
+@mixin add-guide-column-pull-classes($columns:$columns, $resize:true)
+  @for $i from 1 through $columns
+    .fn-col-pull-#{$i}
+      @extend .fn-box
+      +column-pull($i, $columns, $resize)
+      +mesh-message($i, "col-pull-")
+
+@mixin add-guide-column-push-classes($columns:$columns, $resize:true)
+  @for $i from 1 through $columns
+    .fn-col-push-#{$i}
+      @extend .fn-box
+      +column-push($i, $columns, $resize)
+      +mesh-message($i, "col-push-")
+
+@mixin add-guide-column-full-classes($columns:$columns)
+  @for $i from 1 through $columns
+    .fn-col-full-#{$i}
+      @extend .fn-box
+      +column-full($i, $columns)
+      +mesh-message($i, "col-full-")
+
+
+// ### Offset Columns
+
+@mixin add-guide-column-offset-left-classes($columns:$columns)
+  @for $i from 1 through $columns
+    .fn-col-offset-left-#{$i}
+      @extend .fn-box
+      +column-offset-left($i, $columns - $i, $columns)
+      +mesh-message($i, "left ", "x#{$columns - $i}" )
+
+@mixin add-guide-column-offset-left-pull-classes($columns:$columns, $resize:true)
+  @for $i from 1 through $columns
+    .fn-col-offset-left-pull-#{$i}
+      @extend .fn-box
+      +column-offset-left-pull($i, $columns - $i, $columns, $resize)
+      +mesh-message($i, "left pull ", "x#{$columns - $i}" )
+
+@mixin add-guide-column-offset-left-push-classes($columns:$columns, $resize:true)
+  @for $i from 1 through $columns
+    .fn-col-offset-left-push-#{$i}
+      @extend .fn-box
+      +column-offset-left-push($i, $columns - $i, $columns, $resize)
+      +mesh-message($i, "left push ", "x#{$columns - $i}" )
+
+@mixin add-guide-column-offset-left-full-classes($columns:$columns)
+  @for $i from 1 through $columns
+    .fn-col-offset-left-full-#{$i}
+      @extend .fn-box
+      +column-offset-left-full($i, $columns - $i, $columns)
+      +mesh-message($i, "left full ", "x#{$columns - $i}" )
+
+@mixin add-guide-column-offset-right-classes($columns:$columns)
+  @for $i from 1 through $columns
+    .fn-col-offset-right-#{$i}
+      @extend .fn-box
+      +column-offset-right($i, $columns - $i, $columns)
+      +mesh-message($i, "right ", "x#{$columns - $i}" )
+
+@mixin add-guide-column-offset-right-pull-classes($columns:$columns, $resize:true)
+  @for $i from 1 through $columns
+    .fn-col-offset-right-pull-#{$i}
+      @extend .fn-box
+      +column-offset-right-pull($i, $columns - $i, $columns, $resize)
+      +mesh-message($i, "right pull ", "x#{$columns - $i}" )
+
+@mixin add-guide-column-offset-right-push-classes($columns:$columns, $resize:true)
+  @for $i from 1 through $columns
+    .fn-col-offset-right-push-#{$i}
+      @extend .fn-box
+      +column-offset-right-push($i, $columns - $i, $columns, $resize)
+      +mesh-message($i, "right push ", "x#{$columns - $i}" )
+
+@mixin add-guide-column-offset-right-full-classes($columns:$columns)
+  @for $i from 1 through $columns
+    .fn-col-offset-right-full-#{$i}
+      @extend .fn-box
+      +column-offset-right-full($i, $columns - $i, $columns)
+      +mesh-message($i, "right full ", "x#{$columns - $i}" )
+

data/app/assets/stylesheets/general/_notifications.sass

@@ -0,0 +1,36 @@
+
+// Fills a background color and darkens the border based off a percentage
+@mixin background-darken-border($color, $percentage:20%)
+  background-color: $color
+  border: 1px solid darken($color, $percentage)
+
+// Base notification used for @extends
+.base-notification
+  -webkit-border-radius: $radii
+  -moz-border-radius: $radii
+  border-radius: $radii
+  +background-darken-border($standard)
+  position: relative
+  padding: 0.75em
+  margin: 1em 0
+  a
+    text-decoration: underline
+
+// Main notification message
+.notification
+  @extend .base-notification
+  text-shadow: $text_drop_lite
+  &.info, &.notice
+    +background-darken-border(lighten($grey9, 20%))
+  &.important
+    +background-darken-border(lighten($blue, 40%))
+    color: $blue
+  &.success
+    +background-darken-border(lighten($green, 40%))
+    color: $green
+  &.warning
+    +background-darken-border(lighten($yellow, 30%))
+    color: darken($yellow, 15%)
+  &.danger
+    +background-darken-border(lighten($red, 40%))
+    color: $red

data/app/assets/stylesheets/general/_tables.sass

@@ -0,0 +1,101 @@
+
+// Tables
+table
+  margin: 0.5em 0
+  width: 100%
+
+  caption
+    font-size: 0.85em
+    font-weight: bold
+    text-align: left
+    margin-bottom: .5em
+
+  th, td
+    border-top: 1px solid $greyC
+    line-height: 1
+    text-align: left
+    padding: 0.6em
+
+  th
+    font-weight: bold
+    vertical-align: bottom
+
+  thead:first-child tr th,
+  thead:first-child tr td
+    border-top: 0
+
+  tbody td > a:hover
+    text-decoration: underline
+
+  tfoot
+    font-size: 0.85em
+
+  tbody + tbody
+    border-top: 2px solid $greyC
+
+  th .ascending .caret
+    margin-top: 6px
+  th .descending .caret
+    margin-top: 2px
+
+  th .ascending:hover .caret,
+  th .unsorted:hover .caret-north-south:after
+    border-top-color: $blue
+
+  th .descending:hover .caret,
+  th .unsorted:hover .caret-north-south
+    border-bottom-color: $blue
+
+// Outer box
+table.box
+  thead tr
+    border: 1px solid $greyC
+  tbody tr
+    border: 1px solid $greyC
+  tfoot tr
+    border: 1px solid $greyC
+
+  thead th
+    &:first-child
+      border-left-color: $greyC !important
+    &:last-child
+      border-right-color: $greyC !important
+  tbody td
+    &:first-child
+      border-left-color: $greyC !important
+    &:last-child
+      border-right-color: $greyC !important
+
+// Vertical borders
+table.vborder
+  thead th
+    border-left: 1px solid $greyC
+    border-right: 1px solid $greyC
+    &:first-child
+      border-left-color: transparent
+    &:last-child
+      border-right-color: transparent
+
+  tbody td
+    border-left: 1px solid $greyC
+    border-right: 1px solid $greyC
+    &:first-child
+      border-left-color: transparent
+    &:last-child
+      border-right-color: transparent
+
+// Banded table
+table.banded tbody tr
+  &:nth-child(odd), &.odd
+    background-color: transparent
+  &:nth-child(even), &.even
+    background-color: $greyE
+
+// Colorize the table header background
+table.thead-decorate thead
+  background-color: darken($greyE, 5%)
+
+// Colorize the table footer background
+table.tfoot-decorate tfoot
+  background-color: $off_white
+

data/app/assets/stylesheets/general/_wells.sass

@@ -0,0 +1,14 @@
+
+.well
+  -webkit-border-radius: $radii
+  -moz-border-radius: $radii
+  border-radius: $radii
+  border: 1px solid $greyC
+  background-color: transparent
+  margin-bottom: 1.25em
+  padding: 1.25em
+  &.lite
+    background-color: $off_white
+  &.dark
+    background-color: $off_grey
+

data/app/views/layouts/pages.html.haml

@@ -0,0 +1,31 @@
+
+!!! 5
+%html{:lang => "en"}
+  %head
+    %title Fishnet
+    %meta(content="IE=edge,chrome=1" http-equiv="X-UA-Compatible")
+    %meta(content="text/html; charset=UTF-8" http-equiv="Content-Type")
+    %meta(name="description" content="Grid system based on the semantic.gs")
+    %meta(name="author" content="Matthew Kitt")
+    %meta(name="imagetoolbar" content="no")
+    %meta(name="viewport" content="width=device-width, initial-scale=1.0")
+    %meta(name="apple-touch-fullscreen" content="YES")
+    %meta(name="apple-mobile-web-app-capable" content="YES")
+    %meta(name="apple-mobile-web-app-status-bar-style" content="black")
+
+    <!--[if lt IE 9]>
+    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    %link(href="/assets/fishnet_styleguide.css" rel="stylesheet" type="text/css")
+
+  %body(role="document")
+    %section.page-info.fixed
+      %span#page_dimensions Dimensions
+
+    %section.container(role="main" aria-live="polite" aria-atomic="true")
+      = yield
+
+    %script(src="/assets/prettify.js" type="text/javascript" charset="utf-8")
+    %script(src="/assets/fishnet_styleguide.js" type="text/javascript" charset="utf-8")
+

data/app/views/pages/index.html.haml

@@ -0,0 +1,479 @@
+
+:ruby
+  @num_columns = 12
+
+%section.well.lite
+  %h1 Fishnet
+
+  %p A simple grid framework based on the <a href="http://semantic.gs/">semantic grid system</a>, built in <a href="http://sass-lang.com/">sass</a> and tuned to work with both fluid and fixed layouts.
+  %br
+  %p Fishnet follows the philosophy that your html markup should be as semantic as possible, while maintaining the flexibility and order of a grid system. With <a href="http://sass-lang.com/">sass</a> (and other preprocessors), it's trivial to inject a grid system directly into an element styles. Fishnet provides a common interface for maintaining the structure and consistency provided by a grid, while maintaining logical sematic elements within the markup.
+  %br
+  %p Fishnet builds upon <a href="http://semantic.gs/">semantic.gs</a> by providing additional column type mixins and exposing functions in order to cover every pixel available on the screen. The core components of fishnet will not insert any classes or other elements into your stylesheets (<em><a href="#helpers">unless you tell it to</a></em>). It's all based on variables, functions, and mixins. This allows an application to use grid elements when needed and get out of the way when they're not.
+
+.section
+  %h2.section-heading Install
+  %p(style="color:#ff00ff;") <em>Needs to be completed</em>
+
+.section
+  %h2.section-heading Variables, Functions, Mixins
+  %h3.section-subheading Variables <span><code>fishnet/_settings.sass</code></span>
+  %p Fishnet requires a few base variables to perform calculations for generating the grid system. The grid system comes with a set of a default values, but these can be easily overriden in an application. Define the variables below <strong>prior</strong> to mixing in any of the column settings within a layout.
+  %table.box.vborder.banded.thead-decorate
+    %thead
+      %tr
+        %th Variable
+        %th Default
+        %th Usage
+    %tbody
+      %tr
+        %td <code>$column-width</code>
+        %td <code>60px</code>
+        %td The width of an individual column
+      %tr
+        %td <code>$gutter-width</code>
+        %td <code>20px</code>
+        %td The total gutter spacing between a column
+      %tr
+        %td <code>$columns</code>
+        %td <code>12</code>
+        %td The number of columns that make up a row
+      %tr
+        %td <code>$total-width</code>
+        %td <code>100%</code>
+        %td The total width of a row
+  .notification.important
+    %p <strong>Note!</strong> In a fixed width grid system, set <code>$total-width</code> to the max width of your grid in pixels
+  .notification.important
+    %p <strong>Pro Tip!</strong> Use the <code>+grid-settings</code> mixin for one lining the structure of a grid (useful for redefining a grid within <code>@media</code> queries)
+
+  %pre.prettyprint
+    = preserve do
+      :escaped
+        @media (min-width: 1200px)
+          // $total-width, $columns, $column-width, $gutter-width
+          +grid-settings(100%, 12, 74px, 8px)
+
+  -# Mixins
+  %h3.section-subheading Mixins <span><code>fishnet/_mixins.sass</code></span>
+  %p Fishnet's mixins are the core public interface to be used within an application. They provide various type of columns to be injected into an elements style. Checkout the <a href="#structure_examples">structure examples</a> below for a more visual description.
+  %table.box.vborder.banded.thead-decorate
+    %thead
+      %tr
+        %th Mixin
+        %th Parameters
+        %th Usage
+    %tbody
+      %tr
+        %td <code>+column</code>
+        %td <code>$x, $columns:$columns</code>
+        %td Standard column with left and right margins equal to the <code>$gutter-width</code>
+      %tr
+        %td <code>+column-pull</code>
+        %td <code>$x, $columns:$columns, $resize:true</code>
+        %td Pulled left column with <code>margin-left:0</code>, adds <code>$gutter-width / 2</code> to overall width
+      %tr
+        %td <code>+column-push</code>
+        %td <code>$x, $columns:$columns, $resize:true</code>
+        %td Pushed right column with <code>margin-right:0</code>, adds <code>$gutter-width / 2</code> to overall width
+      %tr
+        %td <code>+column-full</code>
+        %td <code>$x, $columns:$columns</code>
+        %td Pulled &amp; pushed column with outside margins set to 0, adds <code>$gutter-width</code> to overall width
+      %tr
+        %td <code>+column-offset-left</code>
+        %td <code>$x, $offset:0, $columns:$columns</code>
+        %td Draws a standard column, offset left by number of columns
+      %tr
+        %td <code>+column-offset-left-pull</code>
+        %td <code>$x, $offset:0, $columns:$columns, $resize:true</code>
+        %td Draws a pulled column, offset left by number of columns, with an adjusted width
+      %tr
+        %td <code>+column-offset-left-push</code>
+        %td <code>$x, $offset:0, $columns:$columns, $resize:true</code>
+        %td Draws a pushed column, offset left by number of columns, with an adjusted width
+      %tr
+        %td <code>+column-offset-left-full</code>
+        %td <code>$x, $offset:0, $columns:$columns</code>
+        %td Pulled &amp; pushed column, offset left by number of columns, with an adjusted width
+      %tr
+        %td <code>+column-offset-right</code>
+        %td <code>$x, $offset:0, $columns:$columns</code>
+        %td Draws a standard column, offset right by number of columns
+      %tr
+        %td <code>+column-offset-right-pull</code>
+        %td <code>$x, $offset:0, $columns:$columns, $resize:true</code>
+        %td Draws a pulled column, offset right by number of columns, with an adjusted width
+      %tr
+        %td <code>+column-offset-right-push</code>
+        %td <code>$x, $offset:0, $columns:$columns, $resize:true</code>
+        %td Draws a pushed column, offset right by number of columns, with an adjusted width
+      %tr
+        %td <code>+column-offset-right-full</code>
+        %td <code>$x, $offset:0, $columns:$columns</code>
+        %td Pulled &amp; pushed column, offset right by number of columns, with an adjusted width
+  .notification.important
+    %p <strong>Note!</strong> The <code>$columns</code> parameter is used for nested grids (<a href="#nested">see below</a>), by default columns will use the global setting from the <code>$columns</code> variable
+  .notification.important
+    %p <strong>Note!</strong> Where there is a <code>$resize</code> parameter for pull/push columns, passing false will not resize the column
+  .notification.important
+    %p <strong>Note!</strong> The <code>$offset</code> parameter relates to the number of columns to offset by: <code>+column-offset-left(8,4)</code>
+
+  -# Functions
+  %h3.section-subheading Functions <span><code>fishnet/_functions.sass</code></span>
+  %p The fishnet functions are the basis for generating column mixins. These functions can also be used on elements inside columns or anywhere else within an application where it's needed to set the width of an element in relation to a column mixin.
+  %table.box.vborder.banded.thead-decorate
+    %thead
+      %tr
+        %th Function
+        %th Parameters
+        %th Usage
+    %tbody
+      %tr
+        %td <code>column_width</code>
+        %td <code>$x, $columns:$columns</code>
+        %td Returns the <code>width</code> of a <strong>standard</strong> column within the grid system
+      %tr
+        %td <code>column_pull_width</code>
+        %td <code>$x, $columns:$columns</code>
+        %td Returns the <code>width</code> of a <strong>pull</strong> column within the grid system
+      %tr
+        %td <code>column_push_width</code>
+        %td <code>$x, $columns:$columns</code>
+        %td Returns the <code>width</code> of a <strong>push</strong> column within the grid system
+      %tr
+        %td <code>column_full_width</code>
+        %td <code>$x, $columns:$columns</code>
+        %td Returns the <code>width</code> of a <strong>full</strong> column within the grid system
+      %tr
+        %td <code>column_offset_width</code>
+        %td <code>$offset:0</code>
+        %td Returns the <code>width</code> of the <strong>offset</strong> within offset columns
+      %tr
+        %td <code>gutter_space</code>
+        %td <code>$offset:0</code>
+        %td Returns the <code>width</code> of <strong>spacing</strong> between columns
+  .notification.important
+    %p <strong>Note!</strong> There are 3 undocumented utility helper functions within <code>fishnet/_functions.sass</code>. These are used internally, but can be useful in creating other types of columns.
+  .notification.important
+    %p <strong>Pro Tip!</strong> To get the width of a push/pull column that doesn't resize, call the <code>column_width</code> function
+
+
+.section
+  %h2.section-heading Usage
+  %p To apply the various column classes, first define your grid layout, then mixin the desired column types into an element. Below is an example layout for a page.
+  %pre.prettyprint
+    = preserve do
+      :escaped
+        // Define grid setting variables
+        $column-width: 74px
+        $gutter-width: 8px
+        $columns: 12
+        $total-width: 100%
+
+  %pre.prettyprint.pre-column.sass
+    = preserve do
+      :escaped
+        // SASS
+        .container
+          +clearfixer
+          max-width: 1200px
+          margin: 0 auto
+
+        .masthead
+          +column-full(12)
+
+        .gallery
+          +column(12)
+
+        .promo.recent
+          +column-pull(6)
+
+        .promo.ancient
+          +column-push(6)
+
+        .article
+          +column(6)
+
+        .aside
+          +column-offset-left(4,2)
+
+        // Create a faux row for nested columns
+        .footer
+          +column-full(12)
+          +clearfixer
+
+        .footer-nav
+          +column-pull(8)
+
+        .social-nav
+          +column-offset-left-full(3,1)
+
+        .copy
+          +column-offset-right-full(4,2)
+
+        .terms
+          +column-offset-left-full(4,2)
+  %pre.prettyprint.pre-column.markup
+    = preserve do
+      :escaped
+        <!-- Markup -->
+        <section class="container">
+          <section class="masthead">
+            ...
+          </section>
+
+          <section class="gallery">
+            ...
+          </section>
+
+          <section class="promo recent">
+            ...
+          </section>
+          <section class="promo ancient">
+            ...
+          </section>
+
+          <article class="article">
+            ...
+          </article>
+          <aside class="aside">
+            ...
+          </aside>
+
+          <footer class="footer">
+            <nav class="footer-nav">
+              ...
+            </nav>
+            <nav class="social-nav">
+              ...
+            </nav>
+
+            <section class="copy">
+              ...
+            </section>
+            <section class="terms">
+              ...
+            </section>
+          </footer>
+        </section>
+
+  %p
+    %a#example_toggler(href="#") View the example from the code above
+  #the_example.collapse
+    %section.masthead
+      %code +column-full(12)
+
+    %section.gallery
+      %code +column(12)
+
+    %section.promo.recent
+      %code +column-pull(6)
+
+    %section.promo.ancient
+      %code +column-push(6)
+
+    %article.article
+      %code +column(6)
+
+    %aside.aside
+      %code +column-offset-left(4,2)
+
+    %footer.footer
+      %nav.footer-nav
+        %code +column-pull(8)
+      %nav.social-nav
+        %code +column-offset-left-full(3,1)
+      %section.copy
+        %code +column-offset-right-full(4,2)
+      %section.terms
+        %code +column-offset-left-full(4,2)
+
+.section#helpers
+  %h2.section-heading Helpers
+  %h3.section-subheading Mesh <span><code>fishnet/_mesh.sass</code></span>
+  %p We sort of lied to you. Sometimes it's pretty useful to generate non-semantic classes for building a grid system. Fishnet provides some helper mixins for creating these non-semantic column classes. Use these sparingly, as they can quickly create a lot of classes in your compiled CSS.
+  %table.box.vborder.banded.thead-decorate
+    %thead
+      %tr
+        %th Mixin
+        %th Parameters
+        %th Usage
+    %tbody
+      %tr
+        %td <code>+add-column-classes</code>
+        %td <code>$name:"col", $columns:$columns</code>
+        %td <code>1..$columns</code> &mdash; <strong>standard</strong> column classes for name (<code>.col-<em>n</em></code>)
+      %tr
+        %td <code>+add-column-pull-classes</code>
+        %td <code>$name:"col-pull", $columns:$columns, $resize:true</code>
+        %td <code>1..$columns</code> &mdash; <strong>pull</strong> column classes for name (<code>.col-pull-<em>n</em></code>)
+      %tr
+        %td <code>+add-column-push-classes</code>
+        %td <code>$name:"col-push", $columns:$columns, $resize:true</code>
+        %td <code>1..$columns</code> &mdash; <strong>push</strong> column classes for name (<code>.col-push-<em>n</em></code>)
+      %tr
+        %td <code>+add-column-full-classes</code>
+        %td <code>$name:"col-full", $columns:$columns</code>
+        %td <code>1..$columns</code> &mdash; <strong>full</strong> column classes for name (<code>.col-full-<em>n</em></code>)
+      %tr
+        %td <code>+add-column-offset-left-classes</code>
+        %td <code>$name:"col-offset-left", $columns:$columns</code>
+        %td <code>1..$columns</code> &mdash; <strong>offset left</strong> column classes for name (<code>.col-offset-left-<em>n</em></code>)
+      %tr
+        %td <code>+add-column-offset-left-pull-classes</code>
+        %td <code>$name:"col-offset-left-pull", $columns:$columns, $resize:true</code>
+        %td <code>1..$columns</code> &mdash; <strong>offset left pull</strong> column classes for name (<code>.col-offset-left-pull-<em>n</em></code>)
+      %tr
+        %td <code>+add-column-offset-left-push-classes</code>
+        %td <code>$name:"col-offset-left-push", $columns:$columns, $resize:true</code>
+        %td <code>1..$columns</code> &mdash; <strong>offset left push</strong> column classes for name (<code>.col-offset-left-push-<em>n</em></code>)
+      %tr
+        %td <code>+add-column-offset-left-full-classes</code>
+        %td <code>$name:"col-offset-left-full", $columns:$columns</code>
+        %td <code>1..$columns</code> &mdash; <strong>offset left full</strong> column classes for name (<code>.col-offset-left-full-<em>n</em></code>)
+      %tr
+        %td <code>+add-column-offset-right-classes</code>
+        %td <code>$name:"col-offset-right", $columns:$columns</code>
+        %td <code>1..$columns</code> &mdash; <strong>offset right</strong> column classes for name (<code>.col-offset-right-<em>n</em></code>)
+      %tr
+        %td <code>+add-column-offset-right-pull-classes</code>
+        %td <code>$name:"col-offset-right-pull", $columns:$columns, $resize:true</code>
+        %td <code>1..$columns</code> &mdash; <strong>offset right pull</strong> column classes for name (<code>.col-offset-right-pull-<em>n</em></code>)
+      %tr
+        %td <code>+add-column-offset-right-push-classes</code>
+        %td <code>$name:"col-offset-right-push", $columns:$columns, $resize:true</code>
+        %td <code>1..$columns</code> &mdash; <strong>offset right push</strong> column classes for name (<code>.col-offset-right-push-<em>n</em></code>)
+      %tr
+        %td <code>+add-column-offset-right-full-classes</code>
+        %td <code>$name:"col-offset-right-full", $columns:$columns</code>
+        %td <code>1..$columns</code> &mdash; <strong>offset right full</strong> column classes for name (<code>.col-offset-right-full-<em>n</em></code>)
+
+  .notification.important
+    %p <strong>Note!</strong> Whatever name is passed will always generate a number for the postfix, so if passing <code>"c"</code> for the <code>$name</code> parameter, the output will be <code>.c-<em>n</em></code> as the output
+  .notification.warning
+    %p <strong>Heads Up!</strong> By default this module is not included and needs to be imported: <code>@import fishnet/mesh</code>
+  .notification.danger
+    %p <strong>Danger!</strong> If only using the typical column classes (<code>standard</code>, <code>push</code>, <code>pull</code>, <code>full</code>) generating these with 12 columns, would equate to 48 classes!
+
+.section
+  %h2.section-heading#structure_examples Example Structures
+  %p The following structures showcase the various mixins applied to simple boxes
+  %p
+    %a#structure_toggler(href="#") View all column structures
+
+  %section#the_structures.collapse
+    %h3 Standard columns
+    %p Usage: <code>+column(n)</code>
+    .sub-section
+      - (1..@num_columns).to_a.reverse.each do |i|
+        ! #{"<div class='fn-col-#{i}'></div>"}
+        - if @num_columns - i > 0
+          ! #{"<div class='fn-col-#{@num_columns - i}'></div>"}
+
+    %h3 Push/Pull columns
+    %p Usage: <code>+column-push(n)</code> and <code>+column-pull(n)</code>
+    .sub-section
+      - (1..@num_columns).to_a.reverse.each do |i|
+        ! #{"<div class='fn-col-pull-#{i}'></div>"}
+        - if @num_columns - i > 0
+          ! #{"<div class='fn-col-push-#{@num_columns - i} alt'></div>"}
+        - else
+          ! #{"<div class='fn-col-push-#{@num_columns} alt'></div>"}
+
+    %h3 Full columns
+    %p Usage: <code>+column-full(n)</code>
+    .sub-section
+      - (1..@num_columns).to_a.reverse.each do |i|
+        ! #{"<div class='fn-col-full-#{i}'></div>"}
+        - if @num_columns - i > 0
+          ! #{"<div class='fn-col-full-#{@num_columns - i} alt'></div>"}
+
+    %h3 Offset columns left
+    %p Usage: <code>+column-offset-left(n, by)</code>
+    .sub-section
+      - (1..@num_columns - 1).to_a.reverse.each do |i|
+        ! #{"<div class='fn-col-offset-left-#{i}'></div>"}
+
+    %h3 Offset columns left pull
+    %p Usage: <code>+column-offset-left-pull(n, by)</code>
+    .sub-section
+      - (1..@num_columns - 1).to_a.reverse.each do |i|
+        ! #{"<div class='fn-col-offset-left-pull-#{i}'></div>"}
+
+    %h3 Offset columns left push
+    %p Usage: <code>+column-offset-left-push(n, by)</code>
+    .sub-section
+      - (1..@num_columns - 1).to_a.reverse.each do |i|
+        ! #{"<div class='fn-col-offset-left-push-#{i}'></div>"}
+
+    %h3 Offset columns left full
+    %p Usage: <code>+column-offset-left-full(n, by)</code>
+    .sub-section
+      - (1..@num_columns - 1).to_a.reverse.each do |i|
+        ! #{"<div class='fn-col-offset-left-full-#{i}'></div>"}
+
+    %h3 Offset columns right
+    %p Usage: <code>+column-offset-right(n, by)</code>
+    .sub-section
+      - (1..@num_columns - 1).to_a.reverse.each do |i|
+        ! #{"<div class='fn-col-offset-right-#{i}'></div>"}
+
+    %h3 Offset columns right pull
+    %p Usage: <code>+column-offset-right-pull(n, by)</code>
+    .sub-section
+      - (1..@num_columns - 1).to_a.reverse.each do |i|
+        ! #{"<div class='fn-col-offset-right-pull-#{i}'></div>"}
+
+    %h3 Offset columns right push
+    %p Usage: <code>+column-offset-right-push(n, by)</code>
+    .sub-section
+      - (1..@num_columns - 1).to_a.reverse.each do |i|
+        ! #{"<div class='fn-col-offset-right-push-#{i}'></div>"}
+
+    %h3 Offset columns right full
+    %p Usage: <code>+column-offset-right-full(n, by)</code>
+    .sub-section
+      - (1..@num_columns - 1).to_a.reverse.each do |i|
+        ! #{"<div class='fn-col-offset-right-full-#{i}'></div>"}
+
+    %h3#nested Nested columns
+    %p Fishnet supports nested columns for all column types, but doesn't provide the concept of rows. To nest columns just roll a usual column and include a <code>micro clearfix</code> in what would be the row. Your nested columns need to pass the number of columns occupied by the row.
+    .sub-section
+      .nested-outer
+        .nested-inner-pull
+        .nested-inner-push
+      .nested-outer
+        .nested-inner-pull
+        .nested-inner-push
+
+    %pre.prettyprint
+      = preserve do
+        :escaped
+          // SASS
+          .nested-outer
+            +column(6)
+            +clearfixer
+          .nested-inner
+            +column(3,6)
+
+    %pre.prettyprint
+      = preserve do
+        :escaped
+          <!-- Markup -->
+          <section class="nested-outer">
+            <article class="nested-inner">...</article>
+            <article class="nested-inner">...</article>
+          </section>
+
+.section
+  %h2.section-heading Resources
+  .well
+    %p &raquo; <a href="http://semantic.gs/">Semantic Grid System</a>
+    %p &raquo; <a href="http://sass-lang.com/">SASS</a>
+    %p &raquo; <a href="https://github.com/modeset/fishnet">Fishnet on Github</a>
+    %p &raquo; <a href="https://github.com/modeset/underoos">Underoos</a>
+
+  %p(style="margin-bottom:1em;")
+    %small Created by <a href="http://www.modeset.com/">Mode Set</a> / <a href="https://raw.github.com/modeset/fishnet/master/LICENSE">MIT Licensed</a>
+