Update to site
This commit is contained in:
Paulus Schoutsen
parent
3345fa5897
commit
b0bdfe2fe9
244 changed files with 11618 additions and 12 deletions
19
sass/inuitcss/generic/_brand.scss
Normal file
19
sass/inuitcss/generic/_brand.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$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;
|
||||
}
|
||||
16
sass/inuitcss/generic/_clearfix.scss
Normal file
16
sass/inuitcss/generic/_clearfix.scss
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$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;
|
||||
}
|
||||
}
|
||||
169
sass/inuitcss/generic/_debug.scss
Normal file
169
sass/inuitcss/generic/_debug.scss
Normal file
|
|
@ -0,0 +1,169 @@
|
|||
@charset "UTF-8";
|
||||
@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 */
|
||||
185
sass/inuitcss/generic/_helper.scss
Normal file
185
sass/inuitcss/generic/_helper.scss
Normal file
|
|
@ -0,0 +1,185 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$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 `.float--left` class to the markup.
|
||||
*
|
||||
* A lot of these classes carry `!important` as you will always want them to win
|
||||
* out over other selectors.
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* Add/remove floats
|
||||
*/
|
||||
.float--right { float:right!important; }
|
||||
.float--left { float:left !important; }
|
||||
.float--none { float:none !important; }
|
||||
|
||||
|
||||
/**
|
||||
* Text alignment
|
||||
*/
|
||||
.text--left { text-align:left !important; }
|
||||
.text--center { text-align:center!important; }
|
||||
.text--right { text-align:right !important; }
|
||||
|
||||
|
||||
/**
|
||||
* Font weights
|
||||
*/
|
||||
.weight--light { font-weight:300!important; }
|
||||
.weight--normal { font-weight:400!important; }
|
||||
.weight--semibold { font-weight:600!important; }
|
||||
|
||||
|
||||
/**
|
||||
* Add/remove margins
|
||||
*/
|
||||
.push { margin: $base-spacing-unit!important; }
|
||||
.push--top { margin-top: $base-spacing-unit!important; }
|
||||
.push--right { margin-right: $base-spacing-unit!important; }
|
||||
.push--bottom { margin-bottom:$base-spacing-unit!important; }
|
||||
.push--left { margin-left: $base-spacing-unit!important; }
|
||||
.push--ends { margin-top: $base-spacing-unit!important; margin-bottom:$base-spacing-unit!important; }
|
||||
.push--sides { margin-right: $base-spacing-unit!important; margin-left: $base-spacing-unit!important; }
|
||||
|
||||
.push-half { margin: $half-spacing-unit!important; }
|
||||
.push-half--top { margin-top: $half-spacing-unit!important; }
|
||||
.push-half--right { margin-right: $half-spacing-unit!important; }
|
||||
.push-half--bottom { margin-bottom:$half-spacing-unit!important; }
|
||||
.push-half--left { margin-left: $half-spacing-unit!important; }
|
||||
.push-half--ends { margin-top: $half-spacing-unit!important; margin-bottom:$half-spacing-unit!important; }
|
||||
.push-half--sides { margin-right: $half-spacing-unit!important; margin-left: $half-spacing-unit!important; }
|
||||
|
||||
.flush { margin: 0!important; }
|
||||
.flush--top { margin-top: 0!important; }
|
||||
.flush--right { margin-right: 0!important; }
|
||||
.flush--bottom { margin-bottom:0!important; }
|
||||
.flush--left { margin-left: 0!important; }
|
||||
.flush--ends { margin-top: 0!important; margin-bottom:0!important; }
|
||||
.flush--sides { margin-right: 0!important; margin-left: 0!important; }
|
||||
|
||||
|
||||
/**
|
||||
* Add/remove paddings
|
||||
*/
|
||||
.soft { padding: $base-spacing-unit!important; }
|
||||
.soft--top { padding-top: $base-spacing-unit!important; }
|
||||
.soft--right { padding-right: $base-spacing-unit!important; }
|
||||
.soft--bottom { padding-bottom:$base-spacing-unit!important; }
|
||||
.soft--left { padding-left: $base-spacing-unit!important; }
|
||||
.soft--ends { padding-top: $base-spacing-unit!important; padding-bottom:$base-spacing-unit!important; }
|
||||
.soft--sides { padding-right: $base-spacing-unit!important; padding-left: $base-spacing-unit!important; }
|
||||
|
||||
.soft-half { padding: $half-spacing-unit!important; }
|
||||
.soft-half--top { padding-top: $half-spacing-unit!important; }
|
||||
.soft-half--right { padding-right: $half-spacing-unit!important; }
|
||||
.soft-half--bottom { padding-bottom:$half-spacing-unit!important; }
|
||||
.soft-half--left { padding-left: $half-spacing-unit!important; }
|
||||
.soft-half--ends { padding-top: $half-spacing-unit!important; padding-bottom:$half-spacing-unit!important; }
|
||||
.soft-half--sides { padding-right: $half-spacing-unit!important; padding-left: $half-spacing-unit!important; }
|
||||
|
||||
.hard { padding: 0!important; }
|
||||
.hard--top { padding-top: 0!important; }
|
||||
.hard--right { padding-right: 0!important; }
|
||||
.hard--bottom { padding-bottom:0!important; }
|
||||
.hard--left { padding-left: 0!important; }
|
||||
.hard--ends { padding-top: 0!important; padding-bottom:0!important; }
|
||||
.hard--sides { padding-right: 0!important; padding-left: 0!important; }
|
||||
|
||||
|
||||
/**
|
||||
* Pull items full width of `.island` parents.
|
||||
*/
|
||||
.full-bleed{
|
||||
margin-right:-$base-spacing-unit!important;
|
||||
margin-left: -$base-spacing-unit!important;
|
||||
|
||||
.islet &{
|
||||
margin-right:-($half-spacing-unit)!important;
|
||||
margin-left: -($half-spacing-unit)!important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Add a help cursor to any element that gives the user extra information on
|
||||
* `:hover`.
|
||||
*/
|
||||
.informative{
|
||||
cursor:help!important;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Mute an object by reducing its opacity.
|
||||
*/
|
||||
.muted{
|
||||
opacity:0.5!important;
|
||||
filter:alpha(opacity = 50)!important;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 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!important;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Add a right-angled quote to links that imply movement, e.g.:
|
||||
*
|
||||
<a href=# class=go>Read more</a>
|
||||
*
|
||||
*/
|
||||
.go:after{
|
||||
content:"\00A0" "\00BB"!important;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Apply capital case to an element (usually a `strong`).
|
||||
*/
|
||||
.caps{
|
||||
text-transform:uppercase!important;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Hide content off-screen without resorting to `display:none;`, also provide
|
||||
* breakpoint specific hidden elements.
|
||||
*/
|
||||
@mixin accessibility{
|
||||
border:0!important;
|
||||
clip:rect(0 0 0 0)!important;
|
||||
height:1px!important;
|
||||
margin:-1px!important;
|
||||
overflow:hidden!important;
|
||||
padding:0!important;
|
||||
position: absolute!important;
|
||||
width:1px!important;
|
||||
}
|
||||
.accessibility,
|
||||
.visuallyhidden{
|
||||
@include accessibility;
|
||||
}
|
||||
@if $responsive{
|
||||
@each $state in palm, lap, lap-and-up, portable, desk, desk-wide{
|
||||
@include media-query(#{$state}){
|
||||
.accessibility--#{$state},
|
||||
.visuallyhidden--#{$state}{
|
||||
@include accessibility;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
329
sass/inuitcss/generic/_mixins.scss
Normal file
329
sass/inuitcss/generic/_mixins.scss
Normal file
|
|
@ -0,0 +1,329 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$MIXINS
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Create a fully formed type style (sizing and vertical rhythm) by passing in a
|
||||
* single value, e.g.:
|
||||
*
|
||||
`@include font-size(10px);`
|
||||
*
|
||||
* Thanks to @redclov3r for the `line-height` Sass:
|
||||
* twitter.com/redclov3r/status/250301539321798657
|
||||
*/
|
||||
@mixin font-size($font-size, $line-height:true){
|
||||
font-size:$font-size;
|
||||
font-size:($font-size / $base-font-size)*1rem;
|
||||
@if $line-height == true{
|
||||
line-height:ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Style any number of headings in one fell swoop, e.g.:
|
||||
*
|
||||
.foo{
|
||||
@include headings(1, 3){
|
||||
color:#BADA55;
|
||||
}
|
||||
}
|
||||
*
|
||||
* With thanks to @lar_zzz, @paranoida, @rowanmanning and ultimately
|
||||
* @thierrylemoulec for refining and improving my initial mixin.
|
||||
*/
|
||||
@mixin headings($from: 1, $to: 6){
|
||||
%base-heading {
|
||||
@content
|
||||
}
|
||||
|
||||
@if $from >= 1 and $to <= 6{
|
||||
@for $i from $from through $to{
|
||||
h#{$i}{
|
||||
@extend %base-heading;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Create vendor-prefixed CSS in one go, e.g.
|
||||
*
|
||||
`@include vendor(border-radius, 4px);`
|
||||
*
|
||||
*/
|
||||
@mixin vendor($property, $value...){
|
||||
-webkit-#{$property}:$value;
|
||||
-moz-#{$property}:$value;
|
||||
-ms-#{$property}:$value;
|
||||
-o-#{$property}:$value;
|
||||
#{$property}:$value;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Create CSS keyframe animations for all vendors in one go, e.g.:
|
||||
*
|
||||
.foo{
|
||||
@include vendor(animation, shrink 3s);
|
||||
}
|
||||
|
||||
@include keyframe(shrink){
|
||||
from{
|
||||
font-size:5em;
|
||||
}
|
||||
}
|
||||
*
|
||||
* Courtesy of @integralist: twitter.com/integralist/status/260484115315437569
|
||||
*/
|
||||
@mixin keyframe ($animation-name){
|
||||
@-webkit-keyframes $animation-name{
|
||||
@content;
|
||||
}
|
||||
|
||||
@-moz-keyframes $animation-name{
|
||||
@content;
|
||||
}
|
||||
|
||||
@-ms-keyframes $animation-name{
|
||||
@content;
|
||||
}
|
||||
|
||||
@-o-keyframes $animation-name{
|
||||
@content;
|
||||
}
|
||||
|
||||
@keyframes $animation-name{
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Force overly long spans of text to truncate, e.g.:
|
||||
*
|
||||
`@include truncate(100%);`
|
||||
*
|
||||
* Where `$truncation-boundary` is a united measurement.
|
||||
*/
|
||||
@mixin truncate($truncation-boundary){
|
||||
max-width:$truncation-boundary;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* CSS arrows!!! But... before you read on, you might want to grab a coffee...
|
||||
*
|
||||
* This mixin creates a CSS arrow on a given element. We can have the arrow
|
||||
* appear in one of 12 locations, thus:
|
||||
*
|
||||
* 01 02 03
|
||||
* +------------------+
|
||||
* 12 | | 04
|
||||
* | |
|
||||
* 11 | | 05
|
||||
* | |
|
||||
* 10 | | 06
|
||||
* +------------------+
|
||||
* 09 08 07
|
||||
*
|
||||
* You pass this position in along with a desired arrow color and optional
|
||||
* border color, for example:
|
||||
*
|
||||
* `@include arrow(top, left, red)`
|
||||
*
|
||||
* for just a single, red arrow, or:
|
||||
*
|
||||
* `@include arrow(bottom, center, red, black)`
|
||||
*
|
||||
* which will create a red triangle with a black border which sits at the bottom
|
||||
* center of the element. Call the mixin thus:
|
||||
*
|
||||
.foo{
|
||||
background-color:#BADA55;
|
||||
border:1px solid #ACE;
|
||||
@include arrow(top, left, #BADA55, #ACE);
|
||||
}
|
||||
*
|
||||
*/
|
||||
@mixin arrow($arrow-edge, $arrow-location, $arrow-color, $border-color: $arrow-color){
|
||||
|
||||
@if $arrow-edge == top{
|
||||
|
||||
@extend %arrow--top;
|
||||
|
||||
&:before{
|
||||
border-bottom-color:$border-color!important;
|
||||
}
|
||||
|
||||
&:after{
|
||||
border-bottom-color:$arrow-color!important;
|
||||
}
|
||||
|
||||
@if $arrow-location == left{
|
||||
@extend %arrow--left;
|
||||
}
|
||||
|
||||
@if $arrow-location == center{
|
||||
@extend %arrow--center;
|
||||
}
|
||||
|
||||
@if $arrow-location == right{
|
||||
@extend %arrow--right;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@if $arrow-edge == right{
|
||||
|
||||
@extend %arrow--far;
|
||||
|
||||
&:before{
|
||||
border-left-color:$border-color!important;
|
||||
}
|
||||
|
||||
&:after{
|
||||
border-left-color:$arrow-color!important;
|
||||
}
|
||||
|
||||
@if $arrow-location == top{
|
||||
@extend %arrow--upper;
|
||||
}
|
||||
|
||||
@if $arrow-location == center{
|
||||
@extend %arrow--middle;
|
||||
}
|
||||
|
||||
@if $arrow-location == bottom{
|
||||
@extend %arrow--lower;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@if $arrow-edge == bottom{
|
||||
|
||||
@extend %arrow--bottom;
|
||||
|
||||
&:before{
|
||||
border-top-color:$border-color!important;
|
||||
}
|
||||
|
||||
&:after{
|
||||
border-top-color:$arrow-color!important;
|
||||
}
|
||||
|
||||
@if $arrow-location == left{
|
||||
@extend %arrow--left;
|
||||
}
|
||||
|
||||
@if $arrow-location == center{
|
||||
@extend %arrow--center;
|
||||
}
|
||||
|
||||
@if $arrow-location == right{
|
||||
@extend %arrow--right;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@if $arrow-edge == left{
|
||||
|
||||
@extend %arrow--near;
|
||||
|
||||
&:before{
|
||||
border-right-color:$border-color!important;
|
||||
}
|
||||
|
||||
&:after{
|
||||
border-right-color:$arrow-color!important;
|
||||
}
|
||||
|
||||
@if $arrow-location == top{
|
||||
@extend %arrow--upper;
|
||||
}
|
||||
|
||||
@if $arrow-location == center{
|
||||
@extend %arrow--middle;
|
||||
}
|
||||
|
||||
@if $arrow-location == bottom{
|
||||
@extend %arrow--lower;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Media query mixin.
|
||||
*
|
||||
* It’s not great practice to define solid breakpoints up-front, preferring to
|
||||
* modify your design when it needs it, rather than assuming you’ll want a
|
||||
* change at ‘mobile’. However, as inuit.css is required to take a hands off
|
||||
* approach to design decisions, this is the closest we can get to baked-in
|
||||
* responsiveness. It’s flexible enough to allow you to set your own breakpoints
|
||||
* but solid enough to be frameworkified.
|
||||
*
|
||||
* We define some broad breakpoints in our vars file that are picked up here
|
||||
* for use in a simple media query mixin. Our options are:
|
||||
*
|
||||
* palm
|
||||
* lap
|
||||
* lap-and-up
|
||||
* portable
|
||||
* desk
|
||||
* desk-wide
|
||||
*
|
||||
* Not using a media query will, naturally, serve styles to all devices.
|
||||
*
|
||||
* `@include media-query(palm){ [styles here] }`
|
||||
*
|
||||
* We work out your end points for you:
|
||||
*/
|
||||
$palm-end: $lap-start - 1px;
|
||||
$lap-end: $desk-start - 1px;
|
||||
|
||||
@mixin media-query($media-query){
|
||||
|
||||
@if $media-query == palm{
|
||||
|
||||
@media only screen and (max-width:$palm-end) { @content; }
|
||||
|
||||
}
|
||||
|
||||
@if $media-query == lap{
|
||||
|
||||
@media only screen and (min-width:$lap-start) and (max-width:$lap-end) { @content; }
|
||||
|
||||
}
|
||||
|
||||
@if $media-query == lap-and-up{
|
||||
|
||||
@media only screen and (min-width:$lap-start) { @content; }
|
||||
|
||||
}
|
||||
|
||||
@if $media-query == portable{
|
||||
|
||||
@media only screen and (max-width:$lap-end) { @content; }
|
||||
|
||||
}
|
||||
|
||||
@if $media-query == desk{
|
||||
|
||||
@media only screen and (min-width:$desk-start) { @content; }
|
||||
|
||||
}
|
||||
|
||||
@if $media-query == desk-wide{
|
||||
|
||||
@media only screen and (min-width: $desk-wide-start) { @content; }
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
397
sass/inuitcss/generic/_normalize.scss
Normal file
397
sass/inuitcss/generic/_normalize.scss
Normal file
|
|
@ -0,0 +1,397 @@
|
|||
@charset "UTF-8";
|
||||
/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
|
||||
|
||||
/* ==========================================================================
|
||||
HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Correct `block` display not defined in IE 8/9.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Correct `inline-block` display not defined in IE 8/9.
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Prevent modern browsers from displaying `audio` without controls.
|
||||
* Remove excess height in iOS 5 devices.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Address styling not present in IE 8/9.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Base
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* 1. Set default font family to sans-serif.
|
||||
* 2. Prevent iOS text size adjust after orientation change, without disabling
|
||||
* user zoom.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove default margin.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Links
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Address `outline` inconsistency between Chrome and other browsers.
|
||||
*/
|
||||
|
||||
a:focus {
|
||||
outline: thin dotted;
|
||||
}
|
||||
|
||||
/*
|
||||
* Improve readability when focused and also mouse hovered in all browsers.
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Typography
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Address variable `h1` font-size and margin within `section` and `article`
|
||||
* contexts in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Address styling not present in IE 8/9, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
/*
|
||||
* Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/*
|
||||
* Address styling not present in Safari 5 and Chrome.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/*
|
||||
* Address differences between Firefox and other browsers.
|
||||
*/
|
||||
|
||||
hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Address styling not present in IE 8/9.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/*
|
||||
* Correct font family set oddly in Safari 5 and Chrome.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, serif;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/*
|
||||
* Improve readability of pre-formatted text in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/*
|
||||
* Set consistent quote types.
|
||||
*/
|
||||
|
||||
q {
|
||||
quotes: "\201C" "\201D" "\2018" "\2019";
|
||||
}
|
||||
|
||||
/*
|
||||
* Address inconsistent and variable font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/*
|
||||
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Remove border when inside `a` element in IE 8/9.
|
||||
*/
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Correct overflow displayed oddly in IE 9.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Figures
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Address margin not present in IE 8/9 and Safari 5.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Forms
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Correct `color` not being inherited in IE 8/9.
|
||||
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||
*/
|
||||
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Correct font family not being inherited in all browsers.
|
||||
* 2. Correct font size not being inherited in all browsers.
|
||||
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 2 */
|
||||
margin: 0; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
button,
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/*
|
||||
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
* All other form control elements do not inherit `text-transform` values.
|
||||
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
|
||||
* Correct `select` style inheritance in Firefox 4+ and Opera.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Correct inability to style clickable `input` types in iOS.
|
||||
* 3. Improve usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
*/
|
||||
|
||||
button,
|
||||
html input[type="button"], /* 1 */
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Address box sizing set to `content-box` in IE 8/9.
|
||||
* 2. Remove excess padding in IE 8/9.
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
|
||||
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
|
||||
* (include `-moz` to future-proof).
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove inner padding and search cancel button in Safari 5 and Chrome
|
||||
* on OS X.
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove inner padding and border in Firefox 4+.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Remove default vertical scrollbar in IE 8/9.
|
||||
* 2. Improve readability and alignment in all browsers.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto; /* 1 */
|
||||
vertical-align: top; /* 2 */
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Tables
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Remove most spacing between table cells.
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
148
sass/inuitcss/generic/_pull.scss
Normal file
148
sass/inuitcss/generic/_pull.scss
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$PULL
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Pull classes, to move grid items over to the right by certain amounts.
|
||||
*/
|
||||
|
||||
@mixin pull-setup($namespace: "") {
|
||||
|
||||
/**
|
||||
* Whole
|
||||
*/
|
||||
.pull--#{$namespace}one-whole { right:100%; }
|
||||
|
||||
|
||||
/**
|
||||
* Halves
|
||||
*/
|
||||
.pull--#{$namespace}one-half { right:50%; }
|
||||
|
||||
|
||||
/**
|
||||
* Thirds
|
||||
*/
|
||||
.pull--#{$namespace}one-third { right:33.333%; }
|
||||
.pull--#{$namespace}two-thirds { right:66.666%; }
|
||||
|
||||
|
||||
/**
|
||||
* Quarters
|
||||
*/
|
||||
.pull--#{$namespace}one-quarter { right:25%; }
|
||||
.pull--#{$namespace}two-quarters { @extend .pull--#{$namespace}one-half; }
|
||||
.pull--#{$namespace}three-quarters { right:75%; }
|
||||
|
||||
|
||||
/**
|
||||
* Fifths
|
||||
*/
|
||||
.pull--#{$namespace}one-fifth { right:20%; }
|
||||
.pull--#{$namespace}two-fifths { right:40%; }
|
||||
.pull--#{$namespace}three-fifths { right:60%; }
|
||||
.pull--#{$namespace}four-fifths { right:80%; }
|
||||
|
||||
|
||||
/**
|
||||
* Sixths
|
||||
*/
|
||||
.pull--#{$namespace}one-sixth { right:16.666%; }
|
||||
.pull--#{$namespace}two-sixths { @extend .pull--#{$namespace}one-third; }
|
||||
.pull--#{$namespace}three-sixths { @extend .pull--#{$namespace}one-half; }
|
||||
.pull--#{$namespace}four-sixths { @extend .pull--#{$namespace}two-thirds; }
|
||||
.pull--#{$namespace}five-sixths { right:83.333%; }
|
||||
|
||||
|
||||
/**
|
||||
* Eighths
|
||||
*/
|
||||
.pull--#{$namespace}one-eighth { right:12.5%; }
|
||||
.pull--#{$namespace}two-eighths { @extend .pull--#{$namespace}one-quarter; }
|
||||
.pull--#{$namespace}three-eighths { right:37.5%; }
|
||||
.pull--#{$namespace}four-eighths { @extend .pull--#{$namespace}one-half; }
|
||||
.pull--#{$namespace}five-eighths { right:62.5%; }
|
||||
.pull--#{$namespace}six-eighths { @extend .pull--#{$namespace}three-quarters; }
|
||||
.pull--#{$namespace}seven-eighths { right:87.5%; }
|
||||
|
||||
|
||||
/**
|
||||
* Tenths
|
||||
*/
|
||||
.pull--#{$namespace}one-tenth { right:10%; }
|
||||
.pull--#{$namespace}two-tenths { @extend .pull--#{$namespace}one-fifth; }
|
||||
.pull--#{$namespace}three-tenths { right:30%; }
|
||||
.pull--#{$namespace}four-tenths { @extend .pull--#{$namespace}two-fifths; }
|
||||
.pull--#{$namespace}five-tenths { @extend .pull--#{$namespace}one-half; }
|
||||
.pull--#{$namespace}six-tenths { @extend .pull--#{$namespace}three-fifths; }
|
||||
.pull--#{$namespace}seven-tenths { right:70%; }
|
||||
.pull--#{$namespace}eight-tenths { @extend .pull--#{$namespace}four-fifths; }
|
||||
.pull--#{$namespace}nine-tenths { right:90%; }
|
||||
|
||||
|
||||
/**
|
||||
* Twelfths
|
||||
*/
|
||||
.pull--#{$namespace}one-twelfth { right:8.333%; }
|
||||
.pull--#{$namespace}two-twelfths { @extend .pull--#{$namespace}one-sixth; }
|
||||
.pull--#{$namespace}three-twelfths { @extend .pull--#{$namespace}one-quarter; }
|
||||
.pull--#{$namespace}four-twelfths { @extend .pull--#{$namespace}one-third; }
|
||||
.pull--#{$namespace}five-twelfths { right:41.666% }
|
||||
.pull--#{$namespace}six-twelfths { @extend .pull--#{$namespace}one-half; }
|
||||
.pull--#{$namespace}seven-twelfths { right:58.333%; }
|
||||
.pull--#{$namespace}eight-twelfths { @extend .pull--#{$namespace}two-thirds; }
|
||||
.pull--#{$namespace}nine-twelfths { @extend .pull--#{$namespace}three-quarters; }
|
||||
.pull--#{$namespace}ten-twelfths { @extend .pull--#{$namespace}five-sixths; }
|
||||
.pull--#{$namespace}eleven-twelfths { right:91.666%; }
|
||||
}
|
||||
|
||||
@if $pull == true{
|
||||
|
||||
/**
|
||||
* Not a particularly great selector, but the DRYest way to do things.
|
||||
*/
|
||||
[class*="pull--"]{ position:relative; }
|
||||
|
||||
@include pull-setup();
|
||||
|
||||
@if $palm-pull == true{
|
||||
|
||||
@include media-query(palm){
|
||||
@include pull-setup("palm-");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@if $lap-pull == true{
|
||||
|
||||
@include media-query(lap){
|
||||
@include pull-setup("lap-");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@if $lap-and-up-pull == true{
|
||||
|
||||
@include media-query(lap-and-up){
|
||||
@include pull-setup("lap-and-up-");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@if $portable-pull == true{
|
||||
|
||||
@include media-query(portable){
|
||||
@include pull-setup("portable-");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@if $desk-pull == true{
|
||||
|
||||
@include media-query(desk){
|
||||
@include pull-setup("desk-");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}//endif
|
||||
148
sass/inuitcss/generic/_push.scss
Normal file
148
sass/inuitcss/generic/_push.scss
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$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
|
||||
81
sass/inuitcss/generic/_reset.scss
Normal file
81
sass/inuitcss/generic/_reset.scss
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$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.
|
||||
*/
|
||||
img{
|
||||
font-style:italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Give form elements some cursor interactions...
|
||||
*/
|
||||
label,
|
||||
input,
|
||||
textarea,
|
||||
button,
|
||||
select,
|
||||
option{
|
||||
cursor:pointer;
|
||||
}
|
||||
.text-input:active,
|
||||
.text-input:focus,
|
||||
textarea:active,
|
||||
textarea:focus{
|
||||
cursor:text;
|
||||
outline:none;
|
||||
}
|
||||
62
sass/inuitcss/generic/_shared.scss
Normal file
62
sass/inuitcss/generic/_shared.scss
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$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
|
||||
*/
|
||||
%sass-margin-bottom,
|
||||
.media,
|
||||
.island,
|
||||
.islet{
|
||||
margin-bottom:$base-spacing-unit;
|
||||
margin-bottom:($base-spacing-unit / $base-font-size)*1rem;
|
||||
|
||||
.islet &{
|
||||
margin-bottom:$base-spacing-unit / 2;
|
||||
margin-bottom:(($base-spacing-unit / $base-font-size) / 2)*1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Doubled up `margin-bottom` helper class.
|
||||
*/
|
||||
.landmark{
|
||||
margin-bottom:2 * $base-spacing-unit;
|
||||
margin-bottom:(2 * $base-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:2 * $base-spacing-unit;
|
||||
margin-left:(2 * $base-spacing-unit / $base-font-size)*1rem;
|
||||
}
|
||||
159
sass/inuitcss/generic/_widths.scss
Normal file
159
sass/inuitcss/generic/_widths.scss
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$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 */
|
||||
Loading…
Add table
Add a link
Reference in a new issue