inuit_rails 0.0.2

data/vendor/assets/stylesheets/base/_headings.scss

@@ -0,0 +1,45 @@
+/*------------------------------------*\
+    $HEADINGS
+\*------------------------------------*/
+/**
+ * As per: csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css
+ *
+ * When we define a heading we also define a corresponding class to go with it.
+ * This allows us to apply, say, `class=alpha` to a `h3`; a double-stranded
+ * heading hierarchy.
+ */
+h1,.alpha{
+    @include font-size($h1-size);
+}
+h2,.beta{
+    @include font-size($h2-size);
+}
+h3,.gamma{
+    @include font-size($h3-size);
+}
+h4,.delta{
+    @include font-size($h4-size);
+}
+h5,.epsilon{
+    @include font-size($h5-size);
+}
+h6,.zeta{
+    @include font-size($h6-size);
+}
+
+
+/**
+ * Heading groups and generic any-heading class.
+ * To target any heading of any level simply apply a class of `.hN`, e.g.:
+ *
+   <hgroup>
+       <h1 class=hN>inuit.css</h1>
+       <h2 class=hN>Best. Framework. Ever!</h2>
+   </hgroup>
+ *
+ */
+.hN{
+}
+hgroup .hN{
+    margin-bottom:0;
+}

data/vendor/assets/stylesheets/base/_images.scss

@@ -0,0 +1,73 @@
+/*------------------------------------*\
+    $IMAGES
+\*------------------------------------*/
+/**
+ * Demo: jsfiddle.net/inuitcss/yMtur
+ */
+/**
+ * Fluid images.
+ */
+img{
+    max-width:100%;
+}
+
+
+/**
+ * Non-fluid images if you specify `width` and/or `height` attributes.
+ */
+img[width],
+img[height]{
+    max-width:none;
+}
+
+
+/**
+ * Rounded images.
+ */
+.img--round { border-radius:$brand-round; }
+
+
+/**
+ * Image placement variations.
+ */
+.img--right{
+    float:right;
+    margin-bottom:$base-spacing-unit;
+    margin-left:$base-spacing-unit;
+}
+.img--left{
+    float:left;
+    margin-right:$base-spacing-unit;
+    margin-bottom:$base-spacing-unit;
+}
+.img--center{
+    display:block;
+    margin-right:auto;
+    margin-bottom:$base-spacing-unit;
+    margin-left:auto;
+}
+
+
+/**
+ * Keep your images on your baseline.
+ *
+ * Please note, these will not work too nicely with fluid images and will
+ * distort when resized below a certain width. Use with caution.
+ */
+.img--short{
+    height:5 * $base-spacing-unit;
+}
+.img--medium{
+    height:10 * $base-spacing-unit;
+}
+.img--tall{
+    height:15 * $base-spacing-unit;
+}
+
+
+/**
+ * Images in `figure` elements.
+ */
+figure > img{
+    display:block;
+}

data/vendor/assets/stylesheets/base/_lists.scss

@@ -0,0 +1,19 @@
+/*------------------------------------*\
+    $LISTS
+\*------------------------------------*/
+/**
+ * Remove vertical spacing from nested lists.
+ */
+li{
+    > ul,
+    > ol{
+         margin-bottom:0;
+     }
+}
+
+/**
+ * Have a numbered `ul` without the semantics implied by using an `ol`.
+ */
+/*ul*/.numbered-list{
+    list-style-type:decimal;
+}

data/vendor/assets/stylesheets/base/_main.scss

@@ -0,0 +1,13 @@
+/*------------------------------------*\
+    $MAIN
+\*------------------------------------*/
+
+/**
+ * set overflow-y: scroll to prevent page center jump
+ * css-tricks.com/snippets/css/force-vertical-scrollbar/
+*/
+html{
+    font:#{($base-font-size/16px)*1em}/#{$line-height-ratio} $base-font-family;
+    overflow-y:scroll;
+    min-height:100%;
+}

data/vendor/assets/stylesheets/base/_massive_print.scss

@@ -0,0 +1,16 @@
+/*------------------------------------*\
+    $MASSIVEPRINT
+\*------------------------------------*/
+/**
+ * A series of classes for setting massive type; for use in heroes, mastheads,
+ * promos, etc.
+ */
+.giga{
+    @include font-size($giga-size);
+}
+.mega{
+    @include font-size($mega-size);
+}
+.kilo{
+    @include font-size($kilo-size);
+}

data/vendor/assets/stylesheets/base/_quotes.scss

@@ -0,0 +1,98 @@
+/*------------------------------------*\
+    $QUOTES
+\*------------------------------------*/
+/**
+ * If English quotes are set in `_vars.scss`, define them here.
+ */
+@if $english-quotes == true{
+    $open-quote:    \201C;
+    $close-quote:   \201D;
+}
+
+
+/**
+ * Big up @boblet: html5doctor.com/blockquote-q-cite
+ */
+
+/**
+ * Inline quotes.
+ */
+q{
+    quotes:"\2018" "\2019" "#{$open-quote}" "#{$close-quote}";
+
+    &:before{
+        content:"\2018";
+        content:open-quote;
+    }
+    &:after{
+        content:"\2019";
+        content:close-quote;
+    }
+
+    q:before{
+        content:"\201C";
+        content:open-quote;
+    }
+    q:after{
+        content:"\201D";
+        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;
+    }
+
+    q:before{
+        content:"\2018";
+        content:open-quote;
+    }
+    q:after{
+        content:"\2019";
+        content:close-quote;
+    }
+}
+
+
+/**
+ *
+   <blockquote>
+       <p>Insanity: doing the same thing over and over again and expecting
+       different results.</p>
+       <b class=source>Albert Einstein</b>
+   </blockquote>
+ *
+ */
+blockquote{
+    /**
+     * .4em is roughly equal to the width of the opening “ that we wish to hang.
+     *
+     * inuit use .41 which I think is over left
+     */
+    text-indent:-0.32em;
+
+    p:last-of-type{
+        margin-bottom:0;
+    }
+}
+
+.source{
+    display:block;
+    text-indent:0;
+
+    &:before{
+        content:"\2014";
+    }
+}

data/vendor/assets/stylesheets/base/_small_print.scss

@@ -0,0 +1,13 @@
+/*------------------------------------*\
+    $SMALLPRINT
+\*------------------------------------*/
+/**
+ * A series of classes for setting tiny type; for use in smallprint etc.
+ */
+.smallprint,
+.milli{
+    @include font-size($milli-size);
+}
+.micro{
+    @include font-size($micro-size);
+}

data/vendor/assets/stylesheets/base/_tables.scss

@@ -0,0 +1,163 @@
+/*------------------------------------*\
+    $TABLES
+\*------------------------------------*/
+/**
+ * We have a lot at our disposal for making very complex table constructs, e.g.:
+ *
+   <table class="table--bordered  table--striped  table--data">
+       <colgroup>
+           <col class=t10>
+           <col class=t10>
+           <col class=t10>
+           <col>
+       </colgroup>
+       <thead>
+           <tr>
+               <th colspan=3>Foo</th>
+               <th>Bar</th>
+           </tr>
+           <tr>
+               <th>Lorem</th>
+               <th>Ipsum</th>
+               <th class=numerical>Dolor</th>
+               <th>Sit</th>
+           </tr>
+       </thead>
+       <tbody>
+           <tr>
+               <th rowspan=3>Sit</th>
+               <td>Dolor</td>
+               <td class=numerical>03.788</td>
+               <td>Lorem</td>
+           </tr>
+           <tr>
+               <td>Dolor</td>
+               <td class=numerical>32.210</td>
+               <td>Lorem</td>
+           </tr>
+           <tr>
+               <td>Dolor</td>
+               <td class=numerical>47.797</td>
+               <td>Lorem</td>
+           </tr>
+           <tr>
+               <th rowspan=2>Sit</th>
+               <td>Dolor</td>
+               <td class=numerical>09.640</td>
+               <td>Lorem</td>
+           </tr>
+           <tr>
+               <td>Dolor</td>
+               <td class=numerical>12.117</td>
+               <td>Lorem</td>
+           </tr>
+       </tbody>
+   </table>
+ *
+ */
+table{
+    width:100%;
+}
+th,
+td{
+    padding:$half-spacing-unit;
+    @include media-query(palm){
+      padding:$base-spacing-unit / 4;
+    }
+    text-align:left;
+}
+
+
+/**
+ * Cell alignments
+ */
+[colspan]{
+    text-align:center;
+}
+[colspan="1"]{
+    text-align:left;
+}
+[rowspan]{
+    vertical-align:middle;
+}
+[rowspan="1"]{
+    vertical-align:top;
+}
+.numerical{
+    text-align:right;
+}
+
+/**
+ * In the HTML above we see several `col` elements with classes whose numbers
+ * represent a percentage width for that column. We leave one column free of a
+ * class so that column can soak up the effects of any accidental breakage in
+ * the table.
+ */
+.t5     { width: 5% }
+.t10    { width:10% }
+.t12    { width:12.5% }     /* 1/8 */
+.t15    { width:15% }
+.t20    { width:20% }
+.t25    { width:25% }       /* 1/4 */
+.t30    { width:30% }
+.t33    { width:33.333% }   /* 1/3 */
+.t35    { width:35% }
+.t37    { width:37.5% }     /* 3/8 */
+.t40    { width:40% }
+.t45    { width:45% }
+.t50    { width:50% }       /* 1/2 */
+.t55    { width:55% }
+.t60    { width:60% }
+.t62    { width:62.5% }     /* 5/8 */
+.t65    { width:65% }
+.t66    { width:66.666% }   /* 2/3 */
+.t70    { width:70% }
+.t75    { width:75% }       /* 3/4*/
+.t80    { width:80% }
+.t85    { width:85% }
+.t87    { width:87.5% }     /* 7/8 */
+.t90    { width:90% }
+.t95    { width:95% }
+
+
+/**
+ * Bordered tables
+ */
+.table--bordered{
+
+    th,
+    td{
+        border:1px solid $base-ui-color;
+
+        &:empty{
+            border:none;
+        }
+    }
+
+    thead tr:last-child th{
+        border-bottom-width:2px;
+    }
+
+    tbody tr th:last-of-type{
+        border-right-width:2px;
+    }
+}
+
+
+/**
+ * Striped tables
+ */
+.table--striped{
+
+    tbody tr:nth-of-type(odd){
+        background-color:#ffc; /* Override this color in your theme stylesheet */
+    }
+}
+
+
+/**
+ * Data table
+ */
+.table--data{
+    font:12px/1.5 sans-serif;
+}