steffen/website
1
0
Fork 0
Code Actions Packages Releases Activity

Clean up comments in Sass partials

Browse Source
This commit is contained in:
Michael Rose
2015-01-20 15:25:57 -05:00
parent 422c0a467d
commit e916231560
9 changed files with 477 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
_sass/grid.scss
View File

@@ -1,5 +1,12 @@
// Defining number of columns in the grid.
// Common Values would be 12, 16 or 24
/* ==========================================================================
Grid mixins
========================================================================== */
/*
Define number of columns in the grid
Common values would be 12, 16 or 24
========================================================================== */
$width: 100%;
$def_grid: 12;
$margin: 0;
@@ -8,40 +15,70 @@ $margin: 0;
margin:0 auto;
width:$width;
}
// Works out the width of elements based
// on total number of columns and width
// number of columns being displayed.
// Removes 20px for margins
/*
Works out the width of elements based on total number of columns and width
number of columns being displayed. Removes 20px for margins.
========================================================================== */
@mixin grid($grid:$def_grid,$cols:'',$float:left,$display:inline){
display:$display;
float:$float;
width:(100%/$grid * $cols) - ($margin * 2);
}
// Allows for padding before element
/*
Add x amount of column padding before an element
Example: @include prefix(1,12);
========================================================================== */
@mixin prefix($grid:$def_grid,$cols:''){
margin-left:(100%/$grid * $cols);
}
// Allows for padding after element
/*
Add x amount of column padding after an element
Example: @include suffix(2,12);
========================================================================== */
@mixin suffix($grid:$def_grid,$cols:''){
margin-right:(100%/$grid * $cols);
}
// Removes left margin
/*
Remove left margin
Example: @include first;
========================================================================== */
@mixin first(){
margin-left:0;
}
// Removes right margin
/*
Remove right margin
Example: @include last;
========================================================================== */
@mixin last(){
margin-right:0;
}
/*
Push an element x amount of column(s) to the right
Example: @include push(2,12);
========================================================================== */
@mixin push($grid:$def_grid,$move:'') {
position:relative;
left:(100%/$grid * $move);
}
/*
Pull an element x amount of column(s) to the left
Example: @include pull(1,12);
========================================================================== */
@mixin pull($grid:$def_grid,$move:''){
position:relative;
left:(100%/$grid * $move) * -1;
}
}