compass-inuit 4.1.0 → 4.1.1

data/stylesheets/partials/base/_headings.scss

@@ -0,0 +1,58 @@
+/*------------------------------------*\
+    $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/stylesheets/partials/base/_images.scss

@@ -0,0 +1,10 @@
+/*------------------------------------*\
+    $IMAGES
+\*------------------------------------*/
+img{
+    max-width:100%;
+    height:auto;
+}
+figure > img{
+    display:block;
+}

data/stylesheets/partials/base/_links.scss

@@ -0,0 +1,32 @@
+/*------------------------------------*\
+    $LINKS
+\*------------------------------------*/
+/**
+ * Say no to negative hovers, as per: csswizardry.com/2011/05/on-negative-hovers
+ */
+a{
+    /**
+     * Set colors etc in your theme stylesheet.
+     */
+}
+    a:hover,
+    a:active,
+    a:focus{
+        text-decoration:underline;
+    }
+
+/**
+ * ‘Current’ states, e.g.:
+ *
+   <ul class=nav>
+       <li><a href=#>Home</a></li>
+       <li><a href=#>About</a></li>
+       <li class=current><a href=#>Portfolio</a></li>
+       <li><a href=#>Contact</a></li>
+   </ul>
+ *
+ */
+.current a{
+    cursor:text;
+    text-decoration:underline;
+}

data/stylesheets/partials/base/_lists.scss

@@ -0,0 +1,10 @@
+/*------------------------------------*\
+    $LISTS
+\*------------------------------------*/
+/**
+ * Remove vertical spacing from nested lists.
+ */
+li > ul,
+li > ol{
+    margin-bottom:0;
+}

data/stylesheets/partials/base/_main.scss

@@ -0,0 +1,7 @@
+/*------------------------------------*\
+    $MAIN
+\*------------------------------------*/
+html{
+    font:($base-font-size / 16 +em)/($base-line-height / $base-font-size) serif;
+    overflow-y:scroll;
+}

data/stylesheets/partials/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{
+    font-size:1.125em;
+}

data/stylesheets/partials/base/_quotes.scss

@@ -0,0 +1,45 @@
+/*------------------------------------*\
+    $QUOTES
+\*------------------------------------*/
+/**
+ * Big up @boblet: html5doctor.com/blockquote-q-cite
+ */
+q{ quotes:"‘" "’" "“" "”"; }
+
+q:before{ content:"‘"; content:open-quote; }
+q:after{ content:"’"; content:close-quote; }
+
+q q:before{ content: "“"; content: open-quote; }
+q q:after{ content: "”"; content: close-quote; }
+
+blockquote{ quotes: "“" "”"; }
+blockquote p:before{ content: "“"; content: open-quote; }
+blockquote p:after{ content: ""; content: no-close-quote; }
+blockquote p:last-of-type:after{ content: "”"; 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.4em;
+}
+    blockquote p:last-of-type{
+        margin-bottom:0;
+    }
+
+.source{
+    display:block;
+    text-indent:0;
+}
+    .source:before{
+        content:"—";
+    }

data/stylesheets/partials/base/_smallprint.scss

@@ -0,0 +1,21 @@
+/*------------------------------------*\
+    $SMALLPRINT
+\*------------------------------------*/
+/**
+ * A series of classes for setting tiny type; for use in smallprint etc.
+ *
+ * `small` is relative to whatever its parent is, `.milli` and `.micro` are
+ * absolute.
+ */
+small{
+    font-size:0.75em;
+}
+.smallprint,
+.milli{
+    @include font-size($milli-size);
+    line-height:1;      /* 12px */
+}
+.micro{
+    @include font-size($micro-size);
+    line-height:1.2;    /* 12px */
+}

data/stylesheets/partials/base/_tables.scss

@@ -0,0 +1,150 @@
+/*------------------------------------*\
+    $TABLES
+\*------------------------------------*/
+/**
+ * We have a lot at our disposal for making very complex table constructs, e.g.:
+ *
+   <table class="bordered-table striped-table data-table">
+       <colgroup>
+           <col class=t10>
+           <col class=t10>
+           <col class=t10>
+           <col>
+       </colgroup>
+       <thead>
+           <tr>
+               <th colspan=3>Foo</th>
+               <th>Bar</th>
+           </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 +px;
+    @media screen and (min-width:480px){
+        padding:$half-spacing-unit +px;
+    }
+    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
+ */
+.bordered-table th,
+.bordered-table td{
+    border:1px solid #ccc; /* Override this color in your theme stylesheet */
+}
+.bordered-table thead tr:last-child th{
+    border-bottom-width:2px;
+}
+.bordered-table tbody tr th:last-of-type{
+    border-right-width:2px;
+}
+.bordered-table th:empty,
+.bordered-table td:empty{
+    border:none;
+}
+
+/**
+ * Striped tables
+ */
+.striped-table tbody tr:nth-of-type(odd){
+    background-color:#ffc; /* Override this color in your theme stylesheet */
+}
+
+/**
+ * Data table
+ */
+.data-table{
+    font:12px/1.5 sans-serif;
+}

data/stylesheets/partials/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/stylesheets/partials/generic/_clearfix.scss

@@ -0,0 +1,19 @@
+/*------------------------------------*\
+    $CLEARFIX
+\*------------------------------------*/
+/**
+ * Micro clearfix, as per: nicolasgallagher.com/micro-clearfix-hack
+ * Extend the clearfix class with Sass to avoid the `.cf` class appearing over
+ * and over in your markup.
+ */
+.cf{
+    zoom:1;
+    &:before,
+    &:after{
+        content:"";
+        display:table;
+    }
+    &:after{
+        clear:both;
+    }
+}

data/stylesheets/partials/generic/_helper.scss

@@ -0,0 +1,69 @@
+/*------------------------------------*\
+    $HELPER
+\*------------------------------------*/
+/**
+ * A series of helper classes to use arbitrarily. Only use a helper class if an
+ * element/component doesn’t already have a class to which you could apply this
+ * styling, e.g. if you need to float `.main-nav` left then add `float:left;` to
+ * that ruleset as opposed to adding the `.fl` class to the markup.
+ */
+.fr { float:right; }
+.fl { float:left; }
+
+.text-center,
+.text-centre{
+    text-align:center;
+}
+
+/**
+ * Pull items full width of `.island` parents.
+ */
+.full-bleed{
+    margin-right:-$base-spacing-unit +px;
+    margin-left: -$base-spacing-unit +px;
+}
+.islet > .full-bleed{
+    margin-right:-($half-spacing-unit) +px;
+    margin-left: -($half-spacing-unit) +px;
+}
+
+/**
+ * Add a help cursor to any element that gives the user extra information on
+ * `:hover`.
+ */
+.informative{
+    cursor:help;
+}
+
+/**
+ * Align items to the right where they imply progression/movement forward, e.g.:
+ *
+   <p class=proceed><a href=#>Read more...</a></p>
+ *
+ */
+.proceed{
+    text-align:right;
+}
+
+/**
+ * Add a right-angled quote to links that imply movement, e.g.:
+ *
+   <a href=# class=go>Read more</a>
+ *
+ */
+.go:after{
+    content:" »";
+}
+
+/**
+ * Apply capital case to an element (usually a `strong`).
+ */
+.caps{
+    text-transform:uppercase;
+}
+
+/**
+ * Hide content off-screen without resorting to `display:none;`
+ */
+.accessibility              { position:absolute; left:-99999px; }
+[dir=rtl] .accessibility    { left:auto; right:-99999px; }