160 lines
4.5 KiB
SCSS
160 lines
4.5 KiB
SCSS
@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
|
||
* accommodate much larger screen resolutions.
|
||
*/
|
||
|
||
@if $responsive-extra == true{
|
||
|
||
@include media-query(desk-wide){
|
||
@include grid-setup("desk-wide-");
|
||
}
|
||
|
||
}
|
||
|
||
} /* endif */
|