inuit_rails 0.0.2

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

@@ -0,0 +1,80 @@
+@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{
+    position:relative;
+    overflow:hidden;
+}
+    %flyout__content{
+        /**
+         * Position the flyouts off-screen. This is typically better than
+         * `display:none;`.
+         * for screen reader and display: none element can not be measured
+         */
+        position:absolute;
+        top:100%;
+    }
+    .flyout__content--right,
+    .flyout__content--bottom-left,
+    .flyout__content--bottom-right{
+        @extend %flyout__content;
+    }
+
+    .flyout__content--right,
+    .flyout__content--bottom-left{
+        left: -99999px;
+    }
+
+    .flyout__content--bottom-right{
+        right: -99999px;
+    }
+
+.flyout:hover{
+    &{
+        overflow:visible;
+    }
+
+    /**
+     * Alternative flyouts sit all the way from the left, flush top.
+     */
+    > .flyout__content--right{
+        top:0;
+        left:100%;
+    }
+
+    /**
+     * Regular flyouts sit all the way from the top, flush left.
+     */
+    > .flyout__content--bottom-left{
+        left:0;
+    }
+
+    /**
+     * flyouts sit all the way from the top, flush right.
+     */
+    > .flyout__content--bottom-right{
+        right:0;
+    }
+}
+
+}//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,76 @@
+@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{
+        @extend %inline_block_fix;
+        width:100%;
+        /**
+         * use padding not margin because padding is included in border box
+         */
+        padding-left:$base-spacing-unit;
+        vertical-align:top;
+        /**
+         * use border box no matter what
+         * best solution when mix pixel with percent
+         */
+        @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{
+    @extend %inline_block_fix;
+    /**
+     * 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