compass-inuit 4.1.1 → 4.1.5

data/stylesheets/partials/objects/_matrix.scss

@@ -3,49 +3,54 @@
 \*------------------------------------*/
 /**
  * Create a grid of items out of a single list, e.g.:
- *
-   <ul class="matrix three-cols">
+ * 
+   <ul class="matrix  three-cols">
        <li class=all-cols>Lorem</li>
        <li>Ipsum <a href=#>dolor</a></li>
        <li><a href=# class=matrix__link>Sit</a></li>
        <li>Amet</li>
        <li class=all-cols>Consectetuer</li>
    </ul>
- *
+ * 
  * Extend this object in your theme stylesheet.
  * 
  * Demo: jsfiddle.net/inuitcss/Y2zrU
  * 
  */
-.matrix,
-    .matrix > li{
+.matrix{
+
+    &,
+    > li{
         border:0 solid #ccc; /* Override this color in your theme stylesheet */
     }
+}
 .matrix{
     list-style:none;
     margin-left:0;
     border-top-width: 1px;
     border-left-width:1px;
     @extend .cf;
-}
-    .matrix > li{
+
+     > li{
         padding:$half-spacing-unit +px;
         float:left;
         border-right-width: 1px;
         border-bottom-width:1px;
         @include vendor(box-sizing, border-box);
     }
+}
         .matrix__link{
             display:block;
             padding:$half-spacing-unit +px;
             margin:-$half-spacing-unit +px;
         }
 
+
 /**
  * The `.multi-list` object is a lot like the `.matrix` object only without the
  * blocky borders and padding.
- *
-   <ul class="multi-list four-cols">
+ * 
+   <ul class="multi-list  four-cols">
        <li>Lorem</li>
        <li>Ipsum</li>
        <li>Dolor</li>
@@ -64,6 +69,7 @@
         float:left;
     }
     
+    
     /**
      * Apply these classes alongside the `.matrix` or `.multi-list` classes on
      * lists to determine how wide their columns are.
@@ -87,4 +93,4 @@
     .matrix > .all-cols,
     .multi-list > .all-cols{
         width:100%;
-    }
+    }

data/stylesheets/partials/objects/_media.scss

@@ -5,7 +5,7 @@
  * 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,
@@ -44,6 +44,7 @@
             margin-bottom:0;
         }
     
+    
     /**
      * `.img`s in `.islet`s need an appropriately sized margin.
      */

data/stylesheets/partials/objects/_nav.scss

@@ -5,7 +5,7 @@
  * 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>
@@ -20,43 +20,125 @@
     list-style:none;
     margin-left:0;
     @extend .cf;
-}
-    .nav > li,
-        .nav > li > a{
+
+    > li{
+
+        &,
+        > a{
             display:inline-block;
            *display:inline;
             zoom:1;
         }
+    }
+}
+
 
 /**
- * `.stacked` extends `.nav` and throws the list into vertical mode, e.g.:
- *
-   <ul class="nav nav--stacked">
+ * `.nav--stacked` extends `.nav` and throws the list into vertical mode, e.g.:
+ * 
+   <ul class="nav  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 > li{
+.nav--stacked{
+    
+    > li{
         display:list-item;
-    }
-        .nav--stacked > li > a{
+
+        > a{
             display:block;
         }
+    }
+}
+
 
 /**
- * `.banner-nav` extends `.nav` and centres the list, e.g.:
- *
-   <ul class="nav nav--banner">
+ * `.nav--banner` extends `.nav` and centres the list, e.g.:
+ * 
+   <ul class="nav  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{
     text-align:center;
-}
+}
+
+
+/**
+ * Give nav links a big, blocky hit area. Extends `.nav` and needs whitespace
+ * caused by `inline-block` elements collapsing e.g.:
+ * 
+   <ul class="nav  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{
+    line-height:1;
+    
+    > li{
+        
+        > a{
+            padding:$half-spacing-unit +px;
+        }
+    }
+}
+
+
+/**
+ * Force a nav to occupy 100% of the available width of its parent. Extends
+ * `.nav`, e.g.:
+ * 
+   <ul class="nav  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{
+    display:table;
+    width:100%;
+        
+    > li{
+        display:table-cell;
+        
+        > a{
+            display:block;
+        }
+    }
+}
+
+
+/**
+ * Make a list of keywords. Extends `.nav`, e.g.:
+ * 
+   `<ul class="nav  nav--keywords>`
+ * 
+ */
+.nav--keywords{
+    
+    > li{
+        
+        &:after{
+            content:", ";
+        }
+         
+        &:last-child:after{
+            display:none;
+        }
+    }
+}

data/stylesheets/partials/objects/_options.scss

@@ -0,0 +1,39 @@
+/*------------------------------------*\
+    $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 #ccc; /* Extend in your theme stylesheet */
+            border-width:1px;
+            border-left-width:0;
+        }
+
+        &:first-child > a{
+            border-left-width:1px;
+            border-radius:$brand-round +px 0 0 $brand-round +px;
+        }
+
+        &:last-child > a{
+            border-radius:0 $brand-round +px $brand-round +px 0;
+        }
+    }
+}

data/stylesheets/partials/objects/_pagination.scss

@@ -6,7 +6,7 @@
  * Requires some funky commenting to collapse any white-space caused by the
  * `display:inline-block;` rules.
  * 
-   <ol class="nav pagination">
+   <ol class="nav  pagination">
        <li class=pagination__first>First</li><!--
     --><li class=pagination__prev>Previous</li><!--
     --><li><a href=/page/1>1</a></li><!--

data/stylesheets/partials/objects/_rules.scss

@@ -0,0 +1,61 @@
+/*------------------------------------*\
+    $RULES
+\*------------------------------------*/
+/**
+ * Horizontal rules, extend `hr`.
+ * 
+ * Demo: jsfiddle.net/inuitcss/L6GuZ
+ * 
+ */
+.rule{
+    color:#ccc; /* Sets border color, extend in your theme stylesheet. */
+    border:none;
+    border-bottom-width:1px;
+    border-bottom-style:solid;
+    margin-bottom:($base-spacing-unit - 1) +px;                                  
+    margin-bottom:($base-spacing-unit - 1) / $base-font-size +rem;
+}
+
+
+/**
+ * Dotted rules
+ */
+.rule--dotted{
+    border-bottom-style:dotted;
+}
+
+
+/**
+ * Dashed rules
+ */
+.rule--dashed{
+    border-bottom-style:dashed;
+}
+
+
+/**
+ * Ornamental rules. Places a § over the rule.
+ */
+.rule--ornament{
+    position:relative;
+
+    &:after{
+        content:"§";
+        position:absolute;
+        top:   0;
+        right: 0;
+        left:  0;
+        line-height:0;
+        text-align:center;
+    }
+
+    /**
+    * Pass in an arbitrary ornament though a data attribute, e.g.:
+    * 
+      <hr class="rule  rule--ornament" data-ornament="!">
+    * 
+    */
+    &[data-ornament]:after{
+        content:attr(data-ornament);
+    }
+}

data/stylesheets/partials/objects/_split.scss

@@ -4,7 +4,7 @@
 /**
  * Simple split item for creating two elements floated away from one another,
  * e.g.:
- *
+ * 
    <dl class=split>       
        <dt class=split__title>Burger and fries</dt>
        <dd>&pound;5.99</dd>       
@@ -14,7 +14,7 @@
        <dd>&pound;2.99</dd>       
    </dl>
  * 
-   <ol class="split results">
+   <ol class="split  results">
        <li class=first><b class=split__title>1st place</b> Bob</li>       
        <li class=second><b class=split__title>2nd place</b> Lilly</li>       
        <li class=third><b class=split__title>3rd place</b> Ted</li>       

data/stylesheets/partials/objects/_sprite.scss

@@ -4,21 +4,24 @@
 /**
  * Giving an element a class of `.s` will throw it into ‘sprite’ mode and apply
  * a background image e.g.:
- *
-   <a class="s s--question-mark">More info&hellip;</a>
- *
+ * 
+   <a class="s  s--question-mark">More info&hellip;</a>
+ * 
  * or
- *
-   <a href=#><i class="s s--question-mark"></i> Help and FAQ</a>
+ * 
+   <a href=#><i class="s  s--question-mark"></i> Help and FAQ</a>
  * 
  * Giving an element a class of `.i` will throw it into ‘icon’ mode and will
- * not add a background, but should be used for icon fonts, e.g.:
+ * not add a background, but should be used for icon fonts and is populated
+ * through a `data-char` attribute and the `:after` pseudo-element, e.g.:
  * 
-   <a href=# class="i i--star">Add to favorites</a>
+   <a href=# class=i data-char="C">Add to favorites</a>
  * 
  * or
  * 
-   <a href=#><i class="i i--star"></i> View your favourites</a>
+   <a href=#><i class=i data-char="C"></i> View your favourites</a>
+ * 
+ * Where ‘C’ might map to a star in your particular font.
  * 
  * These all require extension in your theme stylesheet.
  * 
@@ -48,15 +51,27 @@
     background-image:url(/path/to/your/sprite.png);
     vertical-align:middle;
     top:-1px;
-    
-    /**
-     * Kellum Method image replacement:
-     * zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement
+
+    /*
+     * H5BP method image replacement:
+     * github.com/h5bp/html5-boilerplate/commit/adecc5da035d6d76b77e3fa95c6abde841073da2
      */
-    text-indent:100%;
-    white-space:nowrap;
     overflow:hidden;
+   *text-indent:-9999px;
+
+    &:before{
+        content:"";
+        display:block;
+        width:0;
+        height:100%;
+    }
 }
+
+
 .i{
     vertical-align:top;
-}
+    
+    &:after{
+        content:attr(data-char);
+    }
+}

data/stylesheets/partials/objects/_stats.scss

@@ -0,0 +1,45 @@
+ /*------------------------------------*\
+     $STATS
+ \*------------------------------------*/
+ /**
+  * Simple object to display key–value statistic-like information, e.g.: 
+  *
+    <div class=stat-group>
+        <dl class=stat>
+            <dt class=stat__title>Tweets</dt>
+            <dd class=stat__value>27,740</dd>
+        </dl>
+        
+        <dl class=stat>
+            <dt class=stat__title>Following</dt>
+            <dd class=stat__value>11,529</dd>
+        </dl>
+        
+        <dl class=stat>
+            <dt class=stat__title>Followers</dt>
+            <dd class=stat__value>12,105</dd>
+        </dl>
+    </div>
+  *
+  * Demo: jsfiddle.net/inuitcss/Bpwu6
+  *
+  */
+ .stat-group{
+    @extend .cf;
+    margin-left:-$base-spacing-unit +px;
+}
+    .stat{
+        float:left;
+        margin-left:$base-spacing-unit +px;
+        display:-webkit-box;
+        display:   -moz-box;
+        display:        box;
+        @include vendor(box-orient, vertical);
+    }
+        .stat__title{
+            @include vendor(box-ordinal-group, 2);
+        }
+        .stat__value{
+            margin-left:0;
+            @include vendor(box-ordinal-group, 1);
+        }