inuit_rails 0.0.2

data/vendor/assets/stylesheets/generic/_push.scss

@@ -0,0 +1,147 @@
+/*------------------------------------*\
+    $PUSH
+\*------------------------------------*/
+/**
+ * Push classes, to move grid items over to the right by certain amounts.
+ */
+
+@mixin push-setup($namespace: "") {
+
+    /**
+     * Whole
+     */
+    .push--#{$namespace}one-whole           { left:100%; }
+
+
+    /**
+     * Halves
+     */
+    .push--#{$namespace}one-half            { left:50%; }
+
+
+    /**
+     * Thirds
+     */
+    .push--#{$namespace}one-third           { left:33.333%; }
+    .push--#{$namespace}two-thirds          { left:66.666%; }
+
+
+    /**
+     * Quarters
+     */
+    .push--#{$namespace}one-quarter         { left:25%; }
+    .push--#{$namespace}two-quarters        { @extend .push--#{$namespace}one-half; }
+    .push--#{$namespace}three-quarters      { left:75%; }
+
+
+    /**
+     * Fifths
+     */
+    .push--#{$namespace}one-fifth           { left:20%; }
+    .push--#{$namespace}two-fifths          { left:40%; }
+    .push--#{$namespace}three-fifths        { left:60%; }
+    .push--#{$namespace}four-fifths         { left:80%; }
+
+
+    /**
+     * Sixths
+     */
+    .push--#{$namespace}one-sixth           { left:16.666%; }
+    .push--#{$namespace}two-sixths          { @extend .push--#{$namespace}one-third; }
+    .push--#{$namespace}three-sixths        { @extend .push--#{$namespace}one-half; }
+    .push--#{$namespace}four-sixths         { @extend .push--#{$namespace}two-thirds; }
+    .push--#{$namespace}five-sixths         { left:83.333%; }
+
+
+    /**
+     * Eighths
+     */
+    .push--#{$namespace}one-eighth          { left:12.5%; }
+    .push--#{$namespace}two-eighths         { @extend .push--#{$namespace}one-quarter; }
+    .push--#{$namespace}three-eighths       { left:37.5%; }
+    .push--#{$namespace}four-eighths        { @extend .push--#{$namespace}one-half; }
+    .push--#{$namespace}five-eighths        { left:62.5%; }
+    .push--#{$namespace}six-eighths         { @extend .push--#{$namespace}three-quarters; }
+    .push--#{$namespace}seven-eighths       { left:87.5%; }
+
+
+    /**
+     * Tenths
+     */
+    .push--#{$namespace}one-tenth           { left:10%; }
+    .push--#{$namespace}two-tenths          { @extend .push--#{$namespace}one-fifth; }
+    .push--#{$namespace}three-tenths        { left:30%; }
+    .push--#{$namespace}four-tenths         { @extend .push--#{$namespace}two-fifths; }
+    .push--#{$namespace}five-tenths         { @extend .push--#{$namespace}one-half; }
+    .push--#{$namespace}six-tenths          { @extend .push--#{$namespace}three-fifths; }
+    .push--#{$namespace}seven-tenths        { left:70%; }
+    .push--#{$namespace}eight-tenths        { @extend .push--#{$namespace}four-fifths; }
+    .push--#{$namespace}nine-tenths         { left:90%; }
+
+
+    /**
+     * Twelfths
+     */
+    .push--#{$namespace}one-twelfth         { left:8.333%; }
+    .push--#{$namespace}two-twelfths        { @extend .push--#{$namespace}one-sixth; }
+    .push--#{$namespace}three-twelfths      { @extend .push--#{$namespace}one-quarter; }
+    .push--#{$namespace}four-twelfths       { @extend .push--#{$namespace}one-third; }
+    .push--#{$namespace}five-twelfths       { left:41.666% }
+    .push--#{$namespace}six-twelfths        { @extend .push--#{$namespace}one-half; }
+    .push--#{$namespace}seven-twelfths      { left:58.333%; }
+    .push--#{$namespace}eight-twelfths      { @extend .push--#{$namespace}two-thirds; }
+    .push--#{$namespace}nine-twelfths       { @extend .push--#{$namespace}three-quarters; }
+    .push--#{$namespace}ten-twelfths        { @extend .push--#{$namespace}five-sixths; }
+    .push--#{$namespace}eleven-twelfths     { left:91.666%; }
+}
+
+@if $push == true{
+
+@include push-setup();
+
+/**
+ * Not a particularly great selector, but the DRYest way to do things.
+ */
+[class*="push--"]{ position:relative; }
+
+@if $palm-push == true{
+
+    @include media-query(palm){
+        @include push-setup("palm-");
+    }
+
+}
+
+@if $lap-push == true{
+
+    @include media-query(lap){
+        @include push-setup("lap-");
+    }
+
+}
+
+@if $lap-and-up-push == true{
+
+    @include media-query(lap-and-up){
+        @include push-setup("lap-and-up-");
+    }
+
+}
+
+@if $portable-push == true{
+
+    @include media-query(portable){
+        @include push-setup("portable-");
+    }
+
+}
+
+@if $desk-push == true{
+
+    @include media-query(desk){
+        @include push-setup("desk-");
+    }
+
+}
+
+}//endif

data/vendor/assets/stylesheets/generic/_reset.scss

@@ -0,0 +1,85 @@
+/*------------------------------------*\
+    $RESET
+\*------------------------------------*/
+/**
+ * A more considered reset; more of a restart...
+ * As per: csswizardry.com/2011/10/reset-restarted
+ */
+
+@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,
+hr{
+    margin:0;
+    padding:0;
+}
+
+/**
+ * Give a help cursor to elements that give extra info on `:hover`.
+ */
+abbr[title],dfn[title]{
+    cursor:help;
+}
+
+/**
+ * Remove underlines from potentially troublesome elements.
+ */
+u,ins{
+    text-decoration:none;
+}
+
+/**
+ * Apply faux underline via `border-bottom`.
+ */
+ins{
+    border-bottom:1px solid;
+}
+
+/**
+ * So that `alt` text is visually offset if images don’t load.
+ *
+ * webkit browser like chrome can not display text in alt
+ */
+img{
+    font-style:italic;
+}
+
+/**
+ * Give form elements some cursor interactions...
+
+ * Set outline as none for browsers consistent
+ * Firefox do not set outline
+ */
+label,
+input,
+textarea,
+button,
+select,
+option{
+    cursor:pointer;
+}
+    .text-input:active,
+    .text-input:focus,
+    textarea:active,
+    textarea:focus{
+        cursor:text;
+        outline:none;
+    }

data/vendor/assets/stylesheets/generic/_shared.scss

@@ -0,0 +1,61 @@
+/*------------------------------------*\
+    $SHARED
+\*------------------------------------*/
+/**
+ * Where `margin-bottom` is concerned, this value will be the same as the
+ * base line-height. This allows us to keep a consistent vertical rhythm.
+ * As per: csswizardry.com/2012/06/single-direction-margin-declarations
+ */
+/**
+ * Base elements
+ */
+h1,h2,h3,h4,h5,h6,hgroup,
+ul,ol,dl,
+blockquote,p,address,
+table,
+fieldset,figure,
+pre,
+/**
+ * Objects and abstractions
+ */
+%generic-margin-bottom,
+.media,
+.island,
+.islet{
+    margin-bottom:$base-spacing-unit;
+    margin-bottom:($base-spacing-unit / $base-font-size)*1rem;
+
+    .islet &{
+        margin-bottom:$half-spacing-unit;
+        margin-bottom:($half-spacing-unit / $base-font-size)*1rem;
+    }
+}
+
+
+/**
+ * Doubled up `margin-bottom` helper class.
+ */
+.landmark{
+    margin-bottom:$double-spacing-unit;
+    margin-bottom:($double-spacing-unit / $base-font-size)*1rem;
+}
+
+
+/**
+ * `hr` elements only take up a few pixels, so we need to give them special
+ * treatment regarding vertical rhythm.
+ */
+hr{
+    margin-bottom:$base-spacing-unit - 2px;
+    margin-bottom:(($base-spacing-unit - 2px) / $base-font-size)*1rem;
+}
+
+
+/**
+ * Where `margin-left` is concerned we want to try and indent certain elements
+ * by a consistent amount. Define that amount once, here.
+ */
+ul,ol,dd{
+    margin-left:$double-spacing-unit;
+    margin-left:($double-spacing-unit / $base-font-size)*1rem;
+}

data/vendor/assets/stylesheets/generic/_widths.scss

@@ -0,0 +1,158 @@
+/*------------------------------------*\
+    $WIDTHS
+\*------------------------------------*/
+/**
+ * Sizes in human readable format. These are used in conjunction with other
+ * objects and abstractions found in inuit.css, most commonly the grid system
+ * and faux flexbox.
+ *
+ * We have a mixin to generate our widths and their breakpoint-specific
+ * variations.
+ */
+
+@mixin grid-setup($namespace: "") {
+    /**
+    * Whole
+    */
+    .#{$namespace}one-whole         { width:100%; }
+
+
+    /**
+    * Halves
+    */
+    .#{$namespace}one-half          { width:50%; }
+
+
+    /**
+    * Thirds
+    */
+    .#{$namespace}one-third         { width:33.333%; }
+    .#{$namespace}two-thirds        { width:66.666%; }
+
+
+    /**
+    * Quarters
+    */
+    .#{$namespace}one-quarter       { width:25%; }
+    .#{$namespace}two-quarters      { @extend .#{$namespace}one-half; }
+    .#{$namespace}three-quarters    { width:75%; }
+
+
+    /**
+    * Fifths
+    */
+    .#{$namespace}one-fifth         { width:20%; }
+    .#{$namespace}two-fifths        { width:40%; }
+    .#{$namespace}three-fifths      { width:60%; }
+    .#{$namespace}four-fifths       { width:80%; }
+
+
+    /**
+    * Sixths
+    */
+    .#{$namespace}one-sixth         { width:16.666%; }
+    .#{$namespace}two-sixths        { @extend .#{$namespace}one-third; }
+    .#{$namespace}three-sixths      { @extend .#{$namespace}one-half; }
+    .#{$namespace}four-sixths       { @extend .#{$namespace}two-thirds; }
+    .#{$namespace}five-sixths       { width:83.333%; }
+
+
+    /**
+    * Eighths
+    */
+    .#{$namespace}one-eighth        { width:12.5%; }
+    .#{$namespace}two-eighths       { @extend .#{$namespace}one-quarter; }
+    .#{$namespace}three-eighths     { width:37.5%; }
+    .#{$namespace}four-eighths      { @extend .#{$namespace}one-half; }
+    .#{$namespace}five-eighths      { width:62.5%; }
+    .#{$namespace}six-eighths       { @extend .#{$namespace}three-quarters; }
+    .#{$namespace}seven-eighths     { width:87.5%; }
+
+
+    /**
+    * Tenths
+    */
+    .#{$namespace}one-tenth         { width:10%; }
+    .#{$namespace}two-tenths        { @extend .#{$namespace}one-fifth; }
+    .#{$namespace}three-tenths      { width:30%; }
+    .#{$namespace}four-tenths       { @extend .#{$namespace}two-fifths; }
+    .#{$namespace}five-tenths       { @extend .#{$namespace}one-half; }
+    .#{$namespace}six-tenths        { @extend .#{$namespace}three-fifths; }
+    .#{$namespace}seven-tenths      { width:70%; }
+    .#{$namespace}eight-tenths      { @extend .#{$namespace}four-fifths; }
+    .#{$namespace}nine-tenths       { width:90%; }
+
+
+    /**
+    * Twelfths
+    */
+    .#{$namespace}one-twelfth       { width:8.333%; }
+    .#{$namespace}two-twelfths      { @extend .#{$namespace}one-sixth; }
+    .#{$namespace}three-twelfths    { @extend .#{$namespace}one-quarter; }
+    .#{$namespace}four-twelfths     { @extend .#{$namespace}one-third; }
+    .#{$namespace}five-twelfths     { width:41.666% }
+    .#{$namespace}six-twelfths      { @extend .#{$namespace}one-half; }
+    .#{$namespace}seven-twelfths    { width:58.333%; }
+    .#{$namespace}eight-twelfths    { @extend .#{$namespace}two-thirds; }
+    .#{$namespace}nine-twelfths     { @extend .#{$namespace}three-quarters; }
+    .#{$namespace}ten-twelfths      { @extend .#{$namespace}five-sixths; }
+    .#{$namespace}eleven-twelfths   { width:91.666%; }
+}
+
+@include grid-setup();
+
+
+
+/**
+ * If you have set `$responsive` to ‘true’ in `_vars.scss` then you now have
+ * access to these classes. You can define at which breakpoint you’d like an
+ * element to be a certain size, e.g.:
+ *
+ * `<div class="g  one-quarter  lap-one-half  palm-one-whole"> ... </div>`
+ *
+ * This would create a `div` that, at ‘desktop’ sizes, takes up a quarter of the
+ * horizontal space, a half of that space at ‘tablet’ sizes, and goes full width
+ * at ‘mobile’ sizes.
+ *
+ * Demo: jsfiddle.net/inuitcss/WS4Ge
+ *
+ */
+
+@if $responsive == true{
+
+@include media-query(palm){
+    @include grid-setup("palm-");
+}
+
+@include media-query(lap){
+    @include grid-setup("lap-");
+}
+
+@include media-query(lap-and-up){
+    @include grid-setup("lap-and-up-");
+}
+
+@include media-query(portable){
+    @include grid-setup("portable-");
+}
+
+@include media-query(desk){
+    @include grid-setup("desk-");
+}
+
+
+/**
+ * If you have set the additional `$responsive-extra` variable to ‘true’ in
+ * `_vars.scss` then you now have access to the following class available to
+ * accomodate much larger screen resolutions.
+ */
+
+@if $responsive-extra == true{
+
+@include media-query(desk-wide){
+    @include grid-setup("desk-wide-");
+}
+
+}
+
+} /* endif */