Created
July 14, 2017 13:36
-
-
Save sokoljr/fc1c5039ea9077d503040953158640e1 to your computer and use it in GitHub Desktop.
grid sass
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
| $gridColumnCount : 24; // Total column count | |
| $gridGutterWidth : 32; // [in pixels] | |
| $gridColumnPadding : 0; // [in pixels] | |
| $gridMaxWidth : 1504; // [in pixels] | |
| $gridMargin : 0; // [in pixels] Space outside the grid | |
| @function gridColumnWidth() { | |
| @return $gridMaxWidth / $gridColumnCount; | |
| } | |
| // Grid calculations | |
| @function gridColumnWidthCalc($colNumber) { | |
| // Is correct | |
| @if $gridGutterWidth == 0 { | |
| @return percentage($colNumber / $gridColumnCount); | |
| } | |
| // Is incorrect | |
| @else { | |
| @return percentage( (($colNumber / $gridColumnCount) - gutterCalc(false) ) ); | |
| } | |
| } | |
| // Accepts a number of columns that a block should span. | |
| // Returns a percentage width for that block. | |
| @mixin columns($columnSpan: 1) { | |
| $number-of-blocks-in-container: $gridColumnCount / $columnSpan; | |
| $total-width-of-all-gutters: gutterCalc(false) * ($number-of-blocks-in-container - 1); | |
| $total-width-of-all-blocks: 1 - $total-width-of-all-gutters; | |
| $width-of-a-single-block: $total-width-of-all-blocks / $number-of-blocks-in-container; | |
| width: percentage( $width-of-a-single-block ); | |
| } | |
| @function gutterCalc($showUnit: true) { | |
| @if $showUnit == true { | |
| @return percentage( $gridGutterWidth / $gridMaxWidth ); | |
| } @else { | |
| @return $gridGutterWidth / ( $gridMaxWidth - ($gridMargin * 2) ); | |
| } | |
| } | |
| @mixin gridColumn() { | |
| @if $gridGutterWidth > 0 { | |
| margin-left: gutterCalc(); | |
| } | |
| @if $gridColumnPadding > 0 { | |
| padding: $gridColumnPadding + px; | |
| } | |
| float: left; | |
| min-height: 30px; | |
| position: relative; | |
| clear: none; | |
| &:first-child { | |
| margin-left: 0; | |
| } | |
| background-color: pink; | |
| border: 1px solid red; | |
| } | |
| @mixin clearfix { | |
| *zoom: 1; | |
| &:before, | |
| &:after { | |
| content: " "; | |
| display: table; | |
| } | |
| &:after { | |
| clear: both; | |
| } | |
| } | |
| @for $i from 1 to $gridColumnCount + 1 { | |
| .span#{$i} { @include columns($i); } | |
| } | |
| .container { | |
| padding-left: $gridMargin + px; | |
| padding-right: $gridMargin + px; | |
| width: 95%; | |
| max-width: $gridMaxWidth + px; | |
| margin: 0 auto; | |
| } | |
| .row { | |
| margin-bottom: 10px; | |
| @include clearfix(); | |
| } | |
| .col { | |
| @include gridColumn(); | |
| } | |
| .col + .col:last-child { | |
| float: right; | |
| } | |
| .col + .col.end { | |
| float: left; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment