polar-express 0.0.2

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

@@ -0,0 +1,60 @@
+/*------------------------------------*\
+    $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;
+}
+
+
+/**
+ * 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/_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,8 @@
+/*------------------------------------*\
+    $MAIN
+\*------------------------------------*/
+html{
+    font:#{($base-font-size/16px)*1em}/#{$line-height-ratio} $base-font-family;
+    overflow-y:scroll;
+    min-height:100%;
+}

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

@@ -0,0 +1,11 @@
+/*------------------------------------*\
+    $PARAGRAPHS
+\*------------------------------------*/
+/**
+ * The `.lede` class is used to make the introductory text (usually a paragraph)
+ * of a document slightly larger.
+ */
+.lede,
+.lead{
+    @include font-size($base-font-size * 1.125);
+}

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

@@ -0,0 +1,96 @@
+/*------------------------------------*\
+    $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.
+     */
+    text-indent:-0.41em;
+
+    p:last-of-type{
+        margin-bottom:0;
+    }
+}
+
+.source{
+    display:block;
+    text-indent:0;
+
+    &:before{
+        content:"\2014";
+    }
+}

data/vendor/assets/stylesheets/base/_smallprint.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:$base-spacing-unit / 4;
+    @media screen and (min-width:480px){
+        padding:$half-spacing-unit;
+    }
+    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;
+}

data/vendor/assets/stylesheets/component.json

@@ -0,0 +1,5 @@
+{
+    "name": "inuit.css",
+    "version": "5.0.1",
+    "dependencies": {}
+}

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

@@ -0,0 +1,18 @@
+/*------------------------------------*\
+    $BRAND
+\*------------------------------------*/
+/**
+ * `.brand` is a quick and simple way to apply your brand face and/or color to
+ * any element using a handy helper class.
+ */
+.brand{
+    font-family:$brand-face +!important;
+    color:$brand-color +!important;
+}
+.brand-face{
+    font-family:$brand-face +!important;
+}
+.brand-color,
+.brand-colour{
+    color:$brand-color +!important;
+}

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

@@ -0,0 +1,15 @@
+/*------------------------------------*\
+    $CLEARFIX
+\*------------------------------------*/
+/**
+ * Micro clearfix, as per: css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
+ * Extend the clearfix class with Sass to avoid the `.cf` class appearing over
+ * and over in your markup.
+ */
+.cf{
+    &:after{
+        content:"";
+        display:table;
+        clear:both;
+    }
+}

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

@@ -0,0 +1,168 @@
+@if $debug-mode == true{
+/*------------------------------------*\
+    $DEBUG
+\*------------------------------------*/
+/**
+ * Enable this stylesheet to visually detect any improperly nested or
+ * potentially invalid markup, or any potentially inaccessible code.
+ *
+ * Red          ==      definite error
+ * Yellow       ==      double-check
+ * None         ==      should be fine
+ *
+ * Please note that this method of checking markup quality should not be relied
+ * upon entirely. Validate your markup!
+ */
+
+
+/**
+ * Are there any empty elements in your page?
+ */
+:empty{
+    outline:5px solid yellow;
+}
+
+
+/**
+ * Images require `alt` attributes, empty `alt`s are fine but should be
+ * double-checked, no `alt` is bad and is flagged red.
+ */
+img{
+    outline:5px solid red;
+}
+img[alt]{
+    outline:none;
+}
+img[alt=""]{
+    outline:5px solid yellow;
+}
+
+
+/**
+ * Links sometimes, though not always, benefit from `title` attributes. Links
+ * without are never invalid but it’s a good idea to check.
+ */
+a{
+    outline:5px solid yellow;
+}
+a[title]{
+    outline:none;
+}
+
+
+/**
+ * Double-check any links whose `href` is something questionable.
+ */
+a[href="#"],
+a[href*="javascript"]{
+    outline:5px solid yellow;
+}
+
+
+/**
+ * The `target` attribute ain’t too nice...
+ */
+a[target]{
+    outline:5px solid yellow;
+}
+
+
+/**
+ * Ensure any lists only contain `li`s as children.
+ */
+ul,
+ol{
+    > *:not(li){
+        outline:5px solid red;
+    }
+}
+
+
+/**
+ * It’s always nice to give `th`s `scope` attributes.
+ */
+th{
+    outline:5px solid yellow;
+}
+th[scope]{
+    outline:none;
+}
+
+
+/**
+ * `tr`s as children of `table`s ain’t great, did you need a `thead`/`tbody`?
+ */
+table > tr{
+    outline:5px solid yellow;
+}
+
+
+/**
+ * `tfoot` needs to come *before* `tbody`.
+ */
+tbody + tfoot{
+    outline:5px solid yellow;
+}
+
+
+/**
+ * Forms require `action` attributes
+ */
+form{
+    outline:5px solid red;
+}
+form[action]{
+    outline:none;
+}
+
+
+/**
+ * Various form-field types have required attributes. `input`s need `type`
+ * attributes, `textarea`s need `rows` and `cols` attributes and submit buttons
+ * need a `value` attribute.
+ */
+textarea,
+input{
+    outline:5px solid red;
+}
+input[type]{
+    outline:none;
+}
+textarea[rows][cols]{
+    outline:none;
+}
+input[type=submit]{
+    outline:5px solid red;
+}
+input[type=submit][value]{
+    outline:none;
+}
+
+
+/**
+ * Avoid inline styles where possible.
+ */
+[style]{
+	outline:5px solid yellow;
+}
+
+
+/**
+ * You should avoid using IDs for CSS, is this doing any styling?
+ */
+[id]{
+	outline:5px solid yellow;
+}
+
+
+/**
+ * Are you using the grid system correctly?
+ */
+.gw > :not(.g),
+.grid-wrapper > :not(.grid),
+.gw--rev > :not(.g),
+.grid-wrapper--rev > :not(.grid){
+	outline:5px solid red;
+}
+
+}/* endif */