compass-inuit 4.4.1 → 4.5.4

data/stylesheets/_compass-inuit.scss

@@ -1,150 +1,4 @@
-/*------------------------------------*\
-    INUIT.CSS
-\*------------------------------------*/
-/*!*
- * 
- * inuitcss.com -- @inuitcss -- @csswizardry
- * 
- */
-/**
- * inuit.css acts as a base stylesheet which you should extend with your own
- * theme stylesheet.
- * 
- * 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 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
- * to any section simply run a find for $[SECTION-TITLE].
- * 
- * Most objects and abstractions come with a chunk of markup that you should be
- * 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 floats remain cleared.
- */
-
-
-
-
-
-/*------------------------------------*\
-    $CONTENTS
-\*------------------------------------*/
-/**
- * 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..........
- * SMALLPRINT..........Smaller text elements like `small`
- * QUOTES..............
- * CODE................
- * LINKS...............
- * LISTS...............
- * 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
- * MARGINALIA..........Simple marginalia content
- * ISLAND..............Boxed off content
- * BLOCK-LIST..........Blocky lists of content
- * MATRIX..............Gridded lists
- * SPLIT...............A simple split-in-two object
- * THIS-OR-THIS........Options object
- * LINK-COMPLEX........
- * FLYOUT..............Flyout-on-hover object
- * ARROWS..............CSS arrows
- * SPRITE..............Generic spriting element
- * 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
- */
-
-
-
-
-
-/*------------------------------------*\
-    $WARNING
-\*------------------------------------*/
-/*
- * inuit.css, being an OO framework, works in keeping with the open/closed
- * principle. The variables you set previously are now being used throughout
- * 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.
- */
-
-
-
-
-
-
-/*------------------------------------*\
-    $IMPORTS
-\*------------------------------------*/
-
 @import "partials/generic";
-
 @import "partials/base";
-
 @import "partials/objects";
- 
 @import "partials/helpers";

data/stylesheets/partials/_objects.scss

@@ -1,7 +1,5 @@
 /**
  * Objects and abstractions
- *
- * Single-line comment (//) out any objects you do not need in your project.
  */
 @import "partials/objects/grids";
 @import "partials/objects/flexbox";
@@ -16,7 +14,6 @@
 @import "partials/objects/block-list";
 @import "partials/objects/matrix";
 @import "partials/objects/split";
-// @import "example/unnecessary/file";
 @import "partials/objects/this-or-this";
 @import "partials/objects/link-complex";
 @import "partials/objects/flyout";
@@ -28,3 +25,4 @@
 @import "partials/objects/rules";
 @import "partials/objects/stats";
 @import "partials/objects/greybox";
+@import "partials/objects/batch";

data/stylesheets/partials/base/_images.scss

@@ -5,8 +5,10 @@
  * Demo: jsfiddle.net/inuitcss/yMtur
  */
 img{
-    max-width:100%;
-    height:auto;
+    @if $flexible-media == true{
+        max-width:100%;
+        height:auto;
+    }
 }
 
 

data/stylesheets/partials/base/_quotes.scss

@@ -1,21 +1,69 @@
 /*------------------------------------*\
     $QUOTES
 \*------------------------------------*/
+/**
+ * If English quotes are set in `_vars.scss`, define them here.
+ */
+@if $english-quotes == true{
+    $open-quote:    “;
+    $close-quote:   ”;
+}
+
+
 /**
  * Big up @boblet: html5doctor.com/blockquote-q-cite
  */
-q{ quotes:"‘" "’" "“" "”"; }
 
-q:before{ content:"‘"; content:open-quote; }
-q:after{ content:"’"; content:close-quote; }
+/**
+ * Inline quotes.
+ */
+q{
+    quotes:"‘" "’" "#{$open-quote}" "#{$close-quote}";
+
+    &:before{
+        content:"‘";
+        content:open-quote;
+    }
+    &:after{
+        content:"’";
+        content:close-quote;
+    }
+
+    q:before{
+        content:"“";
+        content:open-quote;
+    }
+    q:after{
+        content:"”";
+        content:close-quote;
+    }
+}
 
-q q:before{ content: "“"; content: open-quote; }
-q q:after{ content: "”"; content: close-quote; }
+blockquote{
+    quotes:"#{$open-quote}" "#{$close-quote}";
+    
+    p:before{
+        content:"#{$open-quote}";
+        content:open-quote;
+    }
+    p:after{
+        content:"";
+        content:no-close-quote;
+    }
+    p:last-of-type:after{
+        content:"#{$close-quote}";
+        content:close-quote;
+    }
 
-blockquote{ quotes: "“" "”"; }
-blockquote p:before{ content: "“"; content: open-quote; }
-blockquote p:after{ content: ""; content: no-close-quote; }
-blockquote p:last-of-type:after{ content: "”"; content: close-quote; }
+    q:before{
+        content:"‘";
+        content:open-quote;
+    }
+    q:after{
+        content:"’";
+        content:close-quote;
+    }
+}
 
 
 /**
@@ -31,7 +79,7 @@ blockquote{
     /**
      * .4em is roughly equal to the width of the opening “ that we wish to hang.
      */
-    text-indent:-0.4em;
+    text-indent:-0.41em;
     
     p:last-of-type{
         margin-bottom:0;
@@ -45,4 +93,4 @@ blockquote{
     &:before{
         content:"—";
     }
-}
+}

data/stylesheets/partials/generic/_normalize.scss

@@ -1,4 +1,4 @@
-/*! normalize.css v2.0.1 | MIT License | git.io/normalize */
+/* normalize.css v2.0.1 | MIT License | git.io/normalize */
 
 /* ==========================================================================
    HTML5 display definitions

data/stylesheets/partials/objects/_batch.scss

@@ -0,0 +1,15 @@
+/*------------------------------------*\
+    $BATCH
+\*------------------------------------*/
+@if $batch == true{
+    @font-face{
+        font-family:Batch;
+        src:url('assets/batch/batch.eot');
+        src:url('assets/batch/batch.eot?#iefix') format('embedded-opentype'),
+            url('assets/batch/batch.woff') format('woff'),
+            url('assets/batch/batch.ttf') format('truetype'),
+            url('assets/batch/batch.svg#batchregular') format('svg');
+        font-weight:normal;
+        font-style:normal;
+    }
+}

data/stylesheets/partials/objects/_sprite.scss

@@ -13,15 +13,11 @@
  * 
  * Giving an element a class of `.i` 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-char` attribute and the `:after` pseudo-element, e.g.:
+ * through a `data-icon` attribute and the `:after` pseudo-element, e.g.:
  * 
-   <a href=# class=i data-char="C">Add to favorites</a>
+   <a href=#><i class=i data-icon="&#xF000;"></i> View your favourites</a>
  * 
- * or
- * 
-   <a href=#><i class=i data-char="C"></i> View your favourites</a>
- * 
- * Where ‘C’ might map to a star in your particular font.
+ * Where ‘&#xF000;’ might map to a star in your particular font.
  * 
  * These all require extension in your theme stylesheet.
  * 
@@ -31,17 +27,15 @@
 .s,
 .i{
     display:inline-block;
-    /**
-     * The typical size of most icons. Override in your theme stylesheet.
-     */
-    width: 16px;
-    height:16px;
+    line-height:1;
     position:relative;
+    vertical-align:middle;
     zoom:1;
     /**
-     * So using `.i` on `i` elements doesn’t make a visual difference.
+     * So using `.i` 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.
      */
@@ -49,7 +43,11 @@
 }
 .s{
     background-image:url(/path/to/your/sprite.png);
-    vertical-align:middle;
+    /**
+     * The typical size of most icons. Override in your theme stylesheet.
+     */
+    width: 16px;
+    height:16px;
     top:-1px;
 
     /*
@@ -67,11 +65,28 @@
     }
 }
 
-
+/**
+ * Set up Batch icon font
+ */
 .i{
-    vertical-align:top;
-    
-    &:after{
-        content:attr(data-char);
+    @if $batch == true{
+        font-family:Batch;
+    }
+    font-size:16px;
+    /**
+     * Place the icon in a box the exact same dimensions as the icon itself.
+     */
+    width:1em;
+    height:1em;
+
+    &:before{
+        content:attr(data-icon);
     }
 }
+
+/**
+ * Icon size modifiers.
+ */
+.i--large   { font-size:32px; }
+.i--huge    { font-size:64px; }
+.i--natural { font-size:inherit; }