Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
195 lines (160 sloc) 5.77 KB
/*
Extra Strength Responsive Grids
Author & copyright (c) 2013: John Polacek and Tim Svensen
Follow on Twitter: @johnpolacek
Follow on Twitter: @tsvensen
Dual MIT & GPL license
Project Page: http://dfcb.github.com/extra-strength-responsive-grids
Project Repo: https://github.com/dfcb/extra-strength-responsive-grids
Note: box-sizing: border-box; is required for this solution.
For more info, see the project page
See examples-grid.scss for usage.
*/
//* helper mixin */
@mixin reverseBoxSizing() {
width: auto;
box-sizing: content-box;
float: none;
}
//* helper mixin */
@mixin gridClasses($_prefix:'', $gridColumns:12, $padOuter:.5em, $padInner:1em, $breakpoint_min:'', $breakpoint_max:''){
.#{$_prefix}grid-all {
margin: 0; clear: none; float: left;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; *behavior: url(boxsizing.htc);
}
.#{$_prefix}offset-0 {
margin-left: 0;
}
@for $i from 1 through $gridColumns {
.#{$_prefix}grid-#{$i} {
@extend .#{$_prefix}grid-all;
width:percentage($i/$gridColumns);
}
//* offsets */
.#{$_prefix}offset-#{$i} {
margin-left:percentage($i/$gridColumns);
}
//* generate easy-to-read grid classes */
@if $i/$gridColumns == 1/4 {
.#{$_prefix}grid-quarter {
@extend .#{$_prefix}grid-#{$i};
}
}
@if $i/$gridColumns == 1/3 {
.#{$_prefix}grid-third {
@extend .#{$_prefix}grid-#{$i};
}
}
@if $i/$gridColumns == 1/2 {
.#{$_prefix}grid-half {
@extend .#{$_prefix}grid-#{$i};
}
}
@if $i/$gridColumns == 2/3 {
.#{$_prefix}grid-two-thirds {
@extend .#{$_prefix}grid-#{$i};
}
}
@if $i/$gridColumns == 3/4 {
.#{$_prefix}grid-three-quarters {
@extend .#{$_prefix}grid-#{$i};
}
}
@if $i/$gridColumns == 1 {
.#{$_prefix}grid-whole {
@extend .#{$_prefix}grid-#{$i};
}
}
}
/* padding helper classes */
.#{$_prefix}padded { padding: $padOuter; }
.#{$_prefix}padded-left { padding-left: $padOuter; }
.#{$_prefix}padded-right { padding-right: $padOuter; }
.#{$_prefix}padded-top { padding-top: $padOuter; }
.#{$_prefix}padded-bottom { padding-bottom: $padOuter; }
.#{$_prefix}padded-sides { padding: 0 $padOuter; }
.#{$_prefix}padded-vertical { padding: $padOuter 0; }
.#{$_prefix}padded-inner { padding: $padInner; }
.#{$_prefix}padded-inner-sides { padding: 0 $padInner; }
.#{$_prefix}padded-reverse {
margin: 0 (-$padOuter);
@include reverseBoxSizing();
}
.#{$_prefix}padded-reverse-all {
margin: -$padOuter;
@include reverseBoxSizing();
}
/* miscellaneous helper classes */
.#{$_prefix}flow-opposite { float: right; }
.#{$_prefix}center { text-align:center; }
.#{$_prefix}left { text-align:left; }
.#{$_prefix}right { text-align:right; }
@if ($_prefix != '') {
//* Only generate for prefixed */
.#{$_prefix}hidden { display: none; }
} @else {
//* Only generate on top level */
/* For compatibility with Bootstrap (fixed), Foundation, etc. */
.row {
margin: 0 (-$padOuter);
@include reverseBoxSizing();
}
}
}
//* generate grid classes for each breakpoint, defaults defined below */
@mixin gridGenerator(
$breakpoints: (0, 480px, 800px), // breakpoints
$breakpointType: 'px', // breakpoint type px or em
$gridColumns: 12, // number of grid columns
$padOuter: .5em, // outer padding
$padInner: 1em, // inner padding
$breakpointPrefixes: (s-,m-,l-), // breakpoint prefixes
$isProgressivelyEnhanced: false // progressively add styling instead of exclusion
// Allows for the following to both achieve the same results
// Progressive
// @media (min-width: $breakpoint_min) {
// <div class="grid-half">
//
// Exclusive
// @media (min-width: $breakpoint_min) and (max-width: $breakpoint_max) {
// <div class="grid-half s-grid-half m-grid-half l-grid-half">
) {
//* generate top-level grid classes, no prefix */
@include gridClasses('', $gridColumns, $padOuter, $padInner);
@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, $padOuter, $padInner);
}
} @else {
//* middle breakpoints */
@if $breakpoint_max != '' {
@if $isProgressivelyEnhanced {
@media (min-width: $breakpoint_min) {
@include gridClasses($prefix, $gridColumns, $padOuter, $padInner);
}
} @else {
@media (min-width: $breakpoint_min) and (max-width: $breakpoint_max) {
@include gridClasses($prefix, $gridColumns, $padOuter, $padInner);
}
}
//* largest breakpoint */
} @else {
@media (min-width: $breakpoint_min) {
@include gridClasses($prefix, $gridColumns, $padOuter, $padInner);
}
}
}
}
}