compass-inuit 4.1.1 → 4.1.5

data/stylesheets/partials/base/_smallprint.scss

@@ -3,7 +3,7 @@
 \*------------------------------------*/
 /**
  * A series of classes for setting tiny type; for use in smallprint etc.
- *
+ * 
  * `small` is relative to whatever its parent is, `.milli` and `.micro` are
  * absolute.
  */
@@ -13,9 +13,7 @@ small{
 .smallprint,
 .milli{
     @include font-size($milli-size);
-    line-height:1;      /* 12px */
 }
 .micro{
     @include font-size($micro-size);
-    line-height:1.2;    /* 12px */
-}
+}

data/stylesheets/partials/base/_tables.scss

@@ -4,7 +4,7 @@
 /**
  * We have a lot at our disposal for making very complex table constructs, e.g.:
  *
-   <table class="bordered-table striped-table data-table">
+   <table class="table--bordered  table--striped  table--data">
        <colgroup>
            <col class=t10>
            <col class=t10>
@@ -16,6 +16,7 @@
                <th colspan=3>Foo</th>
                <th>Bar</th>
            </tr>
+           <tr>
                <th>Lorem</th>
                <th>Ipsum</th>
                <th class=numerical>Dolor</th>
@@ -52,8 +53,8 @@
            </tr>
        </tbody>
    </table>
-  *
-  */
+ *
+ */
 table{
     width:100%;
 }
@@ -66,6 +67,7 @@ td{
     text-align:left;
 }
 
+
 /**
  * Cell alignments
  */
@@ -117,34 +119,45 @@ td{
 .t90    { width:90% }
 .t95    { width:95% }
 
+
 /**
  * Bordered tables
  */
-.bordered-table th,
-.bordered-table td{
-    border:1px solid #ccc; /* Override this color in your theme stylesheet */
-}
-.bordered-table thead tr:last-child th{
-    border-bottom-width:2px;
-}
-.bordered-table tbody tr th:last-of-type{
-    border-right-width:2px;
-}
-.bordered-table th:empty,
-.bordered-table td:empty{
-    border:none;
+.table--bordered{
+
+    th,
+    td{
+        border:1px solid #ccc; /* Override this color in your theme stylesheet */
+
+        &:empty{
+            border:none;
+        }
+    }
+
+    thead tr:last-child th{
+        border-bottom-width:2px;
+    }
+
+    tbody tr th:last-of-type{
+        border-right-width:2px;
+    }
 }
 
+
 /**
  * Striped tables
  */
-.striped-table tbody tr:nth-of-type(odd){
-    background-color:#ffc; /* Override this color in your theme stylesheet */
+.table--striped{
+
+    tbody tr:nth-of-type(odd){
+        background-color:#ffc; /* Override this color in your theme stylesheet */
+    }
 }
 
+
 /**
  * Data table
  */
-.data-table{
+.table--data{
     font:12px/1.5 sans-serif;
 }

data/stylesheets/partials/generic/_clearfix.scss

@@ -8,11 +8,13 @@
  */
 .cf{
     zoom:1;
+    
     &:before,
     &:after{
-        content:"";
+        content:" ";
         display:table;
     }
+    
     &:after{
         clear:both;
     }

data/stylesheets/partials/generic/_debug.scss

@@ -0,0 +1,168 @@
+@if $debug-mode == true{
+/*------------------------------------*\
+    $DEBUG
+\*------------------------------------*/
+/**
+ * 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!
+ */
+
+
+/**
+ * Are there any empty elements in your page?
+ */
+:empty{
+    outline:5px solid yellow;
+}
+
+
+/**
+ * Images require `alt` attributes, empty `alt`s are fine but should be
+ * double-checked, no `alt` is bad and is flagged red.
+ */
+img{
+    outline:5px solid red;
+}
+img[alt]{
+    outline:none;
+}
+img[alt=""]{
+    outline:5px solid yellow;
+}
+
+
+/**
+ * Links sometimes, though not always, benefit from `title` attributes. Links
+ * without are never invalid but it’s a good idea to check.
+ */
+a{
+    outline:5px solid yellow;
+}
+a[title]{
+    outline:none;
+}
+
+
+/**
+ * Double-check any links whose `href` is something questionable.
+ */
+a[href="#"],
+a[href*="javascript"]{
+    outline:5px solid yellow;
+}
+
+
+/**
+ * The `target` attribute ain’t too nice...
+ */
+a[target]{
+    outline:5px solid yellow;
+}
+
+
+/**
+ * Ensure any lists only contain `li`s as children.
+ */
+ul,
+ol{
+    > *:not(li){
+        outline:5px solid red;
+    }
+}
+
+
+/**
+ * It’s always nice to give `th`s `scope` attributes.
+ */
+th{
+    outline:5px solid yellow;
+}
+th[scope]{
+    outline:none;
+}
+
+
+/**
+ * `tr`s as children of `table`s ain’t great, did you need a `thead`/`tbody`?
+ */
+table > tr{
+    outline:5px solid yellow;
+}
+
+
+/**
+ * `tfoot` needs to come *before* `tbody`.
+ */
+tbody + tfoot{
+    outline:5px solid yellow;
+}
+
+
+/**
+ * Forms require `action` attributes
+ */
+form{
+    outline:5px solid red;
+}
+form[action]{
+    outline:none;
+}
+
+
+/**
+ * Various form-field types have required attributes. `input`s need `type`
+ * attributes, `textarea`s need `rows` and `cols` attributes and submit buttons
+ * need a `value` attribute.
+ */
+textarea,
+input{
+    outline:5px solid red;
+}
+input[type]{
+    outline:none;
+}
+textarea[rows][cols]{
+    outline:none;
+}
+input[type=submit]{
+    outline:5px solid red;
+}
+input[type=submit][value]{
+    outline:none;
+}
+
+
+/**
+ * Avoid inline styles where possible.
+ */
+[style]{
+	outline:5px solid yellow;
+}
+
+
+/**
+ * You should avoid using IDs for CSS, is this doing any styling?
+ */
+[id]{
+	outline:5px solid yellow;
+}
+
+
+/**
+ * Are you using the grid system correctly?
+ */
+.gw > :not(.g),
+.grid-wrapper > :not(.grid),
+.gw--rev > :not(.g),
+.grid-wrapper--rev > :not(.grid){
+	outline:5px solid red;
+}
+
+}/* endif */

data/stylesheets/partials/generic/_helper.scss

@@ -15,18 +15,21 @@
     text-align:center;
 }
 
+
 /**
  * Pull items full width of `.island` parents.
  */
 .full-bleed{
     margin-right:-$base-spacing-unit +px;
     margin-left: -$base-spacing-unit +px;
-}
-.islet > .full-bleed{
-    margin-right:-($half-spacing-unit) +px;
-    margin-left: -($half-spacing-unit) +px;
+    
+    .islet &{
+        margin-right:-($half-spacing-unit) +px;
+        margin-left: -($half-spacing-unit) +px;
+    }
 }
 
+
 /**
  * Add a help cursor to any element that gives the user extra information on
  * `:hover`.
@@ -35,26 +38,29 @@
     cursor:help;
 }
 
+
 /**
  * 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;
 }
 
+
 /**
  * Add a right-angled quote to links that imply movement, e.g.:
- *
+ * 
    <a href=# class=go>Read more</a>
- *
+ * 
  */
 .go:after{
     content:" »";
 }
 
+
 /**
  * Apply capital case to an element (usually a `strong`).
  */
@@ -62,6 +68,7 @@
     text-transform:uppercase;
 }
 
+
 /**
  * Hide content off-screen without resorting to `display:none;`
  */

data/stylesheets/partials/generic/_mixins.scss

@@ -4,9 +4,9 @@
 /**
  * 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
  */
@@ -16,11 +16,12 @@
     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;
@@ -28,4 +29,57 @@
         -ms-#{$property}:$value;
          -o-#{$property}:$value;
             #{$property}:$value;
+}
+
+
+/**
+ * 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;
+    }
+}
+
+
+/**
+ * Force overly long spans of text to truncate, e.g.:
+ * 
+   `@include truncate(100%);`
+ * 
+ * Where `$truncation-boundary` is a united measurement.
+ */
+@mixin truncate($truncation-boundary){
+    max-width:$truncation-boundary;
+    white-space:nowrap;
+    overflow:hidden;
+    text-overflow:ellipsis;
 }