compass-inuit 4.3 → 4.3.1

data/README.md

@@ -1,4 +1,4 @@
-# ![inuit.css](http://csswizardry.com/inuitcss/img/logo.jpg)
+# ![inuit.css](http://i.imgur.com/dkBoq.png)
 
 A powerful little Compass extension for inuit.css for _insanely serious_ developers who use Compass.
 
@@ -6,7 +6,7 @@ A powerful little Compass extension for inuit.css for _insanely serious_ develop
 
 ### Bundler
 If you want to bundle into your app, install bundler.
-	
+
 	$ sudo gem install bundler
 
 With Bundler installed, add this to your Gemfile.
@@ -22,7 +22,7 @@ Run this in the command line:
 
 ### Manual
 If bundler isn't your thing, install this gem.
-	
+
 	$ sudo gem install compass-inuit
 
 Next in your Compass project add this to your config.rb
@@ -47,15 +47,8 @@ Imports have been branched out in this extension, additionally you can use these
 
 	@import "inuit/objects";
 
-## Support inuit.css
-
-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.
 
 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/_compass-inuit.scss

@@ -18,7 +18,7 @@
  * take care to read and refer to them as you build. For further support please
  * tweet at @inuitcss.
  *
- * Owing to the amount of comments please only ever use `inuit.min.css` in
+ * Owing to the amount of comments please only ever use minified CSS in
  * production. This file is purely a dev document.
  *
  * The table of contents below maps to section titles of the same name, to jump
@@ -92,7 +92,7 @@
  * MATRIX..............Gridded lists
  * SPLIT...............A simple split-in-two object
  * THIS-OR-THIS........Options object
- * COMPLEX-LINK........
+ * LINK-COMPLEX........
  * FLYOUT..............Flyout-on-hover object
  * ARROWS..............CSS arrows
  * SPRITE..............Generic spriting element

data/stylesheets/partials/_objects.scss

@@ -6,13 +6,13 @@
 @import "partials/objects/breadcrumb";
 @import "partials/objects/buttons";
 @import "partials/objects/columns";
-@import "partials/objects/complex-link";
 @import "partials/objects/flexbox";
 @import "partials/objects/flyout";
 @import "partials/objects/greybox";
 @import "partials/objects/grids";
 @import "partials/objects/icon-text";
 @import "partials/objects/island";
+@import "partials/objects/link-complex";
 @import "partials/objects/lozenges";
 @import "partials/objects/matrix";
 @import "partials/objects/media";

data/stylesheets/partials/base/_forms.scss

@@ -7,7 +7,7 @@
  * 
  */
 fieldset{
-    padding:$base-spacing-unit +px;
+    padding:$base-spacing-unit;
 }
 
 

data/stylesheets/partials/base/_links.scss

@@ -7,7 +7,7 @@
  * Sometimes, particularly on larger projects, it is useful to scope link
  * styling only to anchors which have `href` attributes.
  */
-a:link{
+a{
     /**
      * Set colors etc in your theme stylesheet.
      */

data/stylesheets/partials/base/_main.scss

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

data/stylesheets/partials/base/_tables.scss

@@ -60,9 +60,9 @@ table{
 }
 th,
 td{
-    padding:$base-spacing-unit / 4 +px;
+    padding:$base-spacing-unit / 4;
     @media screen and (min-width:480px){
-        padding:$half-spacing-unit +px;
+        padding:$half-spacing-unit;
     }
     text-align:left;
 }

data/stylesheets/partials/generic/_helper.scss

@@ -20,12 +20,12 @@
  * Pull items full width of `.island` parents.
  */
 .full-bleed{
-    margin-right:-$base-spacing-unit +px;
-    margin-left: -$base-spacing-unit +px;
+    margin-right:-$base-spacing-unit;
+    margin-left: -$base-spacing-unit;
     
     .islet &{
-        margin-right:-($half-spacing-unit) +px;
-        margin-left: -($half-spacing-unit) +px;
+        margin-right:-($half-spacing-unit);
+        margin-left: -($half-spacing-unit);
     }
 }
 

data/stylesheets/partials/generic/_mixins.scss

@@ -5,14 +5,14 @@
  * Create a fully formed type style (sizing and vertical rhythm) by passing in a
  * single value, e.g.:
  * 
-   `@include font-size(10);`
+   `@include font-size(10px);`
  * 
  * 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;
+    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);
 }
 
@@ -253,32 +253,32 @@
  * 
  * We work out your end points for you:
  */
-$palm-end:              $lap-start +-1;
-$lap-end:               $desk-start +-1;
+$palm-end:              $lap-start - 1px;
+$lap-end:               $desk-start - 1px;
 
 @mixin media-query($media-query){
 
     @if $media-query == palm{
         
-        @media only screen and (max-width:$palm-end +px) { @content; }
+        @media only screen and (max-width:$palm-end) { @content; }
         
     }
     
     @if $media-query == lap{
         
-        @media only screen and (min-width:$lap-start +px) and (max-width:$lap-end +px) { @content; }
+        @media only screen and (min-width:$lap-start) and (max-width:$lap-end) { @content; }
         
     }
     
     @if $media-query == portable{
         
-        @media only screen and (max-width:$lap-end +px) { @content; }
+        @media only screen and (max-width:$lap-end) { @content; }
         
     }
     
     @if $media-query == desk{
         
-        @media only screen and (min-width:$desk-start +px) { @content; }
+        @media only screen and (min-width:$desk-start) { @content; }
         
     }
     

data/stylesheets/partials/generic/_shared.scss

@@ -22,12 +22,12 @@ pre,
 .media,
 .island,
 .islet{
-    margin-bottom:$base-spacing-unit +px;
-    margin-bottom:($base-spacing-unit / $base-font-size) +rem;
+    margin-bottom:$base-spacing-unit;
+    margin-bottom:($base-spacing-unit / $base-font-size)*1rem;
     
     .islet &{
-        margin-bottom:($base-spacing-unit / 2) +px;
-        margin-bottom:(($base-spacing-unit / $base-font-size) / 2) +rem;
+        margin-bottom:$base-spacing-unit / 2;
+        margin-bottom:(($base-spacing-unit / $base-font-size) / 2)*1rem;
     }
 }
 
@@ -36,8 +36,8 @@ pre,
  * Doubled up `margin-bottom` helper class.
  */
 .landmark{
-    margin-bottom:2 * $base-spacing-unit +px;
-    margin-bottom:2 * $base-spacing-unit / $base-font-size +rem;
+    margin-bottom:2 * $base-spacing-unit;
+    margin-bottom:(2 * $base-spacing-unit / $base-font-size)*1rem;
 }
 
 
@@ -46,8 +46,8 @@ pre,
  * treatment regarding vertical rhythm.
  */
 hr{
-    margin-bottom:($base-spacing-unit - 2) +px;
-    margin-bottom:($base-spacing-unit - 2) / $base-font-size +rem;
+    margin-bottom:$base-spacing-unit - 2px;
+    margin-bottom:(($base-spacing-unit - 2px) / $base-font-size)*1rem;
 }
 
 
@@ -56,6 +56,6 @@ hr{
  * 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;
+    margin-left:2 * $base-spacing-unit;
+    margin-left:(2 * $base-spacing-unit / $base-font-size)*1rem;
 }

data/stylesheets/partials/objects/_arrows.scss

@@ -25,10 +25,10 @@ $arrow:                 $arrow-size - $arrow-border;
         border-collapse:separate;
     }
     &:before{
-        border:$border +px solid transparent;
+        border:$border solid transparent;
     }
     &:after{
-        border:$arrow +px solid transparent;
+        border:$arrow solid transparent;
     }
 }
 
@@ -49,10 +49,10 @@ $arrow:                 $arrow-size - $arrow-border;
     @extend %arrow;
     
     &:before{
-        top:$arrow +px;
+        top:$arrow;
     }
     &:after{
-        top:$border +px;
+        top:$border;
     }
 }
 
@@ -62,10 +62,10 @@ $arrow:                 $arrow-size - $arrow-border;
     &:before,
     &:after{
         top:50%;
-        margin-top:-($border +px);
+        margin-top:-$border;
     }
     &:after{
-        margin-top:-($arrow +px);
+        margin-top:-$arrow;
     }
 }
 
@@ -73,10 +73,10 @@ $arrow:                 $arrow-size - $arrow-border;
     @extend %arrow;
     
     &:before{
-        bottom:$arrow +px;
+        bottom:$arrow;
     }
     &:after{
-        bottom:$border +px;
+        bottom:$border;
     }
 }
 
@@ -102,10 +102,10 @@ $arrow:                 $arrow-size - $arrow-border;
     @extend %arrow;
     
     &:before{
-        left:$arrow +px;
+        left:$arrow;
     }
     &:after{
-        left:$border +px;
+        left:$border;
     }
 }
 
@@ -115,10 +115,10 @@ $arrow:                 $arrow-size - $arrow-border;
     &:before,
     &:after{
         left:50%;
-        margin-left:-($border +px);
+        margin-left:-$border;
     }
     &:after{
-        margin-left:-($arrow +px);
+        margin-left:-$arrow;
     }
 }
 
@@ -126,10 +126,10 @@ $arrow:                 $arrow-size - $arrow-border;
     @extend %arrow;
     
     &:before{
-        right:$arrow +px;
+        right:$arrow;
     }
     &:after{
-        right:$border +px;
+        right:$border;
     }
 }
 

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

@@ -30,11 +30,11 @@
 
     > li{
         border-bottom-width:1px;
-        padding:$half-spacing-unit +px;
+        padding:$half-spacing-unit;
     }
 }
         .block-list__link{
             display:block;
-            padding:$half-spacing-unit +px;
-            margin:-$half-spacing-unit +px;
+            padding:$half-spacing-unit;
+            margin:-$half-spacing-unit;
         }

data/stylesheets/partials/objects/_columns.scss

@@ -10,7 +10,7 @@
  * 
  */
 %text-cols{
-    @include vendor(column-gap, $base-spacing-unit +px);
+    @include vendor(column-gap, $base-spacing-unit);
 }
 .text-cols--2    { @extend %text-cols; @include vendor(column-count, 2); }
 .text-cols--3    { @extend %text-cols; @include vendor(column-count, 3); }

data/stylesheets/partials/objects/_greybox.scss

@@ -25,7 +25,7 @@
  */
 .greybox,
 .graybox{
-    @include font-size(12);
+    @include font-size(12px);
     font-family:sans-serif;
     text-align:center;
     background-color:rgba(0,0,0,0.2);
@@ -43,12 +43,12 @@
  * heights we apply incrementally larger line-heights:
  */
 .greybox--small,
-.graybox--small     { line-height: (2 * $base-line-height) +px; }
+.graybox--small     { line-height: 2 * $base-line-height; }
 .greybox--medium,
-.graybox--medium    { line-height: (4 * $base-line-height) +px; }
+.graybox--medium    { line-height: 4 * $base-line-height; }
 .greybox--large,
-.graybox--large     { line-height: (8 * $base-line-height) +px; }
+.graybox--large     { line-height: 8 * $base-line-height; }
 .greybox--huge,
-.graybox--huge      { line-height:(16 * $base-line-height) +px; }
+.graybox--huge      { line-height:16 * $base-line-height; }
 .greybox--gigantic,
-.graybox--gigantic  { line-height:(32 * $base-line-height) +px; }
+.graybox--gigantic  { line-height:32 * $base-line-height; }

data/stylesheets/partials/objects/_grids.scss

@@ -43,7 +43,7 @@
     /**
      * Negative margin to negate the padding on the first grid child. 
      */
-    margin-left:-($base-spacing-unit) +px;
+    margin-left:-$base-spacing-unit;
     /**
      * The following declarations allow us to use the `.gw` class on lists.
      */
@@ -92,7 +92,7 @@
     .g,
     .grid{
         float:left;
-        padding-left:$base-spacing-unit +px;
+        padding-left:$base-spacing-unit;
         @if $global-border-box == false{
             @include vendor(box-sizing, border-box);
         }

data/stylesheets/partials/objects/_island.scss

@@ -18,7 +18,7 @@
     @extend .cf;
 }
 .island{
-    padding:$base-spacing-unit +px;
+    padding:$base-spacing-unit;
 }
     .island > :last-child,
     .islet > :last-child{
@@ -30,5 +30,5 @@
  * Just like `.island`, only smaller.
  */
 .islet{
-    padding:$half-spacing-unit +px;
+    padding:$half-spacing-unit;
 }

data/stylesheets/partials/objects/_link-complex.scss

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

data/stylesheets/partials/objects/_lozenges.scss

@@ -20,9 +20,9 @@
      * the same width as the `line-height` set on the `html` element.
      * This allows us to use the `.loz` in almost any `font-size` we wish.
      */
-    min-width:    ($line-height-ratio * 0.666667) +em;
-    padding-right:($line-height-ratio * 0.166667) +em;
-    padding-left: ($line-height-ratio * 0.166667) +em;
+    min-width:    ($line-height-ratio * 0.666667) * 1em;
+    padding-right:($line-height-ratio * 0.166667) * 1em;
+    padding-left: ($line-height-ratio * 0.166667) * 1em;
               /* =1.50em */
     text-align:center;
     background-color:#ccc; /* Override this color in your theme stylesheet */
@@ -38,5 +38,5 @@
 
 .loz{
     @extend .pill;
-    border-radius:$brand-round +px;
+    border-radius:$brand-round;
 }

data/stylesheets/partials/objects/_matrix.scss

@@ -32,7 +32,7 @@
     @extend .cf;
 
      > li{
-        padding:$half-spacing-unit +px;
+        padding:$half-spacing-unit;
         float:left;
         border-right-width: 1px;
         border-bottom-width:1px;
@@ -43,8 +43,8 @@
 }
         .matrix__link{
             display:block;
-            padding:$half-spacing-unit +px;
-            margin:-$half-spacing-unit +px;
+            padding:$half-spacing-unit;
+            margin:-$half-spacing-unit;
         }
 
 

data/stylesheets/partials/objects/_media.scss

@@ -21,14 +21,14 @@
 }
     .media__img{
         float:left;
-        margin-right:$base-spacing-unit +px;
+        margin-right:$base-spacing-unit;
     }
     /**
      * Reversed image location (right instead of left).
      */
     .media__img--rev{
         float:right;
-        margin-left:$base-spacing-unit +px;
+        margin-left:$base-spacing-unit;
     }
     
         .media__img img,
@@ -49,8 +49,8 @@
      * `.img`s in `.islet`s need an appropriately sized margin.
      */
     .islet .media__img{
-        margin-right:$half-spacing-unit +px;
+        margin-right:$half-spacing-unit;
     }
     .islet .media__img--rev{
-        margin-left:$half-spacing-unit +px;
+        margin-left:$half-spacing-unit;
     }

data/stylesheets/partials/objects/_nav.scss

@@ -90,7 +90,7 @@
     > li{
         
         > a{
-            padding:$half-spacing-unit +px;
+            padding:$half-spacing-unit;
         }
     }
 }

data/stylesheets/partials/objects/_options.scss

@@ -29,11 +29,11 @@
 
         &:first-child > a{
             border-left-width:1px;
-            border-radius:$brand-round +px 0 0 $brand-round +px;
+            border-radius:$brand-round 0 0 $brand-round;
         }
 
         &:last-child > a{
-            border-radius:0 $brand-round +px $brand-round +px 0;
+            border-radius:0 $brand-round $brand-round 0;
         }
     }
 }

data/stylesheets/partials/objects/_pagination.scss

@@ -25,11 +25,11 @@
     text-align:center;
 }
     .pagination > li{
-        padding:($base-spacing-unit / 2) +px;
+        padding:$base-spacing-unit / 2;
     }
         .pagination > li > a{
-            padding:($base-spacing-unit / 2) +px;
-            margin:-($base-spacing-unit / 2) +px;
+            padding:$base-spacing-unit / 2;
+            margin:-$base-spacing-unit / 2;
         }    
             .pagination__first a:before{
                 content:"« ";

data/stylesheets/partials/objects/_rules.scss

@@ -12,8 +12,8 @@
     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;
+    margin-bottom:$base-spacing-unit - 1px;                                  
+    margin-bottom:(($base-spacing-unit - 1px) / $base-font-size)*1rem;
 }
 
 

data/stylesheets/partials/objects/_stats.scss

@@ -26,11 +26,11 @@
   */
  .stat-group{
     @extend .cf;
-    margin-left:-$base-spacing-unit +px;
+    margin-left:-$base-spacing-unit;
 }
     .stat{
         float:left;
-        margin-left:$base-spacing-unit +px;
+        margin-left:$base-spacing-unit;
         display:-webkit-box;
         display:   -moz-box;
         display:        box;

data/templates/project/sass/_vars.scss

@@ -25,14 +25,14 @@ $global-border-box: true;
 /**
  * Base stuff
  */
-$base-font-size:    16!default;
-$base-line-height:  24!default;
+$base-font-size:    16px!default;
+$base-line-height:  24px!default;
 
 
 /**
  * How big would you like round corners to be by default?
  */
-$brand-round:        4!default;
+$brand-round:        4px!default;
 
 
 /**
@@ -40,26 +40,26 @@ $brand-round:        4!default;
  * Tell inuit.css when breakpoints start, in pixels.
  */
 $responsive:        true;
-$lap-start:         481;
-$desk-start:        1024;
+$lap-start:         481px;
+$desk-start:        1024px;
 
 
 /**
  * Font-sizes (in pixels). Refer to relevant sections for their implementations.
  */
-$giga-size:         96!default;
-$mega-size:         72!default;
-$kilo-size:         48!default;
-
-$h1-size:           36!default; // .alpha
-$h2-size:           30!default; // .beta
-$h3-size:           24!default; // .gamma
-$h4-size:           20!default; // .delta
-$h5-size:           16!default; // .epsilon
-$h6-size:           14!default; // .zeta
-
-$milli-size:        12!default;
-$micro-size:        10!default;
+$giga-size:         96px!default;
+$mega-size:         72px!default;
+$kilo-size:         48px!default;
+
+$h1-size:           36px!default; // .alpha
+$h2-size:           30px!default; // .beta
+$h3-size:           24px!default; // .gamma
+$h4-size:           20px!default; // .delta
+$h5-size:           16px!default; // .epsilon
+$h6-size:           14px!default; // .zeta
+
+$milli-size:        12px!default;
+$micro-size:        10px!default;
 
 
 /**

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: compass-inuit
 version: !ruby/object:Gem::Version
-  version: '4.3'
+  version: 4.3.1
   prerelease: 
 platform: ruby
 authors:
@@ -83,13 +83,13 @@ files:
 - stylesheets/partials/objects/_breadcrumb.scss
 - stylesheets/partials/objects/_buttons.scss
 - stylesheets/partials/objects/_columns.scss
-- stylesheets/partials/objects/_complex-link.scss
 - stylesheets/partials/objects/_flexbox.scss
 - stylesheets/partials/objects/_flyout.scss
 - stylesheets/partials/objects/_greybox.scss
 - stylesheets/partials/objects/_grids.scss
 - stylesheets/partials/objects/_icon-text.scss
 - stylesheets/partials/objects/_island.scss
+- stylesheets/partials/objects/_link-complex.scss
 - stylesheets/partials/objects/_lozenges.scss
 - stylesheets/partials/objects/_matrix.scss
 - stylesheets/partials/objects/_media.scss

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

@@ -1,28 +0,0 @@
-/*------------------------------------*\
-    $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;
-    }