compass-inuit 4.1.1 → 4.1.5

data/README.md

@@ -53,19 +53,9 @@ If you use and/or like inuit.css, perhaps you might consider [supporting it
 through Gumroad](http://gum.co/nOoht).
 
 ## Credits
+Based on **[Harry Roberts's](http://github.com/csswizardry)** inuit.css framework.
 
-inuit.css, although produced and maintained by one developer, could not have
-been possible without inspiration and work from an array of other people.
-
-* **[Nicole Sullivan](https://twitter.com/stubbornella)** for her work on OOCSS
-* **[Jonathan Snook](https://twitter.com/snookca)** for his work on SMACSS
-* **[Nicolas Gallagher](https://twitter.com/necolas)** for his work on various
-  CSS things
-* **[Bryan James](https://twitter.com/WengersToyBus)** for the inuit.css logo
-
-And probably more…
-
-This Compass extension was created by **[Stephen Way](https://twitter.com/stephencway)**
+This extension was created by **[Stephen Way](http://github.com/stephenway)**
 
 **inuit.css is the most powerful little framework out there, and it’s ready to
 go!**

data/stylesheets/partials/_base.scss

@@ -1,14 +1,14 @@
 /**
  * Base styles; unclassed HTML elements etc.
  */
-@import "partials/base/main";
-@import "partials/base/headings";
-@import "partials/base/paragraphs";
-@import "partials/base/smallprint";
-@import "partials/base/quotes";
 @import "partials/base/code";
-@import "partials/base/links";
+@import "partials/base/forms";
+@import "partials/base/headings";
 @import "partials/base/images";
+@import "partials/base/links";
 @import "partials/base/lists";
-@import "partials/base/tables";
-@import "partials/base/forms";
+@import "partials/base/main";
+@import "partials/base/paragraphs";
+@import "partials/base/quotes";
+@import "partials/base/smallprint";
+@import "partials/base/tables";

data/stylesheets/partials/_generic.scss

@@ -1,13 +1,13 @@
 /**
  * Generic utility styles etc.
  */
+@import "partials/generic/brand";
+@import "partials/generic/clearfix";
+@import "partials/generic/debug";
+@import "partials/generic/helper";
 @import "partials/generic/mixins";
+@import "partials/generic/pull";
+@import "partials/generic/push";
 @import "partials/generic/reset";
-@import "partials/generic/clearfix";
 @import "partials/generic/shared";
-
-/**
- * Style trumps; helper and brand classes
- */
-@import "partials/generic/brand";
-@import "partials/generic/helper";
+@import "partials/generic/widths";

data/stylesheets/partials/_objects.scss

@@ -1,20 +1,26 @@
 /**
  * Objects and abstractions
  */
-@import "partials/objects/grids";
-@import "partials/objects/flexbox";
+@import "partials/objects/block-list";
+@import "partials/objects/breadcrumb";
+@import "partials/objects/buttons";
 @import "partials/objects/columns";
-@import "partials/objects/nav";
-@import "partials/objects/pagination";
-@import "partials/objects/media";
+@import "partials/objects/complex-link";
+@import "partials/objects/flexbox";
+@import "partials/objects/flyout";
+@import "partials/objects/greybox";
+@import "partials/objects/grids-ie7";
+@import "partials/objects/grids";
+@import "partials/objects/icon-text";
 @import "partials/objects/island";
-@import "partials/objects/block-list";
+@import "partials/objects/lozenges";
 @import "partials/objects/matrix";
+@import "partials/objects/media";
+@import "partials/objects/nav";
+@import "partials/objects/options";
+@import "partials/objects/pagination";
+@import "partials/objects/rules";
 @import "partials/objects/split";
-@import "partials/objects/this-or-this";
-@import "partials/objects/complex-link";
-@import "partials/objects/flyout";
 @import "partials/objects/sprite";
-@import "partials/objects/icon-text";
-@import "partials/objects/buttons";
-@import "partials/objects/lozenges";
+@import "partials/objects/stats";
+@import "partials/objects/this-or-this";

data/stylesheets/partials/base/_code.scss

@@ -16,11 +16,12 @@ pre{
         color:inherit;
     }
 
+
 /**
  * Add comments to your code examples, e.g.:
- *
+ * 
    <code>&lt;/div&gt;<span class=code-comment>&lt;!-- /wrapper --&gt;</span></code>
- *
+ * 
  */
 .code-comment{
     /**
@@ -30,9 +31,11 @@ pre{
     filter:alpha(opacity=75);
 }
 
+
 /**
  * You can add line numbers to your code examples but be warned, it requires
- * some pretty funky looking markup, e.g.:
+ * some pretty funky looking (and technically invalid) markup, e.g.:
+ * 
    <pre class=numbered>
        <ol class=numbered__numbers>
            <li><code>.nav{</code></li>
@@ -46,7 +49,8 @@ pre{
            <li><code>            zoom:1;</code></li>
            <li><code>        }</code></li>
        </ol>
-   </pre>​
+   </pre>
+ * 
  */
 .numbered{
     white-space:nowrap;

data/stylesheets/partials/base/_forms.scss

@@ -1,10 +1,16 @@
 /*------------------------------------*\
     $FORMS
 \*------------------------------------*/
+/**
+ * 
+ * Demo: jsfiddle.net/inuitcss/MhHHU
+ * 
+ */
 fieldset{
     padding:$base-spacing-unit +px;
 }
 
+
 /**
  * Text inputs
  * 
@@ -13,7 +19,7 @@ fieldset{
    <input type=text class=text-input>
    <input type=email class=text-input>
    <input type=password class=text-input>
- *
+ * 
  */
 .text-input,
 textarea{
@@ -22,8 +28,10 @@ textarea{
      */
 }
 
+
 /**
  * Group sets of form fields in a list, e.g.:
+ * 
    <ul class=form-fields>
        <li>
            <label />
@@ -38,29 +46,30 @@ textarea{
            <input />
        </li>
    </ul>
- *
+ * 
  */
 .form-fields{
     list-style:none;
     margin:0;
 }
     .form-fields > li{
-        @extend .sass-margin-bottom;
+        @extend %sass-margin-bottom;
     }
     .form-fields > li:last-child{
         margin-bottom:0;
     }
 
+
 /**
  * Labels
- *
+ * 
  * Define a `.label` class as well as a `label` element. This means we can apply
  * label-like styling to meta-labels for groups of options where a `label`
  * element is not suitable, e.g.:
- *
+ * 
    <li>
        <span class=label>Select an option below:</span>
-       <ul class="multi-list four-cols">
+       <ul class="multi-list  four-cols">
            <li>
                <input /> <label />
            </li>
@@ -75,7 +84,7 @@ textarea{
            </li>
        </ul>
    </li>
- *
+ * 
  */
 label,
 .label{
@@ -83,18 +92,19 @@ label,
 }
     /**
      * Extra help text in `label`s, e.g.:
-     *
+     * 
        <label>Card number <small class=additional>No spaces</small></label>
-     *
+     * 
      */
     .additional{
         display:block;
         font-weight:normal;
     }
 
+
 /*
  * Groups of checkboxes and radios, e.g.:
- *
+ * 
    <li>
        <ul class=check-list>
            <li>
@@ -105,7 +115,7 @@ label,
            </li>
        </ul>
    </li>
- *
+ * 
  */
 .check-list{
     list-style:none;
@@ -120,9 +130,10 @@ label,
         display:inline-block;
     }
 
+
 /**
  * Spoken forms are for forms that read like spoken word, e.g.:
- *
+ * 
    <li class=spoken-form>
        Hello, my <label for=spoken-name>name</label> is
        <input type=text class=text-input id=spoken-name>. My home
@@ -133,9 +144,31 @@ label,
            <option>Other</option>
        </select>
    </li>
- *
+ * 
  */
 .spoken-form label{
     display:inline-block;
     font:inherit;
-}
+}
+
+
+/**
+ * Extra help text displayed after a field when that field is in focus, e.g.:
+ * 
+   <label for=email>Email:</label>
+   <input type=email class=text-input id=email> 
+   <small class=extra-help>.edu emails only</small>
+ * 
+ * We leave the help text in the document flow and merely set it to
+ * `visibility:hidden;`. This means that it won’t interfere with anything once
+ * it reappears.
+ * 
+ */
+/*small*/.extra-help{
+    display:inline-block;
+    visibility:hidden;
+}
+.text-input:active + .extra-help,
+.text-input:focus + .extra-help{
+    visibility:visible;
+}

data/stylesheets/partials/base/_headings.scss

@@ -3,7 +3,7 @@
 \*------------------------------------*/
 /**
  * As per: csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css
- *
+ * 
  * When we define a heading we also define a corresponding class to go with it.
  * This allows us to apply, say, `class=alpha` to a `h3`; a double-stranded
  * heading hierarchy.
@@ -27,6 +27,7 @@ h6,.zeta{
     @include font-size($h6-size);
 }
 
+
 /**
  * Heading groups and generic any-heading class.
  * To target any heading of any level simply apply a class of `.hN`, e.g.:
@@ -43,6 +44,7 @@ hgroup .hN{
     margin-bottom:0;
 }
 
+
 /**
  * A series of classes for setting massive type; for use in heroes, mastheads,
  * promos, etc.

data/stylesheets/partials/base/_links.scss

@@ -3,30 +3,44 @@
 \*------------------------------------*/
 /**
  * Say no to negative hovers, as per: csswizardry.com/2011/05/on-negative-hovers
+ *
+ * Sometimes, particularly on larger projects, it is useful to scope link
+ * styling only to anchors which have `href` attributes.
  */
-a{
+a:link{
     /**
      * Set colors etc in your theme stylesheet.
      */
-}
-    a:hover,
-    a:active,
-    a:focus{
+
+    &:hover,
+    &:active,
+    &:focus{
         text-decoration:underline;
     }
+    &:active{
+        outline:none;
+    }
+    /**
+     * Remove Chrome’s heavy-handed glow.
+     */
+    &:focus{
+        outline:thin dotted;
+    }
+}
+
 
 /**
  * ‘Current’ states, e.g.:
- *
+ * 
    <ul class=nav>
        <li><a href=#>Home</a></li>
        <li><a href=#>About</a></li>
        <li class=current><a href=#>Portfolio</a></li>
        <li><a href=#>Contact</a></li>
    </ul>
- *
+ * 
  */
 .current a{
     cursor:text;
     text-decoration:underline;
-}
+}

data/stylesheets/partials/base/_lists.scss

@@ -4,7 +4,9 @@
 /**
  * Remove vertical spacing from nested lists.
  */
-li > ul,
-li > ol{
-    margin-bottom:0;
+li{
+    > ul,
+    > ol{
+         margin-bottom:0;
+     }
 }

data/stylesheets/partials/base/_main.scss

@@ -2,6 +2,7 @@
     $MAIN
 \*------------------------------------*/
 html{
-    font:($base-font-size / 16 +em)/($base-line-height / $base-font-size) serif;
+    font:($base-font-size / 16 +em)/($line-height-ratio) serif;
     overflow-y:scroll;
-}
+    min-height:100%;
+}

data/stylesheets/partials/base/_paragraphs.scss

@@ -7,5 +7,5 @@
  */
 .lede,
 .lead{
-    font-size:1.125em;
-}
+    @include font-size($base-font-size * 1.125);
+}

data/stylesheets/partials/base/_quotes.scss

@@ -17,29 +17,32 @@ blockquote p:before{ content: "“"; content: open-quote; }
 blockquote p:after{ content: ""; content: no-close-quote; }
 blockquote p:last-of-type:after{ content: "”"; content: close-quote; }
 
+
 /**
- *
+ * 
    <blockquote>
        <p>Insanity: doing the same thing over and over again and expecting
        different results.</p>
        <b class=source>Albert Einstein</b>
    </blockquote>
- *
+ * 
  */
 blockquote{
     /**
      * .4em is roughly equal to the width of the opening “ that we wish to hang.
      */
     text-indent:-0.4em;
-}
-    blockquote p:last-of-type{
+    
+    p:last-of-type{
         margin-bottom:0;
     }
+}
 
 .source{
     display:block;
     text-indent:0;
-}
-    .source:before{
+    
+    &:before{
         content:"—";
-    }
+    }
+}