compass-inuit 4.5.5.1 → 5.0.1

data/stylesheets/compass-inuit/objects/_pagination.scss

@@ -1,3 +1,5 @@
+@if $use-pagination == true{
+
 /*------------------------------------*\
     $PAGINATION
 \*------------------------------------*/
@@ -5,7 +7,7 @@
  * Basic pagination object, extends `.nav`.
  * Requires some funky commenting to collapse any white-space caused by the
  * `display:inline-block;` rules.
- * 
+ *
    <ol class="nav  pagination">
        <li class=pagination__first>First</li>
        <li class=pagination__prev>Previous</li>
@@ -17,9 +19,9 @@
        <li class=pagination__next><a href=/page/next>Next</a></li>
        <li class=pagination__last><a href=/page/last>Last</a></li>
    </ol>
- * 
+ *
  * Demo: jsfiddle.net/inuitcss/9Y6PU
- * 
+ *
  */
 .pagination{
     text-align:center;
@@ -37,10 +39,12 @@
         .pagination > li > a{
             padding:$base-spacing-unit / 2;
             margin:-$base-spacing-unit / 2;
-        }    
+        }
             .pagination__first a:before{
-                content:"« ";
+                content:"\00AB" "\00A0";
             }
             .pagination__last a:after{
-                content:" »";
-            }
+                content:"\00A0" "\00BB";
+            }
+
+}//endif

data/stylesheets/compass-inuit/objects/_rules.scss

@@ -1,18 +1,20 @@
+@if $use-rules == true{
+
 /*------------------------------------*\
     $RULES
 \*------------------------------------*/
 /**
  * Horizontal rules, extend `hr`.
- * 
+ *
  * Demo: jsfiddle.net/inuitcss/L6GuZ
- * 
+ *
  */
 .rule{
-    color:#ccc; /* Sets border color, extend in your theme stylesheet. */
+    color:$base-ui-color;
     border:none;
     border-bottom-width:1px;
     border-bottom-style:solid;
-    margin-bottom:$base-spacing-unit - 1px;                                  
+    margin-bottom:$base-spacing-unit - 1px;
     margin-bottom:(($base-spacing-unit - 1px) / $base-font-size)*1rem;
 }
 
@@ -40,7 +42,7 @@
     position:relative;
 
     &:after{
-        content:"§";
+        content:"\00A7";
         position:absolute;
         top:   0;
         right: 0;
@@ -51,11 +53,13 @@
 
     /**
     * Pass in an arbitrary ornament though a data attribute, e.g.:
-    * 
+    *
       <hr class="rule  rule--ornament" data-ornament="!">
-    * 
+    *
     */
     &[data-ornament]:after{
         content:attr(data-ornament);
     }
 }
+
+}//endif

data/stylesheets/compass-inuit/objects/_split.scss

@@ -1,27 +1,29 @@
+@if $use-split == true{
+
 /*------------------------------------*\
     $SPLIT
 \*------------------------------------*/
 /**
  * Simple split item for creating two elements floated away from one another,
  * e.g.:
- * 
-   <dl class=split>       
+ *
+   <dl class=split>
        <dt class=split__title>Burger and fries</dt>
-       <dd>&pound;5.99</dd>       
+       <dd>&pound;5.99</dd>
        <dt class=split__title>Fillet steak</dt>
-       <dd>&pound;19.99</dd>       
+       <dd>&pound;19.99</dd>
        <dt class=split__title>Ice cream</dt>
-       <dd>&pound;2.99</dd>       
+       <dd>&pound;2.99</dd>
    </dl>
- * 
+ *
    <ol class="split  results">
-       <li class=first><b class=split__title>1st place</b> Bob</li>       
-       <li class=second><b class=split__title>2nd place</b> Lilly</li>       
-       <li class=third><b class=split__title>3rd place</b> Ted</li>       
+       <li class=first><b class=split__title>1st place</b> Bob</li>
+       <li class=second><b class=split__title>2nd place</b> Lilly</li>
+       <li class=third><b class=split__title>3rd place</b> Ted</li>
    </ol>​
- * 
+ *
  * Demo: jsfiddle.net/inuitcss/9gZW7
- * 
+ *
  */
 .split{
     text-align:right;
@@ -32,4 +34,6 @@
         text-align:left;
         float:left;
         clear:left;
-    }
+    }
+
+}//endif

data/stylesheets/compass-inuit/objects/_sprite.scss

@@ -1,48 +1,55 @@
+@if $use-sprite == true{
+
 /*------------------------------------*\
     $SPRITE
 \*------------------------------------*/
 /**
- * Giving an element a class of `.s` will throw it into ‘sprite’ mode and apply
+ * Giving an element a class of `.sprite` will throw it into ‘sprite’ mode and apply
  * a background image e.g.:
- * 
-   <a class="s  s--question-mark">More info&hellip;</a>
- * 
+ *
+   <a class="sprite  sprite--question-mark">More info&hellip;</a>
+ *
  * or
- * 
-   <a href=#><i class="s  s--question-mark"></i> Help and FAQ</a>
- * 
- * Giving an element a class of `.i` will throw it into ‘icon’ mode and will
+ *
+   <a href=#><i class="sprite  sprite--question-mark"></i> Help and FAQ</a>
+ *
+ * Giving an element a class of `.icon` will throw it into ‘icon’ mode and will
  * not add a background, but should be used for icon fonts and is populated
  * through a `data-icon` attribute and the `:after` pseudo-element, e.g.:
- * 
-   <a href=#><i class=i data-icon="&#xF000;"></i> View your favourites</a>
- * 
- * Where ‘&#xF000;’ might map to a star in your particular font.
- * 
- * These all require extension in your theme stylesheet.
- * 
+ *
+   <a href=#><i class=icon data-icon="&#xF000;"></i> View your favourites</a>
+ *
+ * Where ‘&#xF000;’ might map to a star in your particular icon font.
+ *
+ * These all require extension in your theme stylesheet, e.g. in your own CSS:
+ *
+   .sprite{
+       background-image:url(path/to/your/sprite.png);
+   }
+   .sprite--link{ background-position:0   0  ; }
+   .sprite--star{ background-position:0 -16px; }
+ *
  * Demo: jsfiddle.net/inuitcss/6TKuS
- * 
+ *
  */
-.s,
-.i{
+.sprite,
+.icon{
     display:inline-block;
     line-height:1;
     position:relative;
     vertical-align:middle;
     zoom:1;
     /**
-     * So using `.i` on certain elements doesn’t make a visual difference.
+     * So using `.icon` on certain elements doesn’t make a visual difference.
      */
     font-style:normal;
     font-weight:normal;
     /**
-     * So icons added using `.i` sit in the centre of the element.
+     * So icons added using `.icon` sit in the centre of the element.
      */
     text-align:center;
 }
-.s{
-    background-image:url(/path/to/your/sprite.png);
+.sprite{
     /**
      * The typical size of most icons. Override in your theme stylesheet.
      */
@@ -66,12 +73,9 @@
 }
 
 /**
- * Set up Batch icon font
+ * Set up icon font
  */
-.i{
-    @if $batch == true{
-        font-family:Batch;
-    }
+.icon{
     font-size:16px;
     /**
      * Place the icon in a box the exact same dimensions as the icon itself.
@@ -87,6 +91,8 @@
 /**
  * Icon size modifiers.
  */
-.i--large   { font-size:32px; }
-.i--huge    { font-size:64px; }
-.i--natural { font-size:inherit; }
+.icon--large   { font-size:32px; }
+.icon--huge    { font-size:64px; }
+.icon--natural { font-size:inherit; }
+
+}//endif

data/stylesheets/compass-inuit/objects/_stats.scss

@@ -1,20 +1,22 @@
+@if $use-stats == true{
+
  /*------------------------------------*\
      $STATS
  \*------------------------------------*/
  /**
-  * Simple object to display key–value statistic-like information, e.g.: 
+  * Simple object to display key–value statistic-like information, e.g.:
   *
     <div class=stat-group>
         <dl class=stat>
             <dt class=stat__title>Tweets</dt>
             <dd class=stat__value>27,740</dd>
         </dl>
-        
+
         <dl class=stat>
             <dt class=stat__title>Following</dt>
             <dd class=stat__value>11,529</dd>
         </dl>
-        
+
         <dl class=stat>
             <dt class=stat__title>Followers</dt>
             <dd class=stat__value>12,105</dd>
@@ -46,3 +48,5 @@
             @include vendor(order, 1);
             -ms-flex-order:1;
         }
+
+}//endif

data/stylesheets/compass-inuit/objects/_this-or-this.scss

@@ -1,9 +1,11 @@
+@if $use-this-or-this == true{
+
 /*------------------------------------*\
     $THIS-OR-THIS
 \*------------------------------------*/
 /**
  * Simple options object to provide multiple choices, e.g.:
- * 
+ *
    <h1 class=this-or-this>
        <a href=# class="this-or-this__this  two-fifths">
            Free
@@ -15,12 +17,12 @@
            Pro
        </a>
    </h1>
- * 
+ *
  * The `.this-or-this__this` and `.this-or-this__or` objects can be sized using
  * the grid-system classes.
- * 
+ *
  * Demo: jsfiddle.net/inuitcss/R3sks
- * 
+ *
  */
 .this-or-this{
     display:table;
@@ -32,3 +34,5 @@
         display:table-cell;
         vertical-align:middle;
     }
+
+}//endif

data/templates/project/_vars.scss

@@ -1,124 +1,71 @@
 /*------------------------------------*\
-    $VARS
+    VARS.SCSS
 \*------------------------------------*/
 /**
- * Set up project-specific variables here which are then used throughout your
- * build. These variables are automatically picked up by inuit.css so you should
- * never need to modify any framework code.
+ * Any variables you find set in inuit.css’ `_vars.scss` that you do not wish to
+ * keep, simply redefine here. This means that if inuit.css, for example, sets
+ * your `$base-font-size` at 16px and you wish it to be 14px, simply redeclare
+ * that variable in this file. inuit.css ignores its own variables in favour of
+ * using your own, so you can completely modify how inuit.css works without ever
+ * having to alter the framework itself.
  */
 
 
-/**
- * Debug mode will visually highlight any potential markup/accessibility quirks
- * in the browser. Set to `true` or `false`.
- */
-$debug-mode:        false!default;
-
-
-/**
- * Do you want all elements to adopt `box-sizing:border-box;` as per
- * paulirish.com/2012/box-sizing-border-box-ftw ?
- */
-$global-border-box: true!default;
-
-
-/**
- * Would you like to use Adam Whitcroft’s Batch icon font, as per:
- * adamwhitcroft.com/batch ?
- */
-$batch:             false!default;
-
 
-/**
- * Base stuff
- */
-$base-font-size:    16px!default;
-$base-line-height:  24px!default;
-
-
-/**
- * How big would you like round corners to be by default?
- */
-$brand-round:        4px!default;
 
 
+/*------------------------------------*\
+    $OBJECTS-AND-ABSTRACTIONS
+\*------------------------------------*/
 /**
- * Responsiveness?
- */
-$responsive:        true!default;
-
-/**
- * Responsiveness for widescreen/high resolution desktop monitors and beyond?
- * Note: $responsive parameter above must be enabled before enabling this.
- */
-$responsive-extra:  false!default;
-
-/**
- * Responsive push and pull produce a LOT of code, only turn them on if you
- * definitely need them.
- */
-$responsive-push:   false!default;
-$responsive-pull:   false!default;
+ * All of inuit.css’ objects and abstractions are initially turned off by
+ * default. This means that you start any project with as little as possible,
+ * and introducing objects and abstractions is as simple as switching the
+ * following variables to `true`.
+ */
+$use-grids:         false;
+$use-flexbox:       false;
+$use-columns:       false;
+$use-nav:           false;
+$use-options:       false;
+$use-pagination:    false;
+$use-breadcrumb:    false;
+$use-media:         false;
+$use-marginalia:    false;
+$use-island:        false;
+$use-block-list:    false;
+$use-matrix:        false;
+$use-split:         false;
+$use-this-or-this:  false;
+$use-link-complex:  false;
+$use-flyout:        false;
+$use-arrows:        false;
+$use-sprite:        false;
+$use-icon-text:     false;
+$use-beautons:      false;
+$use-lozenges:      false;
+$use-rules:         false;
+$use-stats:         false;
+$use-greybox:       false;
 
-/**
- * Tell inuit.css when breakpoints start.
- */
-$lap-start:         481px!default;
-$desk-start:        1024px!default;
-$desk-wide-start: 	1200px!default;
 
 
-/**
- * Font-sizes (in pixels). Refer to relevant sections for their implementations.
- */
-$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;
-
-
-/**
- * English quote marks?
- */
-$english-quotes:    true!default;
 
+/*------------------------------------*\
+    $OVERRIDES
+\*------------------------------------*/
 /**
- * If you want English quotes then please do not edit these; they’re only here
- * because Sass needs them.
+ * Place any variables that should override inuit.css’ defaults here.
  */
-$open-quote:    null;
-$close-quote:   null;
 
-/**
- * If you need non-English quotes, please alter the following values accordingly:
- */
-@if $english-quotes != true{
-    $open-quote:    «;
-    $close-quote:   »;
-}
 
 
-/**
- * Brand stuff
- */
-$brand-color:       #4a8ec2!default;
-$brand-face:        "Helvetica Neue", sans-serif!default;
 
 
+/*------------------------------------*\
+    $CUSTOM
+\*------------------------------------*/
 /**
- * inuit.css will work these next ones out for you.
- *
- * Assign our `$base-line-height` to a new spacing var for more transparency.
+ * Place any of your own variables that sit on top of inuit.css here.
  */
-$base-spacing-unit: $base-line-height!default;
-$half-spacing-unit: $base-spacing-unit / 2!default;
-$line-height-ratio: $base-line-height / $base-font-size;