Permalink
Switch branches/tags
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
137 lines (113 sloc) 4.05 KB
// Simple Grid Generator
// Author & copyright (c) 2015: John Polacek
// Follow on Twitter: @johnpolacek
// Dual MIT & GPL license
// Project Page: https://github.com/johnpolacek/simple-grid-generator
// box-sizing: border-box is required
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
@mixin spacingHelpers($prefix, $i, $spaceUnit){
.#{$prefix}pad-#{$i} { padding: $spaceUnit; }
.#{$prefix}pad-#{$i}-left { padding-left: $spaceUnit; }
.#{$prefix}pad-#{$i}-right { padding-right: $spaceUnit; }
.#{$prefix}pad-#{$i}-top { padding-top: $spaceUnit; }
.#{$prefix}pad-#{$i}-bottom { padding-bottom: $spaceUnit; }
.#{$prefix}pad-#{$i}-sides { padding-left: $spaceUnit; padding-right: $spaceUnit; }
.#{$prefix}pad-#{$i}-vert { padding-top: $spaceUnit; padding-bottom: $spaceUnit; }
.#{$prefix}marg-#{$i} { margin: $spaceUnit; }
.#{$prefix}marg-#{$i}-left { margin-left: $spaceUnit; }
.#{$prefix}marg-#{$i}-right { margin-right: $spaceUnit; }
.#{$prefix}marg-#{$i}-top { margin-top: $spaceUnit; }
.#{$prefix}marg-#{$i}-bottom { margin-bottom: $spaceUnit; }
.#{$prefix}marg-#{$i}-sides { margin-left: $spaceUnit; margin-right: $spaceUnit; }
.#{$prefix}marg-#{$i}-vert { margin-top: $spaceUnit; margin-bottom: $spaceUnit; }
}
@mixin gridClasses($_prefix:'', $gridColumns:12, $spaceUnits:(8px,16px,32px), $breakpoint_min:'', $breakpoint_max:''){
// grid classes
.#{$_prefix}grid {
margin: 0; clear: none; float: left;
}
@for $i from 1 through $gridColumns {
.#{$_prefix}grid-#{$i} {
@extend .#{$_prefix}grid;
width:percentage($i/$gridColumns);
}
}
// offset classes
.#{$_prefix}offset-0 {
margin-left: 0;
}
@for $i from 1 through $gridColumns {
.#{$_prefix}offset-#{$i} {
margin-left:percentage($i/$gridColumns);
}
}
// spacing helper classes
@if $spaceUnits {
$i : 1;
@each $spaceUnit in $spaceUnits {
@include spacingHelpers($_prefix, $i, $spaceUnit);
$i : $i + 1;
}
@include spacingHelpers($_prefix, 0, 0);
}
}
@mixin padHalf($halfUnit: 4px) {
@include spacingHelpers('', 'half', $halfUnit);
}
// use grid-flex for equal height grid containers
@mixin gridFlex() {
.grid-flex {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-moz-box-wrap: wrap;
-webkit-box-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flexbox-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
// generate grid classes for each breakpoint, defaults defined below
@mixin gridGenerator(
$gridColumns: 12, // number of grid columns
$breakpoints: (0, 480px, 800px), // array of breakpoints
$breakpointPrefixes: (s-,m-,l-), // array of breakpoint prefixes
$breakpointType: 'px', // breakpoint type px or em
$spaceUnits: (8px,16px,32px) // array padding and margin units
) {
//* generate top-level grid classes, no prefix */
@include gridClasses('', $gridColumns, $spaceUnits);
@for $i from 1 through length($breakpointPrefixes) {
$prefix: nth($breakpointPrefixes, $i);
$breakpoint_min: nth($breakpoints, $i);
// Add one to support pixel breakpoints, EMs don't need the extra bump
@if $breakpointType == 'px' {
$breakpoint_min: nth($breakpoints, $i) + 1;
}
$breakpoint_max: '';
@if $i < length($breakpointPrefixes) {
$breakpoint_max: nth($breakpoints, $i+1);
}
// //* smallest breakpoint */
@if $breakpoint_min == 1 {
@media (max-width: $breakpoint_max) {
@include gridClasses($prefix, $gridColumns, $spaceUnits);
}
} @else {
//* middle breakpoints */
@if $breakpoint_max != '' {
@media (min-width: $breakpoint_min) and (max-width: $breakpoint_max) {
@include gridClasses($prefix, $gridColumns, $spaceUnits);
}
//* largest breakpoint */
} @else {
@media (min-width: $breakpoint_min) {
@include gridClasses($prefix, $gridColumns, $spaceUnits);
}
}
}
}
}