compass-inuit 4.1.5 → 4.2.0

data/stylesheets/_compass-inuit.scss

@@ -1,7 +1,11 @@
 /*------------------------------------*\
     INUIT.CSS
 \*------------------------------------*/
-/*! inuitcss.com -- @inuitcss -- @csswizardry */
+/*!*
+ *
+ * inuitcss.com -- @inuitcss -- @csswizardry
+ *
+ */
 /**
  * inuit.css acts as a base stylesheet which you should extend with your own
  * theme stylesheet.
@@ -9,14 +13,14 @@
  * inuit.css aims to do the heavy lifting; sorting objects and abstractions,
  * design patterns and fiddly bits of CSS, whilst leaving as much design as
  * possible to you. inuit.css is the scaffolding to your decorator.
- * 
+ *
  * This stylesheet is heavily documented and contains lots of comments, please
  * 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
  * production. This file is purely a dev document.
- * 
+ *
  * The table of contents below maps to section titles of the same name, to jump
  * to any section simply run a find for $[SECTION-TITLE].
  *
@@ -24,23 +28,25 @@
  * able to paste into any view to quickly see how the CSS works in conjunction
  * with the correct HTML.
  *
+ * inuit.css is written to this standard: github.com/csswizardry/CSS-Guidelines
+ *
  * LICENSE
  *
  * Copyright 2012 Harry Roberts
- * 
+ *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  * http://apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- * 
- * Thank you for choosing inuit.css. May your specificity always stay low.
+ *
+ * Thank you for choosing inuit.css. May your floats remain cleared.
  */
 
 
@@ -54,12 +60,13 @@
  * CONTENTS............You’re reading it!
  * WARNING.............Here be dragons!
  * IMPORTS.............Begin importing the sections below
- * 
+ *
  * MIXINS..............Super-simple Sass stuff
+ * NORMALIZE...........normalize.css
  * RESET...............Set some defaults
  * CLEARFIX............
  * SHARED..............Shared declarations
- * 
+ *
  * MAIN................High-level elements like `html`, `body`, etc.
  * HEADINGS............Double-stranded heading hierarchy
  * PARAGRAPHS..........
@@ -71,12 +78,14 @@
  * IMAGES..............
  * TABLES..............
  * FORMS...............
- * 
+ *
  * GRIDS...............Fluid, proportional and nestable grids
  * FLEXBOX.............Crudely emulate flexbox
  * COLUMNS.............CSS3 columns
  * NAV.................A simple abstraction to put a list in horizontal nav mode
+ * OPTIONS.............Grouped nav items
  * PAGINATION..........Very stripped back, basic paginator
+ * BREADCRUMB..........Simple breadcrumb trail object
  * MEDIA...............Media object
  * ISLAND..............Boxed off content
  * BLOCK-LIST..........Blocky lists of content
@@ -89,9 +98,16 @@
  * ICON-TEXT...........Icon and text couplings
  * BUTTONS.............
  * LOZENGES............Basic lozenge styles
- * 
+ * RULES...............Horizontal rules
+ * STATS...............Simple stats object
+ * GREYBOX.............Wireframing styles
+ *
+ * WIDTHS..............Width classes for use alongside the grid system etc.
+ * PUSH................Push classes for manipulating grids
+ * PULL................Pull classes for manipulating grids
  * BRAND...............Helper class to apply brand treatment to elements
  * HELPER..............A series of helper classes to use arbitrarily
+ * DEBUG...............Enable to add visual flags for debugging purposes
  */
 
 
@@ -107,9 +123,9 @@
  * inuit.css to style everything we need for a base. Any custom styles SHOULD
  * NOT be added or modified in inuit.css directly, but added via your theme
  * stylesheet as per the open/closed principle:
- * 
+ *
  * csswizardry.com/2012/06/the-open-closed-principle-applied-to-css
- * 
+ *
  * Try not to edit any CSS beyond this point; if you find you need to do so
  * it is a failing of the framework so please tweet at @inuitcss.
  */
@@ -118,6 +134,7 @@
 
 
 
+
 /*------------------------------------*\
     $IMPORTS
 \*------------------------------------*/
@@ -134,5 +151,8 @@
 
 /**
  * Objects and abstractions
+ *
+ * Single-line comment (//) out any objects you do not need in your project.
  */
 @import "partials/objects";
+// @import "example/unnecessary/file";

data/stylesheets/partials/_generic.scss

@@ -6,8 +6,9 @@
 @import "partials/generic/debug";
 @import "partials/generic/helper";
 @import "partials/generic/mixins";
+@import "partials/generic/normalize";
 @import "partials/generic/pull";
 @import "partials/generic/push";
 @import "partials/generic/reset";
 @import "partials/generic/shared";
-@import "partials/generic/widths";
+@import "partials/generic/widths";

data/stylesheets/partials/_objects.scss

@@ -9,7 +9,6 @@
 @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";
@@ -23,4 +22,4 @@
 @import "partials/objects/split";
 @import "partials/objects/sprite";
 @import "partials/objects/stats";
-@import "partials/objects/this-or-this";
+@import "partials/objects/this-or-this";

data/stylesheets/partials/base/_code.scss

@@ -4,9 +4,6 @@
 /**
  * Use an explicit font stack to ensure browsers render correct `line-height`.
  */
-pre,code,samp,kbd{
-    font-family:$code-face;
-}
 pre{
     overflow:auto;
 }
@@ -62,4 +59,4 @@ pre{
     }
             .numbered__numbers code{
                 white-space:pre;
-            }
+            }

data/stylesheets/partials/base/_links.scss

@@ -17,15 +17,6 @@ a:link{
     &:focus{
         text-decoration:underline;
     }
-    &:active{
-        outline:none;
-    }
-    /**
-     * Remove Chrome’s heavy-handed glow.
-     */
-    &:focus{
-        outline:thin dotted;
-    }
 }
 
 

data/stylesheets/partials/base/_smallprint.scss

@@ -3,13 +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.
  */
-small{
-    font-size:0.75em;
-}
 .smallprint,
 .milli{
     @include font-size($milli-size);

data/stylesheets/partials/generic/_mixins.scss

@@ -20,7 +20,7 @@
 /**
  * Create vendor-prefixed CSS in one go, e.g.
  * 
-   `@include vendor(box-sizing, border-box);`
+   `@include vendor(border-radius, 4px);`
  * 
  */
 @mixin vendor($property, $value){
@@ -82,4 +82,4 @@
     white-space:nowrap;
     overflow:hidden;
     text-overflow:ellipsis;
-}
+}

data/stylesheets/partials/generic/_normalize.scss

@@ -0,0 +1,375 @@
+/*! normalize.css v2.0.1 | MIT License | git.io/normalize */
+
+/* ==========================================================================
+   HTML5 display definitions
+   ========================================================================== */
+
+/*
+ * Corrects `block` display not defined in IE 8/9.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section,
+summary {
+    display: block;
+}
+
+/*
+ * Corrects `inline-block` display not defined in IE 8/9.
+ */
+
+audio,
+canvas,
+video {
+    display: inline-block;
+}
+
+/*
+ * Prevents modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+/*
+ * Addresses styling for `hidden` attribute not present in IE 8/9.
+ */
+
+[hidden] {
+    display: none;
+}
+
+/* ==========================================================================
+   Base
+   ========================================================================== */
+
+/*
+ * 1. Sets default font family to sans-serif.
+ * 2. Prevents iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+    font-family: sans-serif; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+    -ms-text-size-adjust: 100%; /* 2 */
+}
+
+/*
+ * Removes default margin.
+ */
+
+body {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Links
+   ========================================================================== */
+
+/*
+ * Addresses `outline` inconsistency between Chrome and other browsers.
+ */
+
+a:focus {
+    outline: thin dotted;
+}
+
+/*
+ * Improves readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+/* ==========================================================================
+   Typography
+   ========================================================================== */
+
+/*
+ * Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
+ * Safari 5, and Chrome.
+ */
+
+h1 {
+    font-size: 2em;
+}
+
+/*
+ * Addresses styling not present in IE 8/9, Safari 5, and Chrome.
+ */
+
+abbr[title] {
+    border-bottom: 1px dotted;
+}
+
+/*
+ * Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
+ */
+
+b,
+strong {
+    font-weight: bold;
+}
+
+/*
+ * Addresses styling not present in Safari 5 and Chrome.
+ */
+
+dfn {
+    font-style: italic;
+}
+
+/*
+ * Addresses styling not present in IE 8/9.
+ */
+
+mark {
+    background: #ff0;
+    color: #000;
+}
+
+
+/*
+ * Corrects font family set oddly in Safari 5 and Chrome.
+ */
+
+code,
+kbd,
+pre,
+samp {
+    font-family: monospace, serif;
+    font-size: 1em;
+}
+
+/*
+ * Improves readability of pre-formatted text in all browsers.
+ */
+
+pre {
+    white-space: pre;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+/*
+ * Sets consistent quote types.
+ */
+
+q {
+    quotes: "\201C" "\201D" "\2018" "\2019";
+}
+
+/*
+ * Addresses inconsistent and variable font size in all browsers.
+ */
+
+small {
+    font-size: 80%;
+}
+
+/*
+ * Prevents `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sup {
+    top: -0.5em;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+/* ==========================================================================
+   Embedded content
+   ========================================================================== */
+
+/*
+ * Removes border when inside `a` element in IE 8/9.
+ */
+
+img {
+    border: 0;
+}
+
+/*
+ * Corrects overflow displayed oddly in IE 9.
+ */
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+/* ==========================================================================
+   Figures
+   ========================================================================== */
+
+/*
+ * Addresses margin not present in IE 8/9 and Safari 5.
+ */
+
+figure {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Forms
+   ========================================================================== */
+
+/*
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+}
+
+/*
+ * 1. Corrects color not being inherited in IE 8/9.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+    border: 0; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/*
+ * 1. Corrects font family not being inherited in all browsers.
+ * 2. Corrects font size not being inherited in all browsers.
+ * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
+ */
+
+button,
+input,
+select,
+textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 2 */
+    margin: 0; /* 3 */
+}
+
+/*
+ * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+button,
+input {
+    line-height: normal;
+}
+
+/*
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Corrects inability to style clickable `input` types in iOS.
+ * 3. Improves usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button; /* 2 */
+    cursor: pointer; /* 3 */
+}
+
+/*
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+input[disabled] {
+    cursor: default;
+}
+
+/*
+ * 1. Addresses box sizing set to `content-box` in IE 8/9.
+ * 2. Removes excess padding in IE 8/9.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/*
+ * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+}
+
+/*
+ * Removes inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/*
+ * Removes inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/*
+ * 1. Removes default vertical scrollbar in IE 8/9.
+ * 2. Improves readability and alignment in all browsers.
+ */
+
+textarea {
+    overflow: auto; /* 1 */
+    vertical-align: top; /* 2 */
+}
+
+/* ==========================================================================
+   Tables
+   ========================================================================== */
+
+/*
+ * Remove most spacing between table cells.
+ */
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}

data/stylesheets/partials/generic/_reset.scss

@@ -5,74 +5,60 @@
  * A more considered reset; more of a restart... 
  * As per: csswizardry.com/2011/10/reset-restarted
  */
-body,
+
+@if $global-border-box == true{
+    /**
+    * Let’s make the box model all nice, shall we…?
+    */
+    *{
+        &,
+        &:before,
+        &:after{
+            @include vendor(box-sizing, border-box);
+        }
+    }
+}
+
+/**
+ * The usual...
+ */
 h1,h2,h3,h4,h5,h6,
 p,blockquote,pre,
 dl,dd,ol,ul,
 form,fieldset,legend,
 table,th,td,caption,
-figure,
 hr{
     margin:0;
     padding:0;
 }
-article,aside,details,figcaption,figure,footer,
-header,hgroup,menu,nav,section{
-    display:block;
-}
-table{
-    border-collapse:collapse;
-    border-spacing:0;
-}
-strong,b,mark{
-    font-weight:bold;
-    font-style:inherit;
-}
-em,i,cite,q,address,dfn,var{
-    font-style:italic;
-    font-weight:inherit;
-}
+
+/**
+ * Give a help cursor to elements that give extra info on `:hover`.
+ */
 abbr[title],dfn[title]{
     cursor:help;
-    border-bottom:1px dotted;
-}
-ins{
-    border-bottom:1px solid;
 }
+
+/**
+ * Remove underlines from potentially troublesome elements.
+ */
 a,u,ins{
     text-decoration:none;
 }
-del,s{
-    text-decoration:line-through;
-}
-img{
-    border:none;
-    font-style:italic;
-}
-input,
-select,option,optgroup,
-textarea{
-    font:inherit;
-}
-
 
 /**
- * Normalize `sup` and `sub` elements.
+ * Apply faux underline via `border-bottom`.
  */
-sub,
-sup{
-    font-size:75%;
-    line-height:0;
-    position:relative;
-    vertical-align:baseline;
-}
-sup{
-    top:-0.5em;
-}
-sub{
-    bottom:-0.25em;
+ins{
+    border-bottom:1px solid;
 }
 
+/**
+ * So that `alt` text is visually offset if images don’t load.
+ */
+img{
+    font-style:italic;
+}
 
 /**
  * Give form elements some cursor interactions...

data/stylesheets/partials/objects/_grids.scss

@@ -93,5 +93,7 @@
     .grid{
         float:left;
         padding-left:$base-spacing-unit +px;
-        @include vendor(box-sizing, border-box);
-    }
+        @if $global-border-box == false{
+            @include vendor(box-sizing, border-box);
+        }
+    }

data/stylesheets/partials/objects/_matrix.scss

@@ -36,7 +36,9 @@
         float:left;
         border-right-width: 1px;
         border-bottom-width:1px;
-        @include vendor(box-sizing, border-box);
+        @if $global-border-box == false{
+            @include vendor(box-sizing, border-box);
+        }
     }
 }
         .matrix__link{

data/templates/project/sass/_vars.scss

@@ -15,13 +15,19 @@
 $debug-mode:        false;
 
 
+/**
+ * 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;
+
+
 /**
  * Base stuff
  */
 $base-font-size:    16!default;
 $base-line-height:  24!default;
 
-$line-height-ratio: $base-line-height / $base-font-size;
 
 /**
  * How big would you like round corners to be by default?
@@ -29,13 +35,6 @@ $line-height-ratio: $base-line-height / $base-font-size;
 $brand-round:        4!default;
 
 
-/**
- * Assign our `$base-line-height` to a new spacing var for more transparency.
- */
-$base-spacing-unit: $base-line-height!default;
-$half-spacing-unit: $base-spacing-unit / 2!default;
-
-
 /**
  * Font-sizes (in pixels). Refer to relevant sections for their implementations.
  */
@@ -43,12 +42,12 @@ $giga-size:         96!default;
 $mega-size:         72!default;
 $kilo-size:         48!default;
 
-$h1-size:           36!default;
-$h2-size:           30!default;
-$h3-size:           24!default;
-$h4-size:           20!default;
-$h5-size:           16!default;
-$h6-size:           14!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;
@@ -62,7 +61,10 @@ $brand-face:        "Helvetica Neue", sans-serif!default;
 
 
 /**
- * We need to supply a full code font-stack in order to combat this:
- * jsfiddle.net/csswizardry/uD6UW
+ * inuit.css will work these next ones out for you.
+ *
+ * Assign our `$base-line-height` to a new spacing var for more transparency.
  */
-$code-face:         Inconsolata, Monaco, Consolas, "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace!default;
+$base-spacing-unit: $base-line-height!default;
+$half-spacing-unit: $base-spacing-unit / 2!default;
+$line-height-ratio: $base-line-height / $base-font-size;

data/templates/project/sass/your-project.scss

@@ -16,15 +16,15 @@
 // She’s all yours, cap’n... Begin importing your stuff here.
 
 html{
-    font:1em/1.5 Georgia, serif;
-    background-color:#fff;
-    color:#333;
+    font: 1em/1.5 Georgia, serif;
+    background-color: #fff;
+    color: #333;
 }
 .wrapper{
-    max-width:960px;
-    padding:0 24px;
-    margin:0 auto;
+    max-width: 960px;
+    padding: 0 24px;
+    margin: 0 auto;
 }
 .footer{
-    margin-bottom:0;
-}​
+    margin-bottom: 0;
+}​

data/templates/project/watch.sh

@@ -4,9 +4,6 @@
 # project’s stylesheet, `cd` to the directory in which this file lives and
 # simply run `sh watch.sh`.
 
-# No minification
-#sass --watch your-project.scss:your-project.css --style expanded
-
-sass --watch your-project.scss:your-project.min.css --style compressed
+compass watch
 
 exit 0

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: compass-inuit
 version: !ruby/object:Gem::Version
-  version: 4.1.5
+  version: 4.2.0
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-12-21 00:00:00.000000000 Z
+date: 2012-12-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -72,6 +72,7 @@ files:
 - stylesheets/partials/generic/_debug.scss
 - stylesheets/partials/generic/_helper.scss
 - stylesheets/partials/generic/_mixins.scss
+- stylesheets/partials/generic/_normalize.scss
 - stylesheets/partials/generic/_pull.scss
 - stylesheets/partials/generic/_push.scss
 - stylesheets/partials/generic/_reset.scss
@@ -85,7 +86,6 @@ files:
 - stylesheets/partials/objects/_flexbox.scss
 - stylesheets/partials/objects/_flyout.scss
 - stylesheets/partials/objects/_greybox.scss
-- stylesheets/partials/objects/_grids-ie7.scss
 - stylesheets/partials/objects/_grids.scss
 - stylesheets/partials/objects/_icon-text.scss
 - stylesheets/partials/objects/_island.scss

data/stylesheets/partials/objects/_grids-ie7.scss

@@ -1,47 +0,0 @@
-/*------------------------------------*\
-    $GRIDS-IE7
-\*------------------------------------*/
-/*
- * To make the grid system work properly in IE7 we need to add a little more
- * markup to account for the fact that it doesn’t support `box-sizing`, e.g.:
- * 
-   <!--[if lte IE 7]><div class=ie7-grid><![endif]-->
-       
-       <div class=gw>
-           
-           <div class="g  one-third"><div class=g__inner>
-               <p>Foo</p>
-           </div></div>
-           
-           <div class="g  one-third"><div class=g__inner>
-               <p>Bar</p>
-           </div></div>
-           
-           <div class="g  one-third"><div class=g__inner>
-               <p>Baz</p>
-           </div></div>
-           
-       </div>
-   
-   <!--[if lte IE 7]></div><![endif]-->
- * 
- * Demo: jsfiddle.net/inuitcss/9Euvj
- * 
- */
-.ie7-grid{
-    overflow:hidden;
-}
-    .ie7-grid .gw,
-    .ie7-grid .grid-wrapper{
-        margin-right:-$half-spacing-unit +px;
-        margin-left: -$half-spacing-unit +px;
-    }
-        .ie7-grid .g,
-        .ie7-grid .grid{
-            padding:0;
-        }
-            .ie7-grid .g__inner,
-            .ie7-grid .grid__inner{
-                padding-right:$half-spacing-unit +px;
-                padding-left: $half-spacing-unit +px;
-            }