Clone
// skel-layout.scss v3.0.0-dev | (c) n33 | MIT licensed */
/// Resets browser styles.
/// @param {string} $mode Mode (default is 'normalize').
@mixin skel-reset($mode: 'normalize') {
@if $mode == 'normalize' {
// normalize.css v3.0.2 | MIT License | git.io/normalize
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
}
@else if $mode == 'full' {
// meyerweb.com/eric/tools/css/reset v2.0 | 20110126 | License: none (public domain)
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}body{-webkit-text-size-adjust:none}
}
}
/// Sets the global box model.
/// @param {string} $model Model (default is content).
@mixin skel-boxModel($model: 'content') {
$x: $model + '-box';
*, *:before, *:after {
-moz-box-sizing: #{$x};
-webkit-box-sizing: #{$x};
box-sizing: #{$x};
}
}
/// Utility mixin for skel-containers.
/// @param {mixed} $width Width.
@mixin skel-containers($width) {
// Locked?
$lock: false;
@if length($width) == 2 {
$width: nth($width, 1);
$lock: true;
}
// Modifiers.
.container.\31 25\25 { width: 100%; max-width: $width * 1.25; min-width: $width; }
.container.\37 5\25 { width: $width * 0.75; }
.container.\35 0\25 { width: $width * 0.5; }
.container.\32 5\25 { width: $width * 0.25; }
// Main class.
.container {
@if $lock {
width: $width !important;
}
@else {
width: $width;
}
}
}
/// Utility mixin for skel-grid.
/// @param {list} $gutters Column and row gutters (default is (40px, 0)).
/// @param {string} $breakpointName Optional breakpoint name.
@mixin skel-grid($gutters: (40px, 0), $breakpointName: null) {
// Gutters.
@include skel-grid-gutters($gutters);
@include skel-grid-gutters($gutters, \32 00\25, 2);
@include skel-grid-gutters($gutters, \31 50\25, 1.5);
@include skel-grid-gutters($gutters, \35 0\25, 0.5);
@include skel-grid-gutters($gutters, \32 5\25, 0.25);
// Cells.
$x: '';
@if $breakpointName {
$x: '\\28' + $breakpointName + '\\29';
}
.\31 2u#{$x}, .\31 2u\24#{$x} { width: 100%; clear: none; margin-left: 0; }
.\31 1u#{$x}, .\31 1u\24#{$x} { width: 91.6666666667%; clear: none; margin-left: 0; }
.\31 0u#{$x}, .\31 0u\24#{$x} { width: 83.3333333333%; clear: none; margin-left: 0; }
.\39 u#{$x}, .\39 u\24#{$x} { width: 75%; clear: none; margin-left: 0; }
.\38 u#{$x}, .\38 u\24#{$x} { width: 66.6666666667%; clear: none; margin-left: 0; }
.\37 u#{$x}, .\37 u\24#{$x} { width: 58.3333333333%; clear: none; margin-left: 0; }
.\36 u#{$x}, .\36 u\24#{$x} { width: 50%; clear: none; margin-left: 0; }
.\35 u#{$x}, .\35 u\24#{$x} { width: 41.6666666667%; clear: none; margin-left: 0; }
.\34 u#{$x}, .\34 u\24#{$x} { width: 33.3333333333%; clear: none; margin-left: 0; }
.\33 u#{$x}, .\33 u\24#{$x} { width: 25%; clear: none; margin-left: 0; }
.\32 u#{$x}, .\32 u\24#{$x} { width: 16.6666666667%; clear: none; margin-left: 0; }
.\31 u#{$x}, .\31 u\24#{$x} { width: 8.3333333333%; clear: none; margin-left: 0; }
.\31 2u\24#{$x} + *,
.\31 1u\24#{$x} + *,
.\31 0u\24#{$x} + *,
.\39 u\24#{$x} + *,
.\38 u\24#{$x} + *,
.\37 u\24#{$x} + *,
.\36 u\24#{$x} + *,
.\35 u\24#{$x} + *,
.\34 u\24#{$x} + *,
.\33 u\24#{$x} + *,
.\32 u\24#{$x} + *,
.\31 u\24#{$x} + * {
clear: left;
}
.\-11u#{$x} { margin-left: 91.6666666667% }
.\-10u#{$x} { margin-left: 83.3333333333% }
.\-9u#{$x} { margin-left: 75% }
.\-8u#{$x} { margin-left: 66.6666666667% }
.\-7u#{$x} { margin-left: 58.3333333333% }
.\-6u#{$x} { margin-left: 50% }
.\-5u#{$x} { margin-left: 41.6666666667% }
.\-4u#{$x} { margin-left: 33.3333333333% }
.\-3u#{$x} { margin-left: 25% }
.\-2u#{$x} { margin-left: 16.6666666667% }
.\-1u#{$x} { margin-left: 8.3333333333% }
}
/// Utility mixin for skel-grid.
/// @param {list} $gutters Column and row gutters.
/// @param {string} $class Optional class name.
/// @param {integer} $multiplier Multiplier (default is 1).
@mixin skel-grid-gutters($gutters, $class: null, $multiplier: 1) {
// Get column and row gutter values.
$c: nth($gutters, 1);
$r: nth($gutters, 2);
// Get class (if provided).
$x: '';
@if $class {
$x: '.' + $class;
}
// Default.
.row#{$x} > * { padding: ($r * $multiplier) 0 0 ($c * $multiplier); }
.row#{$x} { margin: ($r * $multiplier * -1) 0 -1px ($c * $multiplier * -1); }
// Uniform.
.row.uniform#{$x} > * { padding: ($c * $multiplier) 0 0 ($c * $multiplier); }
.row.uniform#{$x} { margin: ($c * $multiplier * -1) 0 -1px ($c * $multiplier * -1); }
}
/// Initializes skel-layout.
/// @param {map} $x Breakpoints list or config.
/// @param {map} $y Config (if first arg is breakpoints list).
@mixin skel-layout($x, $y: null) {
// Get breakpoints, config.
$config: null;
$configPerBreakpoint: ();
$breakpoints: null;
// Breakpoints + config.
@if $y != null {
$breakpoints: $x;
$config: $y;
$z: map-get($config, 'breakpoints');
@if $z {
$configPerBreakpoint: $z;
}
}
// Config only.
@else {
$config: $x;
}
// Reset.
$x: map-get($config, 'reset');
@if $x {
@include skel-reset($x);
}
// Box model.
$x: map-get($config, 'boxModel');
@if $x {
@include skel-boxModel($x);
}
// Containers.
$containers: map-get($config, 'containers');
@if $containers {
.container {
margin-left: auto;
margin-right: auto;
}
// Apply base.
@include skel-containers($containers);
// Apply per-breakpoint.
@if $breakpoints {
@each $name in map-keys($breakpoints) {
// Get/use breakpoint setting if it exists.
$x: map-get($configPerBreakpoint, $name);
// Per-breakpoint config exists?
@if $x {
$y: map-get($x, 'containers');
// Setting exists? Use it.
@if $y {
$containers: $y;
}
}
// Create @media block.
@media screen and #{map-get($breakpoints, $name)} {
@include skel-containers($containers);
}
}
}
}
// Grid.
$grid: map-get($config, 'grid');
@if $grid {
// Sub-setting: Gutters.
$grid-gutters: (40px, 0);
$x: map-get($grid, 'gutters');
@if $x {
$grid-gutters: $x;
}
// Rows.
.row {
border-bottom: solid 1px transparent;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.row > * {
float: left;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.row:after, .row:before {
content: '';
display: block;
clear: both;
height: 0;
}
.row.uniform > * > :first-child {
margin-top: 0;
}
.row.uniform > * > :last-child {
margin-bottom: 0;
}
// Gutters (0%).
@include skel-grid-gutters($grid-gutters, \30 \25, 0);
// Apply base.
@include skel-grid($grid-gutters);
// Apply per-breakpoint.
@if $breakpoints {
@each $name in map-keys($breakpoints) {
// Get/use breakpoint setting if it exists.
$x: map-get($configPerBreakpoint, $name);
// Per-breakpoint config exists?
@if $x {
$y: map-get($x, 'grid');
// Setting exists?
@if $y {
// Sub-setting: Gutters.
$grid-gutters: (40px, 0);
$x: map-get($y, 'gutters');
@if $x {
$grid-gutters: $x;
}
}
}
// Create @media block.
@media screen and #{map-get($breakpoints, $name)} {
@include skel-grid($grid-gutters, $name);
}
}
}
}
}