hacks-guide-minimal-mistake.../_sass/grid.scss

85 lines
2.1 KiB
SCSS
Raw Normal View History

2015-01-20 21:25:57 +01:00
/* ==========================================================================
Grid mixins
========================================================================== */
2015-04-17 12:43:36 +02:00
/*
2015-01-20 21:25:57 +01:00
Define number of columns in the grid
Common values would be 12, 16 or 24
========================================================================== */
2014-07-31 19:09:32 +02:00
$width: 100%;
$def_grid: 12;
$margin: 0;
@mixin container(){
margin:0 auto;
width:$width;
}
2015-01-20 21:25:57 +01:00
2015-04-17 12:43:36 +02:00
/*
2015-01-20 21:25:57 +01:00
Works out the width of elements based on total number of columns and width
number of columns being displayed. Removes 20px for margins.
========================================================================== */
2014-07-31 19:09:32 +02:00
@mixin grid($grid:$def_grid,$cols:'',$float:left,$display:inline){
display:$display;
float:$float;
width:(100%/$grid * $cols) - ($margin * 2);
2015-04-17 12:43:36 +02:00
}
2014-07-31 19:09:32 +02:00
2015-04-17 12:43:36 +02:00
/*
2015-01-20 21:25:57 +01:00
Add x amount of column padding before an element
Example: @include prefix(1,12);
========================================================================== */
2014-07-31 19:09:32 +02:00
@mixin prefix($grid:$def_grid,$cols:''){
margin-left:(100%/$grid * $cols);
}
2015-01-20 21:25:57 +01:00
2015-04-17 12:43:36 +02:00
/*
2015-01-20 21:25:57 +01:00
Add x amount of column padding after an element
Example: @include suffix(2,12);
========================================================================== */
2015-04-17 12:43:36 +02:00
@mixin suffix($grid:$def_grid,$cols:''){
margin-right:(100%/$grid * $cols);
2014-07-31 19:09:32 +02:00
}
2015-01-20 21:25:57 +01:00
2015-04-17 12:43:36 +02:00
/*
2015-01-20 21:25:57 +01:00
Remove left margin
Example: @include first;
========================================================================== */
2014-07-31 19:09:32 +02:00
@mixin first(){
margin-left:0;
}
2015-01-20 21:25:57 +01:00
2015-04-17 12:43:36 +02:00
/*
2015-01-20 21:25:57 +01:00
Remove right margin
Example: @include last;
========================================================================== */
2014-07-31 19:09:32 +02:00
@mixin last(){
margin-right:0;
}
2015-04-17 12:43:36 +02:00
/*
2015-01-20 21:25:57 +01:00
Push an element x amount of column(s) to the right
Example: @include push(2,12);
========================================================================== */
2014-07-31 19:09:32 +02:00
@mixin push($grid:$def_grid,$move:'') {
position:relative;
left:(100%/$grid * $move);
2015-04-17 12:43:36 +02:00
}
2014-07-31 19:09:32 +02:00
2015-04-17 12:43:36 +02:00
/*
2015-01-20 21:25:57 +01:00
Pull an element x amount of column(s) to the left
Example: @include pull(1,12);
========================================================================== */
2014-07-31 19:09:32 +02:00
@mixin pull($grid:$def_grid,$move:''){
position:relative;
left:(100%/$grid * $move) * -1;
2015-01-20 21:25:57 +01:00
}