compass-inuit 4.1.0 → 4.1.1

data/stylesheets/partials/objects/_icon-text.scss

@@ -0,0 +1,36 @@
+/*------------------------------------*\
+    $ICON-TEXT
+\*------------------------------------*/
+/**
+ * For text-links etc that have an icon with them. Sometimes whitespace would
+ * suffice in creating a gap between the icon and text, for example:
+ *
+   <a href=#>
+       <i class="s s--help"></i> Help &amp; support
+   </a>
+ *
+ * However we will sometimes want a larger, explicity set gap:
+   <a href=# class=icon-text>
+       <i class="icon-text__icon s s--help"></i>Help &amp; support
+   </a>
+ *
+ * 
+ * Demo: jsfiddle.net/inuitcss/Q6Lbf
+ * 
+ */
+.icon-text > .icon-text__icon{
+    margin-right:8px;
+}
+
+/**
+ * We can also reverse the direction of the margin for icons that appear to the
+ * right of the text content, thus:
+ *
+   <a href=# class=icon-text--rev>
+       Help &amp; support<i class="icon-text__icon s s--help"></i>
+   </a>
+ *
+ */
+.icon-text--rev > .icon-text__icon{
+    margin-left:8px;
+}

data/stylesheets/partials/objects/_island.scss

@@ -0,0 +1,33 @@
+/*------------------------------------*\
+    $ISLAND
+\*------------------------------------*/
+/**
+ * Simple, boxed off content, as per: csswizardry.com/2011/10/the-island-object
+ * E.g.:
+ *
+   <div class=island>
+       I am boxed off.
+   </div>
+ * 
+ * Demo: jsfiddle.net/inuitcss/u8pV3
+ * 
+ */
+.island,
+.islet{
+    display:block;
+    @extend .cf;
+}
+.island{
+    padding:$base-spacing-unit +px;
+}
+    .island > :last-child,
+    .islet > :last-child{
+        margin-bottom:0;
+    }
+
+/**
+ * Just like `.island`, only smaller.
+ */
+.islet{
+    padding:$half-spacing-unit +px;
+}

data/stylesheets/partials/objects/_lozenges.scss

@@ -0,0 +1,35 @@
+/*------------------------------------*\
+    $LOZENGES
+\*------------------------------------*/
+/**
+ * Create pill-like runs of text, e.g.:
+ *
+   <p>This <span class=loz>here</span> is a lozenge!</p>
+ *
+   <h1>This <span class=loz>here</span> is also a lozenge!</h1>
+ * 
+ * Demo: jsfiddle.net/inuitcss/N3pGm
+ *
+ */
+.loz{
+    display:inline-block;
+    /**
+     * These numbers set in ems mean that, at its narrowest, a lozenge will be
+     * the same width as the 1.5 `line-height` set on the `html` element.
+     * This allows us to use the `.loz` in any `font-size` we wish.
+     */
+    min-width:    1.00em;
+    padding-right:0.25em;
+    padding-left: 0.25em;
+              /* =1.50em */
+    text-align:center;
+    background-color:#ccc; /* Override this color in your theme stylesheet */
+    color:#fff; /* Override this color in your theme stylesheet */
+    
+    /**
+     * Normally we’d use border-radius:100%; but instead here we just use an
+     * overly large number; `border-radius:100%;` would create an oval on
+     * non-square elements whereas we just want to round the ends of an element.
+     */
+    @include vendor(border-radius, 100px);
+}

data/stylesheets/partials/objects/_matrix.scss

@@ -0,0 +1,90 @@
+/*------------------------------------*\
+    $MATRIX
+\*------------------------------------*/
+/**
+ * Create a grid of items out of a single list, e.g.:
+ *
+   <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{
+        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{
+        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">
+       <li>Lorem</li>
+       <li>Ipsum</li>
+       <li>Dolor</li>
+       <li>Sit</li>
+   </ul>
+ * 
+ * Demo: jsfiddle.net/inuitcss/Y2zrU
+ * 
+ */
+.multi-list{
+    list-style:none;
+    margin-left:0;
+    @extend .cf;
+}
+    .multi-list > li{
+        float:left;
+    }
+    
+    /**
+     * Apply these classes alongside the `.matrix` or `.multi-list` classes on
+     * lists to determine how wide their columns are.
+     */
+    .two-cols > li{
+        width:50%;
+    }
+    .three-cols > li{
+        width:33.333%;
+    }
+    .four-cols > li{
+        width:25%;
+    }
+    .five-cols > li{
+        width:20%;
+    }
+    /**
+     * Unfortunately we have to qualify this selector in order to bring its
+     * specificity above the `.[number]-cols > li` selectors above.
+     */
+    .matrix > .all-cols,
+    .multi-list > .all-cols{
+        width:100%;
+    }

data/stylesheets/partials/objects/_media.scss

@@ -0,0 +1,55 @@
+/*------------------------------------*\
+    $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 +px;
+    }
+    /**
+     * Reversed image location (right instead of left).
+     */
+    .media__img--rev{
+        float:right;
+        margin-left:$base-spacing-unit +px;
+    }
+    
+        .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 +px;
+    }
+    .islet .media__img--rev{
+        margin-left:$half-spacing-unit +px;
+    }

data/stylesheets/partials/objects/_nav.scss

@@ -0,0 +1,62 @@
+/*------------------------------------*\
+    $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;
+}
+    .nav > li,
+        .nav > 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">
+       <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{
+        display:list-item;
+    }
+        .nav--stacked > li > a{
+            display:block;
+        }
+
+/**
+ * `.banner-nav` 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;
+}

data/stylesheets/partials/objects/_pagination.scss

@@ -0,0 +1,39 @@
+/*------------------------------------*\
+    $PAGINATION
+\*------------------------------------*/
+/**
+ * Basic pagination object, extends `.nav`.
+ * Requires some funky commenting to collapse any white-space caused by the
+ * `display:inline-block;` rules.
+ * 
+   <ol class="nav 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{
+    text-align:center;
+}
+    .pagination > li{
+        padding:($base-spacing-unit / 2) +px;
+    }
+        .pagination > li > a{
+            padding:($base-spacing-unit / 2) +px;
+            margin:-($base-spacing-unit / 2) +px;
+        }    
+            .pagination__first a:before{
+                content:"« ";
+            }
+            .pagination__last a:after{
+                content:" »";
+            }

data/stylesheets/partials/objects/_split.scss

@@ -0,0 +1,35 @@
+/*------------------------------------*\
+    $SPLIT
+\*------------------------------------*/
+/**
+ * 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>       
+       <dt class=split__title>Fillet steak</dt>
+       <dd>&pound;19.99</dd>       
+       <dt class=split__title>Ice cream</dt>
+       <dd>&pound;2.99</dd>       
+   </dl>
+ * 
+   <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>       
+   </ol>​
+ * 
+ * Demo: jsfiddle.net/inuitcss/9gZW7
+ * 
+ */
+.split{
+    text-align:right;
+    list-style:none;
+    margin-left:0;
+}
+    .split__title{
+        text-align:left;
+        float:left;
+        clear:left;
+    }

data/stylesheets/partials/objects/_sprite.scss

@@ -0,0 +1,62 @@
+/*------------------------------------*\
+    $SPRITE
+\*------------------------------------*/
+/**
+ * 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>
+ *
+ * or
+ *
+   <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.:
+ * 
+   <a href=# class="i i--star">Add to favorites</a>
+ * 
+ * or
+ * 
+   <a href=#><i class="i i--star"></i> View your favourites</a>
+ * 
+ * These all require extension in your theme stylesheet.
+ * 
+ * Demo: jsfiddle.net/inuitcss/6TKuS
+ * 
+ */
+.s,
+.i{
+    display:inline-block;
+    /**
+     * The typical size of most icons. Override in your theme stylesheet.
+     */
+    width: 16px;
+    height:16px;
+    position:relative;
+    zoom:1;
+    /**
+     * So using `.i` on `i` elements doesn’t make a visual difference.
+     */
+    font-style:normal;
+    /**
+     * So icons added using `.i` sit in the centre of the element.
+     */
+    text-align:center;
+}
+.s{
+    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
+     */
+    text-indent:100%;
+    white-space:nowrap;
+    overflow:hidden;
+}
+.i{
+    vertical-align:top;
+}