polar-express 0.0.2

data/vendor/assets/stylesheets/objects/_breadcrumb.scss

@@ -0,0 +1,63 @@
+@if $use-breadcrumb == true{
+
+/*------------------------------------*\
+    $BREADCRUMB
+\*------------------------------------*/
+/**
+ * Simple breadcrumb styling to apply to (ordered) lists. Extends `.nav`, e.g.:
+ *
+   <ol class="nav  breadcrumb">
+       <li><a href=#>Home</a></li>
+       <li><a href=#>About</a></li>
+       <li><a href=#>The Board</a></li>
+       <li class=current><a href=#>Directors</a></li>
+   </ol>
+ *
+ * Demo: jsfiddle.net/inuitcss/rkAY9
+ *
+ */
+.breadcrumb > li + li:before{
+    content:"\00BB" "\00A0";
+}
+
+
+/**
+ * For denoting a path-like structure, GitHub style, e.g.:
+ *
+   <ol class="nav  breadcrumb--path">
+       <li class=breadcrumb__root><a href=#>inuit.css</a></li>
+       <li><a href=#>inuit.css</a></li>
+       <li><a href=#>partials</a></li>
+       <li class=current><a href=#>objects</a></li>
+   </ol>
+ *
+ */
+.breadcrumb--path > li + li:before{
+    content:"\002F" "\00A0";
+}
+
+
+/**
+ * Assign a delimiter on the fly through a data attribute, e.g.:
+ *
+   <ol class="nav  breadcrumb">
+       <li><a href=#>Home</a></li>
+       <li data-breadcrumb="|"><a href=#>About</a></li>
+       <li data-breadcrumb="|"><a href=#>The Board</a></li>
+       <li data-breadcrumb="|" class=current><a href=#>Directors</a></li>
+   </ol>
+ *
+ */
+.breadcrumb > li + li[data-breadcrumb]:before{
+    content:attr(data-breadcrumb) "\00A0";
+}
+
+
+/**
+ * Denote the root of the tree.
+ */
+.breadcrumb__root{
+    font-weight:bold;
+}
+
+}//endif

data/vendor/assets/stylesheets/objects/_columns.scss

@@ -0,0 +1,22 @@
+@if $use-columns == true{
+
+/*------------------------------------*\
+    $COLUMNS
+\*------------------------------------*/
+/**
+ * Here we can set elements in columns of text using CSS3, e.g.:
+ *
+   <p class=text-cols--2>
+ *
+ * Demo: jsfiddle.net/inuitcss/E26Yd
+ *
+ */
+%text-cols{
+    @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); }
+.text-cols--4    { @extend %text-cols; @include vendor(column-count, 4); }
+.text-cols--5    { @extend %text-cols; @include vendor(column-count, 5); }
+
+}//endif

data/vendor/assets/stylesheets/objects/_flexbox.scss

@@ -0,0 +1,55 @@
+@if $use-flexbox == true{
+
+/*------------------------------------*\
+    $FLEXBOX
+\*------------------------------------*/
+/**
+ * Until we can utilise flexbox natively we can kinda, sorta, attempt to emulate
+ * it, in a way... e.g.:
+ *
+   <header class=flexbox>
+
+       <div class=flexbox__item>
+           <b>Welcome to</b>
+       </div>
+
+       <div class=flexbox__item>
+           <img src="//csswizardry.com/inuitcss/img/logo.jpg" alt="inuit.css">
+       </div>
+
+   </header>
+ *
+ * We can also combine our grid system classes with `.flexbox__item` classes,
+ * e.g.:
+ *
+   <div class=flexbox>
+       <div class="flexbox__item  one-quarter">
+       </div>
+       <div class="flexbox__item  three-quarters">
+       </div>
+   </div>
+ *
+ * It’s pretty poorly named I’m afraid, but it works...
+ *
+ * Demo: jsfiddle.net/inuitcss/ufUh2
+ *
+ */
+.flexbox{
+    display:table;
+    width:100%;
+}
+
+/**
+ * Nasty hack to circumvent Modernizr conflicts.
+ */
+html.flexbox{
+    display:block;
+    width:auto;
+}
+
+    .flexbox__item{
+        display:table-cell;
+        vertical-align:middle;
+    }
+
+}//endif

data/vendor/assets/stylesheets/objects/_flyout.scss

@@ -0,0 +1,63 @@
+@if $use-flyout == true{
+
+/*------------------------------------*\
+    $FLYOUT
+\*------------------------------------*/
+/**
+ * Flyouts are pieces of content that fly out of a parent when said parent is
+ * hovered. They typically appear bottom-left of the parent.
+ *
+   <div class=flyout>
+       Foo
+       <div class=flyout__content>
+           <h1>Lorem</h1>
+           <p>Ipsum</p>
+       </div>
+   </div>
+ *
+ * Extend these objects in your theme stylesheet.
+ *
+ * Demo: jsfiddle.net/inuitcss/B52HG
+ *
+ */
+.flyout,
+.flyout--alt{
+    position:relative;
+    overflow:hidden;
+}
+    .flyout__content{
+        /**
+         * Position the flyouts off-screen. This is typically better than
+         * `display:none;`.
+         */
+        position:absolute;
+        top:100%;
+        left:-99999px;
+    }
+
+    /**
+     * Bring the flyouts into view when you hover their parents.
+     * Two different types of flyout; ‘regular’ (`.flyout`) and ‘alternative’
+     * (`.flyout--alt`).
+     */
+    .flyout:hover,
+    .flyout--alt:hover{
+        overflow:visible;
+    }
+
+    /**
+     * Regular flyouts sit all the way from the top, flush left.
+     */
+    .flyout:hover > .flyout__content{
+        left:0;
+    }
+
+    /**
+     * Alternative flyouts sit all the way from the left, flush top.
+     */
+    .flyout--alt:hover > .flyout__content{
+        top:0;
+        left:100%;
+    }
+
+}//endif

data/vendor/assets/stylesheets/objects/_greybox.scss

@@ -0,0 +1,58 @@
+@if $use-greybox == true{
+
+/*------------------------------------*\
+    $GREYBOX
+\*------------------------------------*/
+/**
+ * Quickly throw together greybox wireframes. Use in conjunction with other
+ * inuit.css objects to create simple greybox prototypes, e.g.:
+ *
+   <div class="island  greybox  greybox--medium">Header</div>
+
+   <ul class="nav  nav--fit  nav--block  greybox">
+       <li><a href=#>Home</a></li>
+       <li><a href=#>About</a></li>
+       <li><a href=#>Portfolio</a></li>
+       <li><a href=#>Contact</a></li>
+   </ul>
+ *
+ * The beauty of combining the greyboxing with inuit.css objects is that any
+ * prototyping can quickly be converted into/used as production code.
+ *
+ * For a more complete prototyping framework, consider Adam Whitcroft’s Proto:
+ * adamwhitcroft.com/proto
+ *
+ * Demo: jsfiddle.net/inuitcss/qCXfh/
+ *
+ */
+.greybox,
+.graybox{
+    @include font-size(12px);
+    font-family:sans-serif;
+    text-align:center;
+    background-color:rgba(0,0,0,0.2);
+    color:#fff;
+}
+    .greybox a,
+    .graybox a{
+        color:#fff;
+        text-decoration:underline;
+    }
+
+
+/**
+ * All greyboxes will occupy 100% of their parent’s width, but to alter their
+ * heights we apply incrementally larger line-heights:
+ */
+.greybox--small,
+.graybox--small     { line-height: 2 * $base-line-height; }
+.greybox--medium,
+.graybox--medium    { line-height: 4 * $base-line-height; }
+.greybox--large,
+.graybox--large     { line-height: 8 * $base-line-height; }
+.greybox--huge,
+.graybox--huge      { line-height:16 * $base-line-height; }
+.greybox--gigantic,
+.graybox--gigantic  { line-height:32 * $base-line-height; }
+
+}//endif

data/vendor/assets/stylesheets/objects/_grids.scss

@@ -0,0 +1,69 @@
+@if $use-grids == true{
+
+/*------------------------------------*\
+    $GRIDS
+\*------------------------------------*/
+/**
+ * Fluid and nestable grid system, e.g.:
+ *
+   <div class="grid">
+
+       <div class="grid__item  one-third">
+           <p>One third grid</p>
+       </div><!--
+
+    --><div class="grid__item  two-thirds">
+           <p>Two thirds grid</p>
+       </div><!--
+
+    --><div class="grid__item  one-half">
+           <p>One half grid</p>
+       </div><!--
+
+    --><div class="grid__item  one-quarter">
+           <p>One quarter grid</p>
+       </div><!--
+
+    --><div class="grid__item  one-quarter">
+           <p>One quarter grid</p>
+       </div>
+
+   </div>
+ *
+ * Demo: jsfiddle.net/inuitcss/CLYUC
+ *
+ */
+
+
+/**
+ * Grid wrapper
+ */
+.grid{
+    margin-left:-$base-spacing-unit;
+    list-style:none;
+    margin-bottom:0;
+}
+
+
+    /**
+     * Very infrequently occuring grid wrappers as children of grid wrappers.
+     */
+    .grid > .grid{
+        margin-left:0;
+    }
+
+
+    /**
+     * Grid
+     */
+    .grid__item{
+        display:inline-block;
+        width:100%;
+        padding-left:$base-spacing-unit;
+        vertical-align:top;
+        @if $global-border-box == false{
+            @include vendor(box-sizing, border-box);
+        }
+    }
+
+}//endif

data/vendor/assets/stylesheets/objects/_icon-text.scss

@@ -0,0 +1,40 @@
+@if $use-icon-text == true{
+
+/*------------------------------------*\
+    $ICON-TEXT
+\*------------------------------------*/
+/**
+ * For text-links etc that have an icon with them. Sometimes whitespace would
+ * suffice in creating a gap between the icon and text, for example:
+ *
+   <a href=#>
+       <i class="s  s--help"></i> Help &amp; support
+   </a>
+ *
+ * However we will sometimes want a larger, explicity set gap:
+   <a href=# class=icon-text>
+       <i class="icon-text__icon  s  s--help"></i>Help &amp; support
+   </a>
+ *
+ * Demo: jsfiddle.net/inuitcss/Q6Lbf
+ *
+ */
+.icon-text > .icon-text__icon{
+    margin-right:$half-spacing-unit / 2;
+}
+
+
+/**
+ * We can also reverse the direction of the margin for icons that appear to the
+ * right of the text content, thus:
+ *
+   <a href=# class=icon-text--rev>
+       Help &amp; support<i class="icon-text__icon  s  s--help"></i>
+   </a>
+ *
+ */
+.icon-text--rev > .icon-text__icon{
+    margin-left:$half-spacing-unit / 2;
+}
+
+}//endif

data/vendor/assets/stylesheets/objects/_island.scss

@@ -0,0 +1,38 @@
+@if $use-island == true{
+
+/*------------------------------------*\
+    $ISLAND
+\*------------------------------------*/
+/**
+ * Simple, boxed off content, as per: csswizardry.com/2011/10/the-island-object
+ * E.g.:
+ *
+   <div class=island>
+       I am boxed off.
+   </div>
+ *
+ * Demo: jsfiddle.net/inuitcss/u8pV3
+ *
+ */
+.island,
+.islet{
+    display:block;
+    @extend .cf;
+}
+.island{
+    padding:$base-spacing-unit;
+}
+    .island > :last-child,
+    .islet > :last-child{
+        margin-bottom:0;
+    }
+
+
+/**
+ * Just like `.island`, only smaller.
+ */
+.islet{
+    padding:$half-spacing-unit;
+}
+
+}//endif

data/vendor/assets/stylesheets/objects/_link-complex.scss

@@ -0,0 +1,32 @@
+@if $use-link-complex == true{
+
+/*------------------------------------*\
+    $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;
+    }
+
+}//endif

data/vendor/assets/stylesheets/objects/_lozenges.scss

@@ -0,0 +1,46 @@
+@if $use-lozenges == true{
+
+/*------------------------------------*\
+    $LOZENGES
+\*------------------------------------*/
+/**
+ * Create pill- and lozenge-like runs of text, e.g.:
+ *
+   <p>This <span class=pill>here</span> is a pill!</p>
+ *
+   <p>This <span class=loz>here</span> is also a lozenge!</p>
+ *
+ * Pills have fully rounded ends, lozenges have only their corners rounded.
+ *
+ * Demo: jsfiddle.net/inuitcss/N3pGm
+ *
+ */
+.pill{
+    display:inline-block;
+    /**
+     * These numbers set in ems mean that, at its narrowest, a lozenge will be
+     * 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) * 1em;
+    padding-right:($line-height-ratio * 0.166667) * 1em;
+    padding-left: ($line-height-ratio * 0.166667) * 1em;
+              /* =1.50em */
+    text-align:center;
+    background-color:$base-ui-color;
+    color:#fff; /* Override this color in your theme stylesheet */
+
+    /**
+     * Normally we’d use border-radius:100%; but instead here we just use an
+     * overly large number; `border-radius:100%;` would create an oval on
+     * non-square elements whereas we just want to round the ends of an element.
+     */
+    border-radius:100px;
+}
+
+.loz{
+    @extend .pill;
+    border-radius:$brand-round;
+}
+
+}//endif

data/vendor/assets/stylesheets/objects/_marginalia.scss

@@ -0,0 +1,52 @@
+@if $use-marginalia == true{
+
+/*------------------------------------*\
+    $MARGINALIA
+\*------------------------------------*/
+/**
+ * Marginalia are, per definition, notes in the margin of a document. The
+ * `marginalia__body` class can be applied to all kinds of content, like text or
+ * images, and is joined by a width class:
+ *
+   <div class="marginalia">
+       <div class="marginalia__body  desk-one-fifth"></div>
+   </div>
+ *
+ * Demo: jsfiddle.net/inuitcss/AemkH
+ *
+ */
+.marginalia{
+    @include font-size($milli-size);
+}
+
+/**
+ * Wait for a certain breakpoint to trigger ‘proper' marginalia. Up to this point,
+ * marginalia are inline with the other text.
+ */
+@media (min-width: $desk-start){
+    .marginalia{
+        position:relative;
+    }
+
+    .marginalia__body,
+    .marginalia__body--right{
+        position:absolute;
+    }
+
+    .marginalia__body{
+      right:100%;
+      padding-right:$base-spacing-unit;
+      text-align:right;
+    }
+
+    /**
+     * Align marginalia to the right of the text.
+     */
+    .marginalia__body--right{
+        left:100%;
+        padding-left:$base-spacing-unit;
+        text-align:left;
+    }
+}
+
+}//endif

data/vendor/assets/stylesheets/objects/_matrix.scss

@@ -0,0 +1,89 @@
+@if $use-matrix == true{
+
+/*------------------------------------*\
+    $MATRIX
+\*------------------------------------*/
+/**
+ * Create a grid of items out of a single list, e.g.:
+ *
+   <ul class="matrix  three-cols">
+       <li class=all-cols>Lorem</li>
+       <li>Ipsum <a href=#>dolor</a></li>
+       <li><a href=# class=matrix__link>Sit</a></li>
+       <li>Amet</li>
+       <li class=all-cols>Consectetuer</li>
+   </ul>
+ *
+ * Extend this object in your theme stylesheet.
+ *
+ * Demo: jsfiddle.net/inuitcss/Y2zrU
+ *
+ */
+.matrix{
+    @extend .block-list;
+    border-left-width:1px;
+    @extend .cf;
+
+     > li{
+        float:left;
+        border-right-width:1px;
+        @if $global-border-box == false{
+            @include vendor(box-sizing, border-box);
+        }
+    }
+}
+        .matrix__link{
+            @extend .block-list__link;
+        }
+
+
+/**
+ * The `.multi-list` object is a lot like the `.matrix` object only without the
+ * blocky borders and padding.
+ *
+   <ul class="multi-list  four-cols">
+       <li>Lorem</li>
+       <li>Ipsum</li>
+       <li>Dolor</li>
+       <li>Sit</li>
+   </ul>
+ *
+ * Demo: jsfiddle.net/inuitcss/Y2zrU
+ *
+ */
+.multi-list{
+    list-style:none;
+    margin-left:0;
+    @extend .cf;
+}
+    .multi-list > li{
+        float:left;
+    }
+
+
+    /**
+     * Apply these classes alongside the `.matrix` or `.multi-list` classes on
+     * lists to determine how wide their columns are.
+     */
+    .two-cols > li{
+        width:50%;
+    }
+    .three-cols > li{
+        width:33.333%;
+    }
+    .four-cols > li{
+        width:25%;
+    }
+    .five-cols > li{
+        width:20%;
+    }
+    /**
+     * Unfortunately we have to qualify this selector in order to bring its
+     * specificity above the `.[number]-cols > li` selectors above.
+     */
+    .matrix > .all-cols,
+    .multi-list > .all-cols{
+        width:100%;
+    }
+
+}//endif

data/vendor/assets/stylesheets/objects/_media.scss

@@ -0,0 +1,60 @@
+@if $use-media == true{
+
+/*------------------------------------*\
+    $MEDIA
+\*------------------------------------*/
+/**
+ * Place any image- and text-like content side-by-side, as per:
+ * stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
+ * E.g.:
+ *
+   <div class=media>
+       <img src=http://placekitten.com/200/300 alt="" class=media__img>
+       <p class=media__body>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+       sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+   </div>
+ *
+ * Demo: jsfiddle.net/inuitcss/cf4Qs
+ *
+ */
+.media{
+    display:block;
+    @extend .cf;
+}
+    .media__img{
+        float:left;
+        margin-right:$base-spacing-unit;
+    }
+    /**
+     * Reversed image location (right instead of left).
+     */
+    .media__img--rev{
+        float:right;
+        margin-left:$base-spacing-unit;
+    }
+
+        .media__img img,
+        .media__img--rev img{
+            display:block;
+        }
+
+    .media__body{
+        overflow:hidden;
+    }
+        .media__body,
+        .media__body > :last-child{
+            margin-bottom:0;
+        }
+
+
+    /**
+     * `.img`s in `.islet`s need an appropriately sized margin.
+     */
+    .islet .media__img{
+        margin-right:$half-spacing-unit;
+    }
+    .islet .media__img--rev{
+        margin-left:$half-spacing-unit;
+    }
+
+}//endif