Created
March 18, 2012 02:55
-
-
Save lesjames/2068205 to your computer and use it in GitHub Desktop.
Grid and Media Query Generator
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
| // typography config | |
| $font-size: 16px !default; // your base font-size in pixels | |
| $line-height: 1.5em !default; // 24px line height | |
| $em: $font-size / 1em !default; // shorthand for outputting ems | |
| // grid size config | |
| $column: 48px !default; // column-width of your grid in pixels | |
| $gutter: 24px !default; // gutter-width of your grid in pixels | |
| // column-widths in a function, in ems | |
| @function width($col:1, $base:1) { @return (($col * ($column + $gutter) - $gutter) / $base) / $em; } | |
| // create dynamic media queries based off of available grid columns | |
| @mixin respond-to($size) { | |
| @for $i from 5 through 16 { | |
| @if ($size == $i) { @media (min-width: (width($i) + ($gutter / $em) * 2 )) { @content } } | |
| } | |
| } | |
| // mixin that will size an element in columns to be triggered at specific media query size | |
| @mixin mq($size, $mq:$size) { | |
| @include respond-to($mq) { & { width: width($size); } } | |
| } | |
| // mobile first fluid layout | |
| .container { width: auto; margin: 0 $gutter; } | |
| .col { float: none; margin-left: 0; width: auto; } | |
| // media query size to turn off fluid and go fixed width | |
| @mixin triggerGrid($size:8) { | |
| @include respond-to(8) { | |
| .container { margin: 0 auto; @extend .clearfix; width: width(8); } | |
| .col { float: left; margin-left: $gutter / $em; &:first-child { margin-left: 0; } } | |
| } | |
| } |
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
| // trigger fixed grid at 8 col | |
| @include triggerGrid(8); | |
| // set grid sizes for layout | |
| // 8 col .container is already set by triggerGrid(8) | |
| .container { @include mq(12); @include mq(16); } | |
| .main { @include mq(4, 8); @include mq(8, 12); @include mq(12, 16); } | |
| .sidebar { @include mq(4, 8); } // .sidebar size always stays at 4 col |
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
| .container { | |
| width: auto; | |
| margin: 0 24px; | |
| } | |
| .col { | |
| float: none; | |
| margin-left: 0; | |
| width: auto; | |
| } | |
| @media (min-width: 37.5em) { | |
| .container { | |
| margin: 0 auto; | |
| width: 34.5em; | |
| } | |
| .col { | |
| float: left; | |
| margin-left: 1.5em; | |
| } | |
| .col:first-child { | |
| margin-left: 0; | |
| } | |
| } | |
| @media (min-width: 55.5em) { | |
| .container { width: 52.5em; } | |
| } | |
| @media (min-width: 73.5em) { | |
| .container { width: 70.5em; } | |
| } | |
| @media (min-width: 37.5em) { | |
| .main { width: 16.5em; } | |
| } | |
| @media (min-width: 55.5em) { | |
| .main { width: 34.5em; } | |
| } | |
| @media (min-width: 73.5em) { | |
| .main { width: 52.5em; } | |
| } | |
| @media (min-width: 37.5em) { | |
| .sidebar { width: 16.5em; } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment