Update to site
This commit is contained in:
Paulus Schoutsen
parent
3345fa5897
commit
b0bdfe2fe9
244 changed files with 11618 additions and 12 deletions
64
sass/inuitcss/base/_code.scss
Normal file
64
sass/inuitcss/base/_code.scss
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$CODE
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
* Use an explicit font stack to ensure browsers render correct `line-height`.
|
||||
*/
|
||||
pre{
|
||||
overflow:auto;
|
||||
}
|
||||
pre mark{
|
||||
background:none;
|
||||
border-bottom:1px solid;
|
||||
color:inherit;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Add comments to your code examples, e.g.:
|
||||
*
|
||||
<code></div><span class=code-comment><!-- /wrapper --></span></code>
|
||||
*
|
||||
*/
|
||||
.code-comment{
|
||||
/**
|
||||
* Override this setting in your theme stylesheet
|
||||
*/
|
||||
opacity:0.75;
|
||||
filter:alpha(opacity=75);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* You can add line numbers to your code examples but be warned, it requires
|
||||
* some pretty funky looking markup, e.g.:
|
||||
*
|
||||
<ol class=line-numbers>
|
||||
<li><code>.nav{</code></li>
|
||||
<li><code> list-style:none;</code></li>
|
||||
<li><code> margin-left:0;</code></li>
|
||||
<li><code>}</code></li>
|
||||
<li><code> .nav > li,</code></li>
|
||||
<li><code> .nav > li > a{</code></li>
|
||||
<li><code> display:inline-block;</code></li>
|
||||
<li><code> *display:inline-block;</code></li>
|
||||
<li><code> zoom:1;</code></li>
|
||||
<li><code> }</code></li>
|
||||
</ol>
|
||||
*
|
||||
* 1. Make the list look like code.
|
||||
* 2. Give the list flush numbers with a leading zero.
|
||||
* 3. Make sure lines of code don’t wrap.
|
||||
* 4. Give the code form by forcing the `code` to honour white-space.
|
||||
*/
|
||||
.line-numbers{
|
||||
font-family:monospace, serif; /* [1] */
|
||||
list-style:decimal-leading-zero inside; /* [2] */
|
||||
white-space:nowrap; /* [3] */
|
||||
overflow:auto; /* [3] */
|
||||
margin-left:0;
|
||||
}
|
||||
.line-numbers code{
|
||||
white-space:pre; /* [4] */
|
||||
}
|
||||
175
sass/inuitcss/base/_forms.scss
Normal file
175
sass/inuitcss/base/_forms.scss
Normal file
|
|
@ -0,0 +1,175 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$FORMS
|
||||
\*------------------------------------*/
|
||||
/**
|
||||
*
|
||||
* Demo: jsfiddle.net/inuitcss/MhHHU
|
||||
*
|
||||
*/
|
||||
fieldset{
|
||||
padding:$base-spacing-unit;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Text inputs
|
||||
*
|
||||
* Instead of a `[type]` selector for each kind of form input, we just use a
|
||||
* class to target any/every one, e.g.:
|
||||
<input type=text class=text-input>
|
||||
<input type=email class=text-input>
|
||||
<input type=password class=text-input>
|
||||
*
|
||||
*/
|
||||
.text-input,
|
||||
textarea{
|
||||
/**
|
||||
* Style these via your theme stylesheet.
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Group sets of form fields in a list, e.g.:
|
||||
*
|
||||
<ul class=form-fields>
|
||||
<li>
|
||||
<label />
|
||||
<input />
|
||||
</li>
|
||||
<li>
|
||||
<label />
|
||||
<select />
|
||||
</li>
|
||||
<li>
|
||||
<label />
|
||||
<input />
|
||||
</li>
|
||||
</ul>
|
||||
*
|
||||
*/
|
||||
.form-fields{
|
||||
list-style:none;
|
||||
margin:0;
|
||||
}
|
||||
.form-fields > li{
|
||||
@extend %sass-margin-bottom;
|
||||
}
|
||||
.form-fields > li:last-child{
|
||||
margin-bottom:0;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Labels
|
||||
*
|
||||
* Define a `.label` class as well as a `label` element. This means we can apply
|
||||
* label-like styling to meta-labels for groups of options where a `label`
|
||||
* element is not suitable, e.g.:
|
||||
*
|
||||
<li>
|
||||
<span class=label>Select an option below:</span>
|
||||
<ul class="multi-list four-cols">
|
||||
<li>
|
||||
<input /> <label />
|
||||
</li>
|
||||
<li>
|
||||
<input /> <label />
|
||||
</li>
|
||||
<li>
|
||||
<input /> <label />
|
||||
</li>
|
||||
<li>
|
||||
<input /> <label />
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
*
|
||||
*/
|
||||
label,
|
||||
.label{
|
||||
display:block;
|
||||
}
|
||||
/**
|
||||
* Extra help text in `label`s, e.g.:
|
||||
*
|
||||
<label>Card number <small class=additional>No spaces</small></label>
|
||||
*
|
||||
*/
|
||||
.additional{
|
||||
display:block;
|
||||
font-weight:normal;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Groups of checkboxes and radios, e.g.:
|
||||
*
|
||||
<li>
|
||||
<ul class=check-list>
|
||||
<li>
|
||||
<input /> <label />
|
||||
</li>
|
||||
<li>
|
||||
<input /> <label />
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
*
|
||||
*/
|
||||
.check-list{
|
||||
list-style:none;
|
||||
margin:0;
|
||||
}
|
||||
/*
|
||||
* Labels in check-lists
|
||||
*/
|
||||
.check-label,
|
||||
.check-list label,
|
||||
.check-list .label{
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Spoken forms are for forms that read like spoken word, e.g.:
|
||||
*
|
||||
<li class=spoken-form>
|
||||
Hello, my <label for=spoken-name>name</label> is
|
||||
<input type=text class=text-input id=spoken-name>. My home
|
||||
<label for=country>country</label> is
|
||||
<select id=country>
|
||||
<option>UK</option>
|
||||
<option>US</option>
|
||||
<option>Other</option>
|
||||
</select>
|
||||
</li>
|
||||
*
|
||||
*/
|
||||
.spoken-form label{
|
||||
display:inline-block;
|
||||
font:inherit;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Extra help text displayed after a field when that field is in focus, e.g.:
|
||||
*
|
||||
<label for=email>Email:</label>
|
||||
<input type=email class=text-input id=email>
|
||||
<small class=extra-help>.edu emails only</small>
|
||||
*
|
||||
* We leave the help text in the document flow and merely set it to
|
||||
* `visibility:hidden;`. This means that it won’t interfere with anything once
|
||||
* it reappears.
|
||||
*
|
||||
*/
|
||||
/*small*/.extra-help{
|
||||
display:inline-block;
|
||||
visibility:hidden;
|
||||
}
|
||||
.text-input:active + .extra-help,
|
||||
.text-input:focus + .extra-help{
|
||||
visibility:visible;
|
||||
}
|
||||
61
sass/inuitcss/base/_headings.scss
Normal file
61
sass/inuitcss/base/_headings.scss
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$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);
|
||||
}
|
||||
74
sass/inuitcss/base/_images.scss
Normal file
74
sass/inuitcss/base/_images.scss
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$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;
|
||||
}
|
||||
20
sass/inuitcss/base/_lists.scss
Normal file
20
sass/inuitcss/base/_lists.scss
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$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;
|
||||
}
|
||||
9
sass/inuitcss/base/_main.scss
Normal file
9
sass/inuitcss/base/_main.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$MAIN
|
||||
\*------------------------------------*/
|
||||
html{
|
||||
font:#{($base-font-size/16px)*1em}/#{$line-height-ratio} $base-font-family;
|
||||
overflow-y:scroll;
|
||||
min-height:100%;
|
||||
}
|
||||
12
sass/inuitcss/base/_paragraphs.scss
Normal file
12
sass/inuitcss/base/_paragraphs.scss
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$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);
|
||||
}
|
||||
97
sass/inuitcss/base/_quotes.scss
Normal file
97
sass/inuitcss/base/_quotes.scss
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$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";
|
||||
}
|
||||
}
|
||||
14
sass/inuitcss/base/_smallprint.scss
Normal file
14
sass/inuitcss/base/_smallprint.scss
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$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);
|
||||
}
|
||||
164
sass/inuitcss/base/_tables.scss
Normal file
164
sass/inuitcss/base/_tables.scss
Normal file
|
|
@ -0,0 +1,164 @@
|
|||
@charset "UTF-8";
|
||||
/*------------------------------------*\
|
||||
$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;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue