compass-inuit 4.5.5.1 → 5.0.1

data/stylesheets/compass-inuit/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.
@@ -31,12 +31,12 @@ h6,.zeta{
 /**
  * Heading groups and generic any-heading class.
  * To target any heading of any level simply apply a class of `.hN`, e.g.:
- * 
+ *
    <hgroup>
        <h1 class=hN>inuit.css</h1>
        <h2 class=hN>Best. Framework. Ever!</h2>
    </hgroup>
- * 
+ *
  */
 .hN{
 }
@@ -57,4 +57,4 @@ hgroup .hN{
 }
 .kilo{
     @include font-size($kilo-size);
-}
+}

data/stylesheets/compass-inuit/base/_images.scss

@@ -21,6 +21,12 @@ img[height]{
 }
 
 
+/**
+ * Rounded images.
+ */
+.img--round { border-radius:$brand-round; }
+
+
 /**
  * Image placement variations.
  */
@@ -44,7 +50,7 @@ img[height]{
 
 /**
  * Keep your images on your baseline.
- * 
+ *
  * Please note, these will not work too nicely with fluid images and will
  * distort when resized below a certain width. Use with caution.
  */

data/stylesheets/compass-inuit/base/_main.scss

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

data/stylesheets/compass-inuit/base/_quotes.scss

@@ -5,8 +5,8 @@
  * If English quotes are set in `_vars.scss`, define them here.
  */
 @if $english-quotes == true{
-    $open-quote:    “;
-    $close-quote:   ”;
+    $open-quote:    \201C;
+    $close-quote:   \201D;
 }
 
 
@@ -18,30 +18,30 @@
  * Inline quotes.
  */
 q{
-    quotes:"‘" "’" "#{$open-quote}" "#{$close-quote}";
+    quotes:"\2018" "\2019" "#{$open-quote}" "#{$close-quote}";
 
     &:before{
-        content:"‘";
+        content:"\2018";
         content:open-quote;
     }
     &:after{
-        content:"’";
+        content:"\2019";
         content:close-quote;
     }
 
     q:before{
-        content:"“";
+        content:"\201C";
         content:open-quote;
     }
     q:after{
-        content:"”";
+        content:"\201D";
         content:close-quote;
     }
 }
 
 blockquote{
     quotes:"#{$open-quote}" "#{$close-quote}";
-    
+
     p:before{
         content:"#{$open-quote}";
         content:open-quote;
@@ -56,31 +56,31 @@ blockquote{
     }
 
     q:before{
-        content:"‘";
+        content:"\2018";
         content:open-quote;
     }
     q:after{
-        content:"’";
+        content:"\2019";
         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.41em;
-    
+
     p:last-of-type{
         margin-bottom:0;
     }
@@ -89,8 +89,8 @@ blockquote{
 .source{
     display:block;
     text-indent:0;
-    
+
     &:before{
-        content:"—";
+        content:"\2014";
     }
 }

data/stylesheets/compass-inuit/base/_tables.scss

@@ -127,7 +127,7 @@ td{
 
     th,
     td{
-        border:1px solid #ccc; /* Override this color in your theme stylesheet */
+        border:1px solid $base-ui-color;
 
         &:empty{
             border:none;
@@ -160,4 +160,4 @@ td{
  */
 .table--data{
     font:12px/1.5 sans-serif;
-}
+}

data/stylesheets/compass-inuit/generic/_clearfix.scss

@@ -2,20 +2,14 @@
     $CLEARFIX
 \*------------------------------------*/
 /**
- * Micro clearfix, as per: nicolasgallagher.com/micro-clearfix-hack
+ * Micro clearfix, as per: css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
  * Extend the clearfix class with Sass to avoid the `.cf` class appearing over
  * and over in your markup.
  */
 .cf{
-    zoom:1;
-    
-    &:before,
     &:after{
-        content:" ";
+        content:"";
         display:table;
-    }
-    
-    &:after{
         clear:both;
     }
-}
+}

data/stylesheets/compass-inuit/generic/_debug.scss

@@ -5,11 +5,11 @@
 /**
  * Enable this stylesheet to visually detect any improperly nested or
  * potentially invalid markup, or any potentially inaccessible code.
- * 
+ *
  * Red          ==      definite error
  * Yellow       ==      double-check
  * None         ==      should be fine
- * 
+ *
  * Please note that this method of checking markup quality should not be relied
  * upon entirely. Validate your markup!
  */
@@ -165,4 +165,4 @@ input[type=submit][value]{
 	outline:5px solid red;
 }
 
-}/* endif */
+}/* endif */

data/stylesheets/compass-inuit/generic/_helper.scss

@@ -10,13 +10,51 @@
  * A lot of these classes carry `!important` as you will always want them to win
  * out over other selectors.
  */
+
+
+/**
+ * Add/remove floats
+ */
 .float--right   { float:right!important; }
 .float--left    { float:left !important; }
+.float--none    { float:none !important; }
 
+
+/**
+ * Text alignment
+ */
 .text--left     { text-align:left  !important; }
 .text--center   { text-align:center!important; }
 .text--right    { text-align:right !important; }
 
+
+/**
+ * Font weights
+ */
+.weight--light      { font-weight:300!important; }
+.weight--normal     { font-weight:400!important; }
+.weight--semibold   { font-weight:600!important; }
+
+
+/**
+ * Add/remove margins
+ */
+.push           { margin:       $base-spacing-unit!important; }
+.push--top      { margin-top:   $base-spacing-unit!important; }
+.push--right    { margin-right: $base-spacing-unit!important; }
+.push--bottom   { margin-bottom:$base-spacing-unit!important; }
+.push--left     { margin-left:  $base-spacing-unit!important; }
+.push--ends     { margin-top:   $base-spacing-unit!important; margin-bottom:$base-spacing-unit!important; }
+.push--sides    { margin-right: $base-spacing-unit!important; margin-left:  $base-spacing-unit!important; }
+
+.push-half          { margin:       $half-spacing-unit!important; }
+.push-half--top     { margin-top:   $half-spacing-unit!important; }
+.push-half--right   { margin-right: $half-spacing-unit!important; }
+.push-half--bottom  { margin-bottom:$half-spacing-unit!important; }
+.push-half--left    { margin-left:  $half-spacing-unit!important; }
+.push-half--ends    { margin-top:   $half-spacing-unit!important; margin-bottom:$half-spacing-unit!important; }
+.push-half--sides   { margin-right: $half-spacing-unit!important; margin-left:  $half-spacing-unit!important; }
+
 .flush          { margin:       0!important; }
 .flush--top     { margin-top:   0!important; }
 .flush--right   { margin-right: 0!important; }
@@ -26,13 +64,41 @@
 .flush--sides   { margin-right: 0!important; margin-left:  0!important; }
 
 
+/**
+ * Add/remove paddings
+ */
+.soft           { padding:       $base-spacing-unit!important; }
+.soft--top      { padding-top:   $base-spacing-unit!important; }
+.soft--right    { padding-right: $base-spacing-unit!important; }
+.soft--bottom   { padding-bottom:$base-spacing-unit!important; }
+.soft--left     { padding-left:  $base-spacing-unit!important; }
+.soft--ends     { padding-top:   $base-spacing-unit!important; padding-bottom:$base-spacing-unit!important; }
+.soft--sides    { padding-right: $base-spacing-unit!important; padding-left:  $base-spacing-unit!important; }
+
+.soft-half           { padding:       $half-spacing-unit!important; }
+.soft-half--top      { padding-top:   $half-spacing-unit!important; }
+.soft-half--right    { padding-right: $half-spacing-unit!important; }
+.soft-half--bottom   { padding-bottom:$half-spacing-unit!important; }
+.soft-half--left     { padding-left:  $half-spacing-unit!important; }
+.soft-half--ends     { padding-top:   $half-spacing-unit!important; padding-bottom:$half-spacing-unit!important; }
+.soft-half--sides    { padding-right: $half-spacing-unit!important; padding-left:  $half-spacing-unit!important; }
+
+.hard           { padding:       0!important; }
+.hard--top      { padding-top:   0!important; }
+.hard--right    { padding-right: 0!important; }
+.hard--bottom   { padding-bottom:0!important; }
+.hard--left     { padding-left:  0!important; }
+.hard--ends     { padding-top:   0!important; padding-bottom:0!important; }
+.hard--sides    { padding-right: 0!important; padding-left:  0!important; }
+
+
 /**
  * Pull items full width of `.island` parents.
  */
 .full-bleed{
     margin-right:-$base-spacing-unit!important;
     margin-left: -$base-spacing-unit!important;
-    
+
     .islet &{
         margin-right:-($half-spacing-unit)!important;
         margin-left: -($half-spacing-unit)!important;
@@ -45,7 +111,7 @@
  * `:hover`.
  */
 .informative{
-    cursor:help;
+    cursor:help!important;
 }
 
 
@@ -53,30 +119,30 @@
  * Mute an object by reducing its opacity.
  */
 .muted{
-    opacity:0.5;
-    filter:alpha(opacity = 50);
+    opacity:0.5!important;
+    filter:alpha(opacity = 50)!important;
 }
 
 
 /**
  * Align items to the right where they imply progression/movement forward, e.g.:
- * 
+ *
    <p class=proceed><a href=#>Read more...</a></p>
- * 
+ *
  */
 .proceed{
-    text-align:right;
+    text-align:right!important;
 }
 
 
 /**
  * Add a right-angled quote to links that imply movement, e.g.:
- * 
+ *
    <a href=# class=go>Read more</a>
- * 
+ *
  */
 .go:after{
-    content:" »";
+    content:"\00A0" "\00BB"!important;
 }
 
 
@@ -84,29 +150,35 @@
  * Apply capital case to an element (usually a `strong`).
  */
 .caps{
-    text-transform:uppercase;
+    text-transform:uppercase!important;
 }
 
 
 /**
- * Hide content off-screen without resorting to `display:none;`
+ * Hide content off-screen without resorting to `display:none;`, also provide
+ * breakpoint specific hidden elements.
  */
-.accessibility              { position:absolute; left:-99999px; }
-[dir=rtl] .accessibility    { left:auto; right:-99999px; }
-
-
-/**
- * Hide content based on breakpoint
- */
-.hide{
-    position:absolute;
-    left:-9999px;
+@mixin accessibility{
+    border:0!important;
+    clip:rect(0 0 0 0)!important;
+    height:1px!important;
+    margin:-1px!important;
+    overflow:hidden!important;
+    padding:0!important;
+    position: absolute!important;
+    width:1px!important;
+}
+.accessibility,
+.visuallyhidden{
+    @include accessibility;
 }
-@each $state in palm, lap, portable, desk{
-    @include media-query(#{$state}){
-        .hide--#{$state}{
-            position:absolute;
-            left:-9999px;
+@if $responsive{
+    @each $state in palm, lap, lap-and-up, portable, desk, desk-wide{
+        @include media-query(#{$state}){
+            .accessibility--#{$state},
+            .visuallyhidden--#{$state}{
+                @include accessibility;
+            }
         }
     }
 }

data/stylesheets/compass-inuit/generic/_mixins.scss

@@ -4,24 +4,53 @@
 /**
  * Create a fully formed type style (sizing and vertical rhythm) by passing in a
  * single value, e.g.:
- * 
+ *
    `@include font-size(10px);`
- * 
+ *
  * Thanks to @redclov3r for the `line-height` Sass:
  * twitter.com/redclov3r/status/250301539321798657
  */
-@mixin font-size($font-size){
+@mixin font-size($font-size, $line-height:true){
     font-size:$font-size;
     font-size:($font-size / $base-font-size)*1rem;
-    line-height:ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
+    @if $line-height == true{
+        line-height:ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
+    }
+}
+
+
+/**
+ * Style any number of headings in one fell swoop, e.g.:
+ *
+   .foo{
+       @include headings(1, 3){
+           color:#BADA55;
+       }
+    }
+ *
+ * With thanks to @lar_zzz, @paranoida and @rowanmanning and ultimately
+ * @thierrylemoulec for refining and improving my initial mixin.
+ */
+@mixin headings($from: 1, $to: 6){
+    %base-heading {
+        @content
+    }
+
+    @if $from >= 1 and $to <= 6{
+        @for $i from $from through $to{
+            h#{$i}{
+                @extend %base-heading;
+            }
+        }
+    }
 }
 
 
 /**
  * Create vendor-prefixed CSS in one go, e.g.
- * 
+ *
    `@include vendor(border-radius, 4px);`
- * 
+ *
  */
 @mixin vendor($property, $value...){
     -webkit-#{$property}:$value;
@@ -34,36 +63,36 @@
 
 /**
  * Create CSS keyframe animations for all vendors in one go, e.g.:
- * 
+ *
    .foo{
        @include vendor(animation, shrink 3s);
    }
-   
+
    @include keyframe(shrink){
        from{
            font-size:5em;
        }
    }
- * 
+ *
  * Courtesy of @integralist: twitter.com/integralist/status/260484115315437569
  */
 @mixin keyframe ($animation-name){
     @-webkit-keyframes $animation-name{
         @content;
     }
-    
+
     @-moz-keyframes $animation-name{
         @content;
     }
-    
+
     @-ms-keyframes $animation-name{
         @content;
     }
-    
+
     @-o-keyframes $animation-name{
         @content;
     }
-    
+
     @keyframes $animation-name{
         @content;
     }
@@ -72,9 +101,9 @@
 
 /**
  * Force overly long spans of text to truncate, e.g.:
- * 
+ *
    `@include truncate(100%);`
- * 
+ *
  * Where `$truncation-boundary` is a united measurement.
  */
 @mixin truncate($truncation-boundary){
@@ -87,10 +116,10 @@
 
 /**
  * CSS arrows!!! But... before you read on, you might want to grab a coffee...
- * 
+ *
  * This mixin creates a CSS arrow on a given element. We can have the arrow
  * appear in one of 12 locations, thus:
- * 
+ *
  *       01    02    03
  *    +------------------+
  * 12 |                  | 04
@@ -100,132 +129,132 @@
  * 10 |                  | 06
  *    +------------------+
  *       09    08    07
- * 
+ *
  * You pass this position in along with a desired arrow color and optional
  * border color, for example:
- * 
+ *
  * `@include arrow(top, left, red)`
- * 
+ *
  * for just a single, red arrow, or:
- * 
+ *
  * `@include arrow(bottom, center, red, black)`
- * 
+ *
  * which will create a red triangle with a black border which sits at the bottom
- * center of the element. Call the mixin thus: 
- * 
+ * center of the element. Call the mixin thus:
+ *
    .foo{
        background-color:#BADA55;
        border:1px solid #ACE;
        @include arrow(top, left, #BADA55, #ACE);
    }
- * 
+ *
  */
 @mixin arrow($arrow-edge, $arrow-location, $arrow-color, $border-color: $arrow-color){
-    
+
     @if $arrow-edge == top{
-        
+
         @extend %arrow--top;
-        
+
         &:before{
             border-bottom-color:$border-color!important;
         }
-        
+
         &:after{
             border-bottom-color:$arrow-color!important;
         }
-        
+
         @if $arrow-location == left{
             @extend %arrow--left;
         }
-        
+
         @if $arrow-location == center{
             @extend %arrow--center;
         }
-        
+
         @if $arrow-location == right{
             @extend %arrow--right;
         }
-        
+
     }
-        
+
     @if $arrow-edge == right{
-        
+
         @extend %arrow--far;
-        
+
         &:before{
             border-left-color:$border-color!important;
         }
-        
+
         &:after{
             border-left-color:$arrow-color!important;
         }
-        
+
         @if $arrow-location == top{
             @extend %arrow--upper;
         }
-        
+
         @if $arrow-location == center{
             @extend %arrow--middle;
         }
-        
+
         @if $arrow-location == bottom{
             @extend %arrow--lower;
         }
-        
+
     }
-    
+
     @if $arrow-edge == bottom{
-        
+
         @extend %arrow--bottom;
-        
+
         &:before{
             border-top-color:$border-color!important;
         }
-        
+
         &:after{
             border-top-color:$arrow-color!important;
         }
-        
+
         @if $arrow-location == left{
             @extend %arrow--left;
         }
-        
+
         @if $arrow-location == center{
             @extend %arrow--center;
         }
-        
+
         @if $arrow-location == right{
             @extend %arrow--right;
         }
-        
+
     }
-    
+
     @if $arrow-edge == left{
-        
+
         @extend %arrow--near;
-        
+
         &:before{
             border-right-color:$border-color!important;
         }
-        
+
         &:after{
             border-right-color:$arrow-color!important;
         }
-        
+
         @if $arrow-location == top{
             @extend %arrow--upper;
         }
-        
+
         @if $arrow-location == center{
             @extend %arrow--middle;
         }
-        
+
         @if $arrow-location == bottom{
             @extend %arrow--lower;
         }
-        
+
     }
-    
+
 }
 
 
@@ -238,7 +267,7 @@
  * approach to design decisions, this is the closest we can get to baked-in
  * responsiveness. It’s flexible enough to allow you to set your own breakpoints
  * but solid enough to be frameworkified.
- * 
+ *
  * We define some broad breakpoints in our vars file that are picked up here
  * for use in a simple media query mixin. Our options are:
  *
@@ -248,11 +277,11 @@
  * portable
  * desk
  * desk-wide
- * 
+ *
  * Not using a media query will, naturally, serve styles to all devices.
- * 
+ *
  * `@include media-query(palm){ [styles here] }`
- * 
+ *
  * We work out your end points for you:
  */
 $palm-end:              $lap-start - 1px;
@@ -261,33 +290,33 @@ $lap-end:               $desk-start - 1px;
 @mixin media-query($media-query){
 
     @if $media-query == palm{
-        
+
         @media only screen and (max-width:$palm-end) { @content; }
-        
+
     }
-    
+
     @if $media-query == lap{
-        
+
         @media only screen and (min-width:$lap-start) and (max-width:$lap-end) { @content; }
-        
+
     }
-    
+
     @if $media-query == lap-and-up{
-        
+
         @media only screen and (min-width:$lap-start) { @content; }
-        
+
     }
-    
+
     @if $media-query == portable{
-        
+
         @media only screen and (max-width:$lap-end) { @content; }
-        
+
     }
-    
+
     @if $media-query == desk{
-        
+
         @media only screen and (min-width:$desk-start) { @content; }
-        
+
     }
 
     @if $media-query == desk-wide{
@@ -295,5 +324,5 @@ $lap-end:               $desk-start - 1px;
         @media only screen and (min-width: $desk-wide-start) { @content; }
 
     }
-    
+
 }