Skip to content

Instantly share code, notes, and snippets.

@nickawalsh
Last active Dec 13, 2015
Embed
What would you like to do?
Grids
//------------------------------------------------------
// Grids
//
// Based on the following:
// * https://github.com/necolas/suit-grid
// * https://github.com/csswizardry/csswizardry-grids
//------------------------------------------------------
$grid-columns: 12 !default
$grid-defaults: "lap" 480px, "desk" 800px !default
$grid-gutter: 20px !default
$grid-silent: false !default
// ----- Selector Type ----- //
$grid-selector: if($grid-silent, unquote("%"), unquote("."))
// ----- Base ----- //
#{$grid-selector}grid
display: block
letter-spacing: -0.31em
margin-left: -$grid-gutter / 2
margin-right: -$grid-gutter / 2
text-rendering: optimizespeed
word-spacing: -0.43em
#{$grid-selector}grid-box
-moz-box-sizing: border-box
box-sizing: border-box
display: inline-block
letter-spacing: normal
margin: 0
padding-left: $grid-gutter / 2
padding-right: $grid-gutter / 2
text-rendering: auto
vertical-align: top
word-spacing: normal
// ----- Modifiers ----- //
#{$grid-selector}grid--center
text-align: center
#{$grid-selector}grid-box--center
display: block
margin: 0 auto
// ----- Grid ----- //
=device-type($namespace: '')
// One Part
#{$grid-selector}grid-box--#{$namespace}1of1
width: 100%
// Two Parts
#{$grid-selector}grid-box--#{$namespace}1of2
width: 50%
// Three Parts
@if $grid-columns >= 3
#{$grid-selector}grid-box--#{$namespace}1of3
width: 33.333%
#{$grid-selector}grid-box--#{$namespace}2of3
width: 66.666%
// Four Parts
@if $grid-columns >= 4
#{$grid-selector}grid-box--#{$namespace}1of4
width: 25%
#{$grid-selector}grid-box--#{$namespace}2of4
@extend #{$grid-selector}grid-box--#{$namespace}1of2
#{$grid-selector}grid-box--#{$namespace}3of4
width: 75%
// Five Parts
@if $grid-columns >= 5
#{$grid-selector}grid-box--#{$namespace}1of5
width: 20%
#{$grid-selector}grid-box--#{$namespace}2of5
width: 40%
#{$grid-selector}grid-box--#{$namespace}3of5
width: 60%
#{$grid-selector}grid-box--#{$namespace}4of5
width: 80%
// Six Parts
@if $grid-columns >= 6
#{$grid-selector}grid-box--#{$namespace}1of6
width: 16.666%
#{$grid-selector}grid-box--#{$namespace}2of6
@extend #{$grid-selector}grid-box--#{$namespace}1of3
#{$grid-selector}grid-box--#{$namespace}3of6
@extend #{$grid-selector}grid-box--#{$namespace}1of2
#{$grid-selector}grid-box--#{$namespace}4of6
@extend #{$grid-selector}grid-box--#{$namespace}2of3
#{$grid-selector}grid-box--#{$namespace}5of6
width: 83.333%
// Eight Parts
@if $grid-columns >= 8
#{$grid-selector}grid-box--#{$namespace}1of8
width: 12.5%
#{$grid-selector}grid-box--#{$namespace}2of8
@extend #{$grid-selector}grid-box--#{$namespace}1of4
#{$grid-selector}grid-box--#{$namespace}3of8
width: 37.5%
#{$grid-selector}grid-box--#{$namespace}4of8
@extend #{$grid-selector}grid-box--#{$namespace}1of2
#{$grid-selector}grid-box--#{$namespace}5of8
width: 62.5%
#{$grid-selector}grid-box--#{$namespace}6of8
@extend #{$grid-selector}grid-box--#{$namespace}3of4
#{$grid-selector}grid-box--#{$namespace}7of8
width: 87.5%
// Ten Parts
@if $grid-columns >= 10
#{$grid-selector}grid-box--#{$namespace}1of10
width: 10%
#{$grid-selector}grid-box--#{$namespace}2of10
@extend #{$grid-selector}grid-box--#{$namespace}1of5
#{$grid-selector}grid-box--#{$namespace}3of10
width: 30%
#{$grid-selector}grid-box--#{$namespace}4of10
@extend #{$grid-selector}grid-box--#{$namespace}2of5
#{$grid-selector}grid-box--#{$namespace}5of10
@extend #{$grid-selector}grid-box--#{$namespace}1of2
#{$grid-selector}grid-box--#{$namespace}6of10
@extend #{$grid-selector}grid-box--#{$namespace}3of5
#{$grid-selector}grid-box--#{$namespace}7of10
width: 70%
#{$grid-selector}grid-box--#{$namespace}8of10
@extend #{$grid-selector}grid-box--#{$namespace}4of5
#{$grid-selector}grid-box--#{$namespace}9of10
width: 90%
// Twelve Parts
@if $grid-columns >= 12
#{$grid-selector}grid-box--#{$namespace}1of12
width: 8.333%
#{$grid-selector}grid-box--#{$namespace}2of12
@extend #{$grid-selector}grid-box--#{$namespace}1of6
#{$grid-selector}grid-box--#{$namespace}3of12
@extend #{$grid-selector}grid-box--#{$namespace}1of4
#{$grid-selector}grid-box--#{$namespace}4of12
@extend #{$grid-selector}grid-box--#{$namespace}1of3
#{$grid-selector}grid-box--#{$namespace}5of12
width: 41.666%
#{$grid-selector}grid-box--#{$namespace}6of12
@extend #{$grid-selector}grid-box--#{$namespace}1of2
#{$grid-selector}grid-box--#{$namespace}7of12
width: 58.333%
#{$grid-selector}grid-box--#{$namespace}8of12
@extend #{$grid-selector}grid-box--#{$namespace}2of3
#{$grid-selector}grid-box--#{$namespace}9of12
@extend #{$grid-selector}grid-box--#{$namespace}3of4
#{$grid-selector}grid-box--#{$namespace}10of12
@extend #{$grid-selector}grid-box--#{$namespace}5of6
#{$grid-selector}grid-box--#{$namespace}11of12
width: 91.666%
// ----- Create ----- //
+device-type()
@each $device in $grid-defaults
@media screen and (min-width: nth($device, 2))
+device-type("#{nth($device, 1)}--")
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment