compass-inuit 4.1.0 → 4.1.1

data/stylesheets/partials/generic/_mixins.scss

@@ -0,0 +1,31 @@
+/*------------------------------------*\
+    $MIXINS
+\*------------------------------------*/
+/**
+ * Create a fully formed type style (sizing and vertical rhythm) by passing in a
+ * single value, e.g.:
+ *
+   `@include font-size(10);`
+ *
+ * Thanks to @redclov3r for the `line-height` Sass:
+ * twitter.com/redclov3r/status/250301539321798657
+ */
+@mixin font-size($font-size){
+    font-size:$font-size +px;
+    font-size:$font-size / $base-font-size +rem;
+    line-height:ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
+}
+
+/**
+ * Create vendor-prefixed CSS in one go, e.g.
+ *
+   `@include vendor(box-sizing, border-box);`
+ *
+ */
+@mixin vendor($property, $value){
+    -webkit-#{$property}:$value;
+       -moz-#{$property}:$value;
+        -ms-#{$property}:$value;
+         -o-#{$property}:$value;
+            #{$property}:$value;
+}

data/stylesheets/partials/generic/_reset.scss

@@ -0,0 +1,75 @@
+/*------------------------------------*\
+    $RESET
+\*------------------------------------*/
+/**
+ * A more considered reset; more of a restart... 
+ * As per: csswizardry.com/2011/10/reset-restarted
+ */
+body,
+h1,h2,h3,h4,h5,h6,
+p,blockquote,pre,
+dl,dd,ol,ul,
+form,fieldset,legend,
+table,th,td,caption,
+figure,
+hr{
+    margin:0;
+    padding:0;
+}
+article,aside,details,figcaption,figure,footer,
+header,hgroup,menu,nav,section{
+    display:block;
+}
+table{
+    border-collapse:collapse;
+    border-spacing:0;
+}
+strong,b,mark{
+    font-weight:bold;
+    font-style:inherit;
+}
+em,i,cite,q,address,dfn,var{
+    font-style:italic;
+    font-weight:inherit;
+}
+abbr[title],dfn[title]{
+    cursor:help;
+    border-bottom:1px dotted;
+}
+ins{
+    border-bottom:1px solid;
+}
+a,u,ins{
+    text-decoration:none;
+}
+del,s{
+    text-decoration:line-through;
+}
+img{
+    border:none;
+    font-style:italic;
+}
+input,
+select,option,optgroup,
+textarea{
+    font:inherit;
+}
+
+/**
+ * Give form elements some cursor interactions...
+ */
+label,
+input,
+textarea,
+button,
+select,
+option{
+    cursor:pointer;
+}
+    .text-input:active,
+    .text-input:focus,
+    textarea:active,
+    textarea:focus{
+        cursor:text;
+        outline:none;
+    }

data/stylesheets/partials/generic/_shared.scss

@@ -0,0 +1,50 @@
+/*------------------------------------*\
+    $SHARED
+\*------------------------------------*/
+/**
+ * Where `margin-bottom` is concerned, this value will be the same as the
+ * base line-height. This allows us to keep a consistent vertical rhythm.
+ * As per: csswizardry.com/2012/06/single-direction-margin-declarations
+ */
+/**
+ * Base elements
+ */
+h1,h2,h3,h4,h5,h6,hgroup,
+ul,ol,dl,
+blockquote,p,address,
+table,
+fieldset,figure,
+pre,
+hr,
+/**
+ * Objects and abstractions
+ */
+.sass-margin-bottom,
+.media,
+.island,
+.islet{
+    margin-bottom:$base-spacing-unit +px;
+    margin-bottom:($base-spacing-unit / $base-font-size) +rem;
+    
+    .islet &{
+        margin-bottom:($base-spacing-unit / 2) +px;
+        margin-bottom:(($base-spacing-unit / $base-font-size) / 2) +rem;
+    }
+}
+
+/**
+ * Doubled up `margin-bottom` helper class.
+ */
+.landmark{
+    margin-bottom:2 * $base-spacing-unit +px;
+    margin-bottom:2 * $base-spacing-unit / $base-font-size +rem;
+}
+
+/**
+ * Where `margin-left` is concerned we want to try and indent certain elements
+ * by a consistent amount. Define that amount once, here.
+ */
+ul,ol,dd{
+    margin-left:2 * $base-spacing-unit +px;
+    margin-left:2 * $base-spacing-unit / $base-font-size +rem;
+}

data/stylesheets/partials/objects/_block-list.scss

@@ -0,0 +1,36 @@
+/*------------------------------------*\
+    $BLOCK-LIST
+\*------------------------------------*/
+/**
+ * Create big blocky lists of content, e.g.:
+ *
+   <ul class=block-list>
+      <li>Foo</li>
+      <li>Bar</li>
+      <li>Baz</li>
+      <li><a href=# class=block-list__link>Foo Bar Baz</a></li>
+   </ul>
+  *
+  * Extend this object in your theme stylesheet.
+ * 
+ * Demo: jsfiddle.net/inuitcss/hR57q
+ * 
+ */
+.block-list,
+    .block-list > li{
+        border:0 solid #ccc; /* Override this color in your theme stylesheet */
+    }
+.block-list{
+    list-style:none;
+    margin-left:0;
+    border-top-width:1px;
+}
+    .block-list > li{
+        border-bottom-width:1px;
+        padding:$half-spacing-unit +px;
+    }
+        .block-list__link{
+            display:block;
+            padding:$half-spacing-unit +px;
+            margin:-$half-spacing-unit +px;
+        }

data/stylesheets/partials/objects/_buttons.scss

@@ -0,0 +1,41 @@
+/*------------------------------------*\
+    $BUTTONS
+\*------------------------------------*/
+/**
+ * Basic button structural styling. Extend in your theme stylesheet.
+ * 
+ * Demo: jsfiddle.net/inuitcss/RqHcp
+ * 
+ */
+.btn{
+    font:inherit;
+    cursor:pointer;
+    border:none;
+    display:inline-block;
+    margin: 0;
+    line-height:1;
+    /**
+     * Set padding in ems so we can change the size of a button by merely
+     * altering its `font-size`.
+     */
+    padding:0.5em;
+}
+    .btn,
+    .btn:hover{
+        text-decoration:none;
+    }
+
+.btn--sml { font-size: .75em; }
+.btn--lrg { font-size:1.50em; }
+
+.btn--full{
+    display:block;
+    text-align:center;
+    /**
+     * The following is so that `.btn-full` works properly on `input`s as well
+     * as `a`s.
+     */
+    padding-right:0;
+    padding-left: 0;
+    width:100%;
+}

data/stylesheets/partials/objects/_columns.scss

@@ -0,0 +1,22 @@
+/*------------------------------------*\
+    $COLUMNS
+\*------------------------------------*/
+/**
+ * Here we can set elements in columns of text using CSS3, e.g.:
+ *
+   <p class=text-cols-2>
+ * 
+ * Demo: jsfiddle.net/inuitcss/E26Yd
+ * 
+ */
+.text-cols,
+.text-cols--2,
+.text-cols--3,
+.text-cols--4,
+.text-cols--5{
+    @include vendor(column-gap, $base-spacing-unit +px);
+}
+.text-cols--2    { @include vendor(column-count, 2); }
+.text-cols--3    { @include vendor(column-count, 3); }
+.text-cols--4    { @include vendor(column-count, 4); }
+.text-cols--5    { @include vendor(column-count, 5); }

data/stylesheets/partials/objects/_complex-link.scss

@@ -0,0 +1,28 @@
+/*------------------------------------*\
+    $COMPLEX-LINK
+\*------------------------------------*/
+/**
+ * As inspired by @necolas:
+ * github.com/necolas/suit-utils/blob/master/link.css#L18
+ * 
+ * Add hover behaviour to only slected items within links, e.g.:
+ * 
+   <a href=log-in class=complex-link>
+       <i class="s s--user"></i>
+       <span class=complex-link__target>Log in</span>
+   </a>
+ * 
+ * Demo: jsfiddle.net/inuitcss/rt9M3
+ * 
+ */
+.complex-link,
+.complex-link:hover,
+.complex-link:active,
+.complex-link:focus{
+    text-decoration:none;
+}
+    .complex-link:hover .complex-link__target,
+    .complex-link:active .complex-link__target,
+    .complex-link:focus .complex-link__target{
+        text-decoration:underline;
+    }

data/stylesheets/partials/objects/_flexbox.scss

@@ -0,0 +1,39 @@
+/*------------------------------------*\
+    $FLEXBOX
+\*------------------------------------*/
+/**
+ * Until we can utilise flexbox natively we can kinda, sorta, attempt to emulate
+ * it, in a way... e.g.:
+ * 
+   <header class=flexbox>
+       
+       <div class=flexbox__item>
+           <b>Welcome to</b>
+       </div>
+       
+       <div class=flexbox__item>
+           <img src="//csswizardry.com/inuitcss/img/logo.jpg" alt="inuit.css">
+       </div>
+   
+   </header>
+ * 
+ * We can also combine our grid system classes with `.flexbox__item` classes,
+ * e.g.:
+ * 
+   <div class=flexbox>
+       <div class="flexbox__item  one-quarter">
+       </div>
+       <div class="flexbox__item  three-quarters">
+       </div>
+   </div>
+ * 
+ * It’s pretty poorly named I’m afraid, but it works…
+ */
+.flexbox{
+    display:table;
+    width:100%;
+}
+    .flexbox__item{
+        display:table-cell;
+        vertical-align:middle;
+    }

data/stylesheets/partials/objects/_flyout.scss

@@ -0,0 +1,57 @@
+/*------------------------------------*\
+    $FLYOUT
+\*------------------------------------*/
+/**
+ * Flyouts are pieces of content that fly out of a parent when said parent is
+ * hovered. They typically appear bottom-left of the parent.
+ *
+   <div class=flyout>
+       Foo
+       <div class=flyout__content>
+           <h1>Lorem</h1>
+           <p>Ipsum</p>
+       </div>
+   </div>
+ *
+ * Extend these objects in your theme stylesheet.
+ * 
+ * Demo: jsfiddle.net/inuitcss/B52HG
+ * 
+ */
+.flyout,
+.flyout--alt{
+    position:relative;
+    overflow:hidden;
+}
+    .flyout__content{
+        /**
+         * Position the flyouts off-screen. This is typically better than
+         * `display:none;`.
+         */
+        position:absolute;
+        top:100%;
+        left:-99999px;
+    }
+    
+    /**
+     * Bring the flyouts into view when you hover their parents.
+     * Two different types of flyout; ‘regular’ (`.flyout`) and ‘alternative’
+     * (`.flyout--alt`).
+     */
+    .flyout:hover,
+    .flyout--alt:hover{
+        overflow:visible;
+    }
+    /**
+     * Regular flyouts sit all the way from the top, flush left.
+     */
+    .flyout:hover > .flyout__content{
+        left:0;
+    }
+    /**
+     * Alternative flyouts sit all the way from the left, flush top.
+     */
+    .flyout--alt:hover > .flyout__content{
+        top:0;
+        left:100%;
+    }

data/stylesheets/partials/objects/_grids.scss

@@ -0,0 +1,154 @@
+/*------------------------------------*\
+    $GRIDS
+\*------------------------------------*/
+/**
+ * Fluid and nestable grid system, e.g.:
+ *
+   <div class=gw>
+       
+       <div class="g one-third">
+           <p>One third grid</p>
+       </div>
+       
+       <div class="g two-thirds">
+           <p>Two thirds grid</p>
+       </div>
+       
+       <div class="g one-half">
+           <p>One half grid</p>
+       </div>
+       
+       <div class="g one-quarter">
+           <p>One quarter grid</p>
+       </div>
+       
+       <div class="g one-quarter">
+           <p>One quarter grid</p>
+       </div>
+       
+   </div>
+ * 
+ * Demo: jsfiddle.net/inuitcss/CLYUC
+ * 
+ */
+/**
+ * Grid wrapper
+ * 
+ * Shorthand and verbose
+ */
+.gw,
+.grid-wrapper{
+    /**
+     * Negative margin to negate the padding on the first grid child. 
+     */
+    margin-left:-($base-spacing-unit) +px;
+    /**
+     * The following declarations allow us to use the `.gw` class on lists.
+     */
+    list-style:none;
+    margin-bottom:0;
+    @extend .cf;
+}
+    /**
+     * Very infrequently occuring grid wrappers as children of grid wrappers.
+     */
+    .gw > .gw,
+    .grid-wrapper > .grid-wrapper{
+        margin-left:0;
+    }
+    
+    /**
+     * Grid
+     * 
+     * Shorthand and verbose
+     */
+    .g,
+    .grid{
+        float:left;
+        padding-left:$base-spacing-unit +px;
+        @include vendor(box-sizing, border-box);
+    }
+    
+    /**
+     * Grid sizes in human readable format.
+     */
+
+    /**
+     * Whole
+     */
+    .one-whole          { width:100%; }
+
+    /**
+     * Halves
+     */
+    .one-half           { width:50%; }
+
+    /**
+     * Thirds
+     */
+    .one-third          { width:33.333%; }
+    .two-thirds         { width:66.666%; }
+
+    /**
+     * Quarters
+     */
+      .one-quarter      { width:25%; }
+      .two-quarters     { @extend .one-half; }
+    .three-quarters     { width:75%; }
+
+    /**
+     * Fifths
+     */
+      .one-fifth        { width:20%; }
+      .two-fifths       { width:40%; }
+    .three-fifths       { width:60%; }
+     .four-fifths       { width:80%; }
+
+    /**
+     * Sixths
+     */
+      .one-sixth        { width:16.666%; }
+      .two-sixths       { @extend .one-third; }
+    .three-sixths       { @extend .one-half; }
+     .four-sixths       { @extend .two-thirds; }
+     .five-sixths       { width:83.333%; }
+
+    /**
+     * Eighths
+     */
+      .one-eighth       { width:12.5%; }
+      .two-eighths      { @extend .one-quarter; }
+    .three-eighths      { width:37.5%; }
+     .four-eighths      { @extend .one-half; }
+     .five-eighths      { width:62.5%; }
+      .six-eighths      { @extend .three-quarters; }
+    .seven-eighths      { width:87.5%; }
+
+    /**
+     * Tenths
+     */
+      .one-tenth        { width:10%; }
+      .two-tenths       { @extend .one-fifth; }
+    .three-tenths       { width:30%; }
+     .four-tenths       { @extend .one-fifth; }
+     .five-tenths       { @extend .one-half; }
+      .six-tenths       { @extend .three-fifths; }
+    .seven-tenths       { width:70%; }
+    .eight-tenths       { @extend .four-fifths; }
+     .nine-tenths       { width:90%; }
+
+
+    /**
+     * Twelfths
+     */
+       .one-twelfth     { width:8.333%; }
+       .two-twelfths    { @extend .one-sixth; }
+     .three-twelfths    { @extend .one-quarter; }
+      .four-twelfths    { @extend .one-third; }
+      .five-twelfths    { width:41.666% }
+       .six-twelfths    { @extend .one-half; }
+     .seven-twelfths    { width:58.333%; }
+     .eight-twelfths    { @extend .two-thirds; }
+      .nine-twelfths    { @extend .three-quarters; }
+       .ten-twelfths    { @extend .five-sixths; }
+    .eleven-twelfths    { width:91.666%; }