inuit_rails 0.0.2

data/vendor/assets/stylesheets/objects/_media.scss

@@ -0,0 +1,60 @@
+@if $use-media == true{
+
+/*------------------------------------*\
+    $MEDIA
+\*------------------------------------*/
+/**
+ * Place any image- and text-like content side-by-side, as per:
+ * stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
+ * E.g.:
+ *
+   <div class=media>
+       <img src=http://placekitten.com/200/300 alt="" class=media__img>
+       <p class=media__body>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+       sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+   </div>
+ *
+ * Demo: jsfiddle.net/inuitcss/cf4Qs
+ *
+ */
+.media{
+    display:block;
+    @extend .cf;
+}
+    .media__img{
+        float:left;
+        margin-right:$base-spacing-unit;
+    }
+    /**
+     * Reversed image location (right instead of left).
+     */
+    .media__img--rev{
+        float:right;
+        margin-left:$base-spacing-unit;
+    }
+
+        .media__img img,
+        .media__img--rev img{
+            display:block;
+        }
+
+    .media__body{
+        overflow:hidden;
+    }
+        .media__body,
+        .media__body > :last-child{
+            margin-bottom:0;
+        }
+
+
+    /**
+     * `.img`s in `.islet`s need an appropriately sized margin.
+     */
+    .islet .media__img{
+        margin-right:$half-spacing-unit;
+    }
+    .islet .media__img--rev{
+        margin-left:$half-spacing-unit;
+    }
+
+}//endif

data/vendor/assets/stylesheets/objects/_nav.scss

@@ -0,0 +1,155 @@
+@if $use-nav == true or $use-options == true or $use-pagination == true or $use-breadcrumb == true{
+
+/*------------------------------------*\
+    $NAV
+\*------------------------------------*/
+/**
+ * Nav abstraction as per: csswizardry.com/2011/09/the-nav-abstraction
+ * When used on an `ol` or `ul`, this class throws the list into horizontal mode
+ * e.g.:
+ *
+   <ul class=nav>
+       <li><a href=#>Home</a></li>
+       <li><a href=#>About</a></li>
+       <li><a href=#>Portfolio</a></li>
+       <li><a href=#>Contact</a></li>
+   </ul>
+ *
+ * Demo: jsfiddle.net/inuitcss/Vnph4
+ *
+ */
+.nav{
+    list-style:none;
+    margin-left:0;
+    @extend .cf;
+
+    > li{
+
+        &,
+        > a{
+            @extend %inline_block_fix;
+        }
+    }
+}
+
+
+/**
+ * `.nav--stacked` extends `.nav` and throws the list into vertical mode, e.g.:
+ *
+   <ul class="nav--stacked">
+       <li><a href=#>Home</a></li>
+       <li><a href=#>About</a></li>
+       <li><a href=#>Portfolio</a></li>
+       <li><a href=#>Contact</a></li>
+   </ul>
+ *
+ */
+.nav--stacked{
+    @extend .nav;
+
+    > li{
+        display:list-item;
+
+        > a{
+            // make link clickable in whole line
+            display:block;
+        }
+    }
+}
+
+
+/**
+ * `.nav--banner` extends `.nav` and centres the list, e.g.:
+ *
+   <ul class="nav--banner">
+       <li><a href=#>Home</a></li>
+       <li><a href=#>About</a></li>
+       <li><a href=#>Portfolio</a></li>
+       <li><a href=#>Contact</a></li>
+   </ul>
+
+ *
+ */
+.nav--banner{
+    @extend .nav;
+    text-align:center;
+}
+
+
+/**
+ * Give nav links a big, blocky hit area. Extends `.nav`, e.g.:
+ *
+   <ul class="nav--block">
+       <li><a href=#>Home</a></li>
+       <li><a href=#>About</a></li>
+       <li><a href=#>Portfolio</a></li>
+       <li><a href=#>Contact</a></li>
+   </ul>
+ *
+ */
+.nav--block{
+    @extend .nav;
+    line-height:1;
+    @extend %remove_inline_block_whitespace;
+    white-space:nowrap;
+
+    > li{
+        @extend %recover_whitespace;
+
+        > a{
+            padding:$half-spacing-unit;
+        }
+    }
+}
+
+
+/**
+ * Force a nav to occupy 100% of the available width of its parent. Extends
+ * `.nav`, e.g.:
+ *
+   <ul class="nav--fit">
+       <li><a href=#>Home</a></li>
+       <li><a href=#>About</a></li>
+       <li><a href=#>Portfolio</a></li>
+       <li><a href=#>Contact</a></li>
+   </ul>
+ *
+ * Thanks to @pimpl for this idea!
+ */
+.nav--fit{
+    @extend .nav;
+    display:table;
+    width:100%;
+
+    > li{
+        display:table-cell;
+
+        > a{
+            display:block;
+        }
+    }
+}
+
+
+/**
+ * Make a list of keywords. Extends `.nav`, e.g.:
+ *
+   `<ul class="nav--keywords>`
+ *
+ */
+.nav--keywords{
+    @extend .nav;
+
+    > li{
+
+        &:after{
+            content:"\002C" "\00A0";
+        }
+
+        &:last-child:after{
+            display:none;
+        }
+    }
+}
+
+}//endif

data/vendor/assets/stylesheets/objects/_nav__breadcrumb.scss

@@ -0,0 +1,67 @@
+@if $use-breadcrumb == true{
+
+/*------------------------------------*\
+    $BREADCRUMB
+\*------------------------------------*/
+/**
+ * Simple breadcrumb styling to apply to (ordered) lists. Extends `.nav`, e.g.:
+ *
+   <ol class="breadcrumb">
+       <li><a href=#>Home</a></li>
+       <li><a href=#>About</a></li>
+       <li><a href=#>The Board</a></li>
+       <li class=current><a href=#>Directors</a></li>
+   </ol>
+ *
+ * Demo: jsfiddle.net/inuitcss/rkAY9
+ *
+ */
+ .breadcrumb, .breadcrumb--path{
+    @extend .nav;
+ }
+
+.breadcrumb > li + li:before{
+    content:"\00BB" "\00A0";
+}
+
+
+/**
+ * For denoting a path-like structure, GitHub style, e.g.:
+ *
+   <ol class="breadcrumb--path">
+       <li class=breadcrumb__root><a href=#>inuit.css</a></li>
+       <li><a href=#>inuit.css</a></li>
+       <li><a href=#>partials</a></li>
+       <li class=current><a href=#>objects</a></li>
+   </ol>
+ *
+ */
+.breadcrumb--path > li + li:before{
+    content:"\002F" "\00A0";
+}
+
+
+/**
+ * Assign a delimiter on the fly through a data attribute, e.g.:
+ *
+   <ol class="breadcrumb">
+       <li><a href=#>Home</a></li>
+       <li data-breadcrumb="|"><a href=#>About</a></li>
+       <li data-breadcrumb="|"><a href=#>The Board</a></li>
+       <li data-breadcrumb="|" class=current><a href=#>Directors</a></li>
+   </ol>
+ *
+ */
+.breadcrumb > li + li[data-breadcrumb]:before{
+    content:attr(data-breadcrumb) "\00A0";
+}
+
+
+/**
+ * Denote the root of the tree.
+ */
+.breadcrumb__root{
+    font-weight:bold;
+}
+
+}//endif

data/vendor/assets/stylesheets/objects/_nav__options.scss

@@ -0,0 +1,45 @@
+@if $use-options == true{
+
+/*------------------------------------*\
+    $OPTIONS
+\*------------------------------------*/
+/**
+ * Link-group nav, used for displaying related options. Extends `.nav--block`
+ * but could also extend `.nav--fit`. Extend with colours and ‘current states’
+ * in your theme stylesheet.
+ *
+  <ul class="nav  options">
+      <li><a></a></li>
+      <li><a></a></li>
+      <li><a></a></li>
+      <li><a></a></li>
+   </ul>
+ *
+ * Demo: jsfiddle.net/inuitcss/vwfaf
+ *
+ */
+.options{
+    @extend .nav--block;
+
+    > li{
+
+        > a{
+            border:0 solid $base-ui-color;
+            border-width:1px;
+            border-left-width:0;
+        }
+
+        &:first-child > a{
+            border-left-width:1px;
+            border-top-left-radius:$brand-round;
+            border-bottom-left-radius:$brand-round;
+        }
+
+        &:last-child > a{
+            border-top-right-radius:$brand-round;
+            border-bottom-right-radius:$brand-round;
+        }
+    }
+}
+
+}//endif

data/vendor/assets/stylesheets/objects/_nav__pagination.scss

@@ -0,0 +1,53 @@
+@if $use-pagination == true{
+
+/*------------------------------------*\
+    $PAGINATION
+\*------------------------------------*/
+/**
+ * Basic pagination object, extends `.nav`.
+ * Requires some funky commenting to collapse any white-space caused by the
+ * `display:inline-block;` rules.
+ *
+   <ol class="pagination">
+       <li class=pagination__first>First</li>
+       <li class=pagination__prev>Previous</li>
+       <li><a href=/page/1>1</a></li>
+       <li><a href=/page/2>2</a></li>
+       <li class=current><a href=/page/3>3</a></li>
+       <li><a href=/page/4>4</a></li>
+       <li><a href=/page/5>5</a></li>
+       <li class=pagination__next><a href=/page/next>Next</a></li>
+       <li class=pagination__last><a href=/page/last>Last</a></li>
+   </ol>
+ *
+ * Demo: jsfiddle.net/inuitcss/9Y6PU
+ *
+ */
+.pagination{
+    @extend .nav;
+    text-align:center;
+    @extend %remove_inline_block_whitespace;
+}
+    .pagination > li{
+        @extend %recover_whitespace;
+
+        padding:$base-spacing-unit / 2;
+    }
+        .pagination > li > a{
+            padding:$base-spacing-unit / 2;
+            margin:-$base-spacing-unit / 2;
+        }
+            .pagination__next a:after{
+                content:"\00A0" "\203A";
+            }
+            .pagination__prev a:before{
+                content:"\2039" "\00A0";
+            }
+            .pagination__first a:before{
+                content:"\00AB" "\00A0";
+            }
+            .pagination__last a:after{
+                content:"\00A0" "\00BB";
+            }
+
+}//endif

data/vendor/assets/stylesheets/objects/_rules.scss

@@ -0,0 +1,63 @@
+@if $use-rules == true{
+
+/*------------------------------------*\
+    $RULES
+\*------------------------------------*/
+/**
+ * Horizontal rules, extend `hr`.
+ *
+ * Demo: jsfiddle.net/inuitcss/L6GuZ
+ *
+ */
+.rule{
+    color:$base-ui-color;
+    border:none;
+    border-bottom-width:1px;
+    border-bottom-style:solid;
+}
+
+
+/**
+ * Dotted rules
+ */
+.rule--dotted{
+    border-bottom-style:dotted;
+}
+
+
+/**
+ * Dashed rules
+ */
+.rule--dashed{
+    border-bottom-style:dashed;
+}
+
+
+/**
+ * specific rules. Places a § over the rule.
+ */
+.rule--specific{
+    position:relative;
+
+    &:after{
+        content:"\00A7";
+        position:absolute;
+        top:   0;
+        right: 0;
+        left:  0;
+        line-height:0;
+        text-align:center;
+    }
+
+    /**
+    * Pass in an arbitrary specific character though a data attribute, e.g.:
+    *
+      <hr class="rule  rule--ornament" data-specific="!">
+    *
+    */
+    &[data-specific]:after{
+        content:attr(data-specific);
+    }
+}
+
+}//endif