OO Sass Grid ('-' * 12)
A Pen by Jason Weaver on CodePen.
Created
May 15, 2015 18:41
-
-
Save mrjasonweaver/bf18cb802df3dbfcb703 to your computer and use it in GitHub Desktop.
OO Sass Grid
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| section | |
| .flex | |
| .g1-flex4.g2-flex6.g3-flex12 | |
| h2.beta.center Grid Default {.flex} | |
| .flex | |
| .g1-flex4.g2-flex6.g3-flex12 | |
| .grid-block {.g1-flex4.g2-flex6.g3-flex12} | |
| .g1-flex4.g2-flex2.g3-flex3 | |
| .grid-block {.g1-flex4.g2-flex6.g3-flex3} | |
| .g1-flex4.g2-flex4.g3-flex9 | |
| .grid-block {.g1-flex4.g2-flex6.g3-flex9} | |
| .g1-flex4.g2-flex3.g3-flex4 | |
| .grid-block {.g1-flex4.g2-flex6.g3-flex4} | |
| .g1-flex4.g2-flex3.g3-flex8 | |
| .grid-block {.g1-flex4.g2-flex6.g3-flex8} | |
| .g1-flex4.g2-flex4.g3-flex5 | |
| .grid-block {.g1-flex4.g2-flex6.g3-flex5} | |
| .g1-flex4.g2-flex2.g3-flex7 | |
| .grid-block {.g1-flex4.g2-flex6.g3-flex7} | |
| .g1-flex2.g2-flex3.g3-flex6 | |
| .grid-block {.g1-flex2.g2-flex3.g3-flex6} | |
| .g1-flex2.g2-flex3.g3-flex6 | |
| .grid-block {.g1-flex2.g2-flex3.g3-flex6} | |
| .g1-flex4.g2-flex6.g3-flex7 | |
| .grid-block {.g1-flex4.g2-flex6.g3-flex7} | |
| .g1-flex4.g2-flex6.g3-flex5 | |
| .grid-block {.g1-flex4.g2-flex6.g3-flex5} | |
| .g1-flex4.g2-flex6.g3-flex8 | |
| .grid-block {.g1-flex4.g2-flex6.g3-flex8} | |
| .g1-flex4.g2-flex6.g3-flex4 | |
| .grid-block {.g1-flex4.g2-flex6.g3-flex4} | |
| .g1-flex4.g2-flex6.g3-flex9 | |
| .grid-block {.g1-flex4.g2-flex6.g3-flex9} | |
| .g1-flex4.g2-flex6.g3-flex3 | |
| .grid-block {.g1-flex4.g2-flex6.g3-flex3} | |
| .g1-flex4.g2-flex2.g3-flex4 | |
| .grid-block {.g1-flex4.g2-flex2.g3-flex4} | |
| .g1-flex4.g2-flex2.g3-flex4 | |
| .grid-block {.g1-flex4.g2-flex2.g3-flex4} | |
| .g1-flex4.g2-flex2.g3-flex4 | |
| .grid-block {.g1-flex4.g2-flex2.g3-flex4} | |
| .g1-flex4.g2-flex3.g3-flex3 | |
| .grid-block {.g1-flex4.g2-flex3.g3-flex3} | |
| .g1-flex4.g2-flex3.g3-flex3 | |
| .grid-block {.g1-flex4.g2-flex3.g3-flex3} | |
| .g1-flex4.g2-flex3.g3-flex3 | |
| .grid-block {.g1-flex4.g2-flex3.g3-flex3} | |
| .g1-flex4.g2-flex3.g3-flex3 | |
| .grid-block {.g1-flex4.g2-flex3.g3-flex3} | |
| .flex.flex-wide | |
| .g1-flex4.g2-flex6.g3-flex12 | |
| h2.beta.center Grid Wide {.flex.flex-wide} | |
| .g1-flex4.g2-flex6.g3-flex12 | |
| .grid-block {.g1-flex4.g2-flex6.g3-flex12} | |
| .g1-flex4.g2-flex6.g3-flex6 | |
| .grid-block {.g1-flex4.g2-flex6.g3-flex6} | |
| .g1-flex4.g2-flex6.g3-flex6 | |
| .grid-block {.g1-flex4.g2-flex6.g3-flex6} | |
| .g1-flex2.g2-flex3.g3-flex6 | |
| .grid-block {.g1-flex2.g2-flex3.g3-flex6} | |
| .g1-flex2.g2-flex3.g3-flex6 | |
| .grid-block {.g1-flex2.g2-flex3.g3-flex6} | |
| .g1-flex4.g2-flex2.g3-flex4 | |
| .grid-block {.g1-flex4.g2-flex2.g3-flex4} | |
| .g1-flex4.g2-flex2.g3-flex4 | |
| .grid-block {.g1-flex4.g2-flex2.g3-flex4} | |
| .g1-flex4.g2-flex2.g3-flex4 | |
| .grid-block {.g1-flex4.g2-flex2.g3-flex4} | |
| .g1-flex4.g2-flex3.g3-flex3 | |
| .grid-block {.g1-flex4.g2-flex3.g3-flex3} | |
| .g1-flex4.g2-flex3.g3-flex3 | |
| .grid-block {.g1-flex4.g2-flex3.g3-flex3} | |
| .g1-flex4.g2-flex3.g3-flex3 | |
| .grid-block {.g1-flex4.g2-flex3.g3-flex3} | |
| .g1-flex4.g2-flex3.g3-flex3 | |
| .grid-block {.g1-flex4.g2-flex3.g3-flex3} | |
| .flex.flex-extra-wide | |
| .g1-flex4.g2-flex6.g3-flex12 | |
| h2.beta.center Grid Extra Wide {.flex.flex-extra-wide} | |
| .g1-flex4.g2-flex6.g3-flex12 | |
| .grid-block {.g1-flex4.g2-flex6.g3-flex12} | |
| .g1-flex4.g2-flex6.g3-flex6 | |
| .grid-block {.g1-flex4.g2-flex6.g3-flex6} | |
| .g1-flex4.g2-flex6.g3-flex6 | |
| .grid-block {.g1-flex4.g2-flex6.g3-flex6} | |
| .g1-flex2.g2-flex3.g3-flex6 | |
| .grid-block {.g1-flex2.g2-flex3.g3-flex6} | |
| .g1-flex2.g2-flex3.g3-flex6 | |
| .grid-block {.g1-flex2.g2-flex3.g3-flex6} | |
| .g1-flex4.g2-flex2.g3-flex4 | |
| .grid-block {.g1-flex4.g2-flex2.g3-flex4} | |
| .g1-flex4.g2-flex2.g3-flex4 | |
| .grid-block {.g1-flex4.g2-flex2.g3-flex4} | |
| .g1-flex4.g2-flex2.g3-flex4 | |
| .grid-block {.g1-flex4.g2-flex2.g3-flex4} | |
| .g1-flex4.g2-flex3.g3-flex3 | |
| .grid-block {.g1-flex4.g2-flex3.g3-flex3} | |
| .g1-flex4.g2-flex3.g3-flex3 | |
| .grid-block {.g1-flex4.g2-flex3.g3-flex3} | |
| .g1-flex4.g2-flex3.g3-flex3 | |
| .grid-block {.g1-flex4.g2-flex3.g3-flex3} | |
| .g1-flex4.g2-flex3.g3-flex3 | |
| .grid-block {.g1-flex4.g2-flex3.g3-flex3} | |
| .flex | |
| .g1-flex4.g2-flex6.g3-flex12 | |
| h2.beta.center Grid Offsets {.flex} | |
| .g1-flex4.g2-flex6.g3-flex10.g3-offset1 | |
| .grid-block {.g1-flex4.g2-flex6.g3-flex10.g3-offset1} | |
| .g1-flex4.g2-flex6.g3-flex8.g3-offset2 | |
| .grid-block {.g1-flex4.g2-flex6.g3-flex8.g3-offset2} | |
| .g1-flex4.g2-flex6.g3-flex6.g3-offset3 | |
| .grid-block {.g1-flex4.g2-flex6.g3-flex6.g3-offset3} | |
| .flex.flex-wide | |
| .g1-flex4.g2-flex6.g3-flex12 | |
| h2.beta.center Grid Offsets Wide {.flex.flex-wide} | |
| .g1-flex4.g2-flex6.g3-flex10.g3-offset1 | |
| .grid-block {.g1-flex4.g2-flex6.g3-flex10.g3-offset1} | |
| .g1-flex4.g2-flex6.g3-flex8.g3-offset2 | |
| .grid-block {.g1-flex4.g2-flex6.g3-flex8.g3-offset2} | |
| .g1-flex4.g2-flex6.g3-flex6.g3-offset3 | |
| .grid-block {.g1-flex4.g2-flex6.g3-flex6.g3-offset3} | |
| .flex.flex-extra-wide | |
| .g1-flex4.g2-flex6.g3-flex12 | |
| h2.beta.center Grid Offsets Extra Wide {.flex.flex-extra-wide} | |
| .g1-flex4.g2-flex6.g3-flex10.g3-offset1 | |
| .grid-block {.g1-flex4.g2-flex6.g3-flex10.g3-offset1} | |
| .g1-flex4.g2-flex6.g3-flex8.g3-offset2 | |
| .grid-block {.g1-flex4.g2-flex6.g3-flex8.g3-offset2} | |
| .g1-flex4.g2-flex6.g3-flex6.g3-offset3 | |
| .grid-block {.g1-flex4.g2-flex6.g3-flex6.g3-offset3} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // --- Variables | |
| // --------------------------------------------------- | |
| // grid | |
| $gutter: 10; | |
| $max-width: 1115; // Max grid wrap width | |
| $max-width-wide: 1300; // Max grid wrap width for wide sections | |
| $max-width-extra-wide: 2200; // Max grid wrap width for extra wide sections | |
| $sm-column-count: 4; | |
| $med-column-count: 6; | |
| $lg-column-count: 12; | |
| $mqs: 420; // small breakpoint | |
| $mq1: 520; // Mid range breakpoint | |
| $mq2: 700; // Med screen breakpoint | |
| $mq3: 1054; // Large screen breakpoint | |
| $mq4: 1325; // xlarge screen breakpoint | |
| $base: 16; | |
| // --- end variables --------------------------------- | |
| // --- Mixins | |
| // --------------------------------------------------- | |
| // clearfix | |
| @mixin clearfix { | |
| &:after { | |
| content: ""; | |
| display: table; | |
| clear: both; } | |
| *zoom: 1; | |
| } | |
| // Calculate small screen grid based on $sm-column-count | |
| @mixin sm-grid($columns) { | |
| width: $columns * (100% / $sm-column-count); | |
| padding: 0 $gutter+px; | |
| padding: 0 $gutter/$base+rem; | |
| } | |
| // Calculate med screen grid based on $med-column-count | |
| @mixin med-grid($columns) { | |
| width: $columns * (100% / $med-column-count); | |
| padding: 0 $gutter+px; | |
| padding: 0 $gutter/$base+rem; | |
| } | |
| // Calculate large screen grid based on $lg-column-count | |
| @mixin lg-grid($columns) { | |
| width: $columns * (100% / $lg-column-count); | |
| padding: 0 $gutter+px; | |
| padding: 0 $gutter/$base+rem; | |
| } | |
| // Flex parent container | |
| .flex { | |
| @include clearfix; | |
| position: relative; | |
| clear: both; | |
| padding: $gutter/2+px $gutter+px; | |
| display: block; | |
| max-width: $max-width+px; | |
| max-width: $max-width/$base+rem; | |
| margin: 0 auto; | |
| &.flex-wide { | |
| max-width: $max-width-wide+px; | |
| max-width: $max-width-wide/$base+rem; | |
| } | |
| &.flex-extra-wide { | |
| max-width: $max-width-extra-wide+px; | |
| max-width: $max-width-extra-wide/$base+rem; | |
| } | |
| &.tuck { | |
| padding: 0 $gutter+px; | |
| } | |
| // Grid class objects | |
| @for $i from 1 through $sm-column-count { | |
| .g1-flex#{$i} { | |
| @if $i != 3 { | |
| float: left; | |
| } | |
| @include sm-grid($i); | |
| &.push{ | |
| float: right; | |
| } | |
| } | |
| } | |
| .g1-hide, .g2-hide { | |
| display: none; | |
| } | |
| .g1-show { | |
| display: block; | |
| } | |
| // Adjust padding for nested items | |
| .flex-nested { | |
| &:first-child, | |
| &.g1-flex4:last-child { | |
| padding-left: 0; | |
| } | |
| } | |
| @media all and (min-width: $mq2/$base+em) { | |
| // Grid class objects for med screens | |
| @for $i from 1 through $med-column-count { | |
| .g2-flex#{$i} { | |
| @if $i != $med-column-count { | |
| float: left; | |
| } | |
| @include med-grid($i); | |
| &.push{ | |
| float: right; | |
| } | |
| } | |
| } | |
| .g2-show { | |
| display: block; | |
| } | |
| .g2-hide { | |
| display: none; | |
| } | |
| // Adjust padding for nested items | |
| .flex-nested { | |
| &:last-child { | |
| padding-right: 0; | |
| } | |
| &.g1-flex4:last-child { | |
| padding-left: $gutter+px; | |
| padding-left: $gutter/$base+rem; | |
| } | |
| &.g1-flex4:first-child { | |
| padding-left: 0; | |
| } | |
| } | |
| } | |
| @media all and (min-width: $mq3/$base+em) { | |
| // Grid class objects for large screens | |
| @for $i from 1 through $lg-column-count { | |
| .g3-flex#{$i} { | |
| @if $i != $lg-column-count { | |
| float: left; | |
| } | |
| @include lg-grid($i); | |
| &.push{ | |
| float: right; | |
| } | |
| } | |
| } | |
| .g3-show { | |
| display: block; | |
| } | |
| .g3-hide { | |
| display: none; | |
| } | |
| .g3-offset1 { | |
| margin-left: 8.4%; | |
| } | |
| .g3-offset2 { | |
| margin-left: 16.8%; | |
| } | |
| .g3-offset3 { | |
| margin-left: 25.2%; | |
| } | |
| } | |
| } | |
| .flex.grid-boxes { | |
| margin-bottom: 30px; | |
| @media all and (min-width: $mq3/$base+em) { | |
| padding: 0 !important; | |
| } | |
| .g3-flex4 { | |
| @media all and (min-width: $mq3/$base+em) { | |
| padding: 0 !important; | |
| } | |
| } | |
| } | |
| * { | |
| // grid needs this for padding ie8+ | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: helvetica; | |
| color: #333; | |
| } | |
| .grid-block { | |
| background: #ddd; | |
| text-align: center; | |
| margin-bottom: 15px; | |
| padding: 15px 0; | |
| } | |
| .center { | |
| text-align: center; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment