Last active
December 21, 2015 14:29
-
-
Save robspangler/6320183 to your computer and use it in GitHub Desktop.
Grid frameworks are generally way too bloated. This is a 12 column grid based off of 960px with 20px gutters, converted to percentages (so it works in any sized new or pre-existing layout). Sample:<div class="row"> <div class="column eight">Eight Columns</div> <div class="column four">Four Columns</div></div>
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
/* Grid Columns -- 12 columns based off of 960px with 20px gutters*/ | |
.row { clear: both; } | |
.row:before, .row:after {content: " "; display: table; } .row:after { clear: both; } /*clearfix*/ | |
.row .column { padding-left: 1.041666666%; padding-right: 1.041666666%; /*gutter*/ float: left; } | |
.row .column.right { float: right; /*good if you have a sidebar and need to skip a column & float it right*/ } | |
.row .one { width: 6.25%; } | |
.row .two { width: 14.583333333%; } | |
.row .three { width: 22.916666666%; } | |
.row .four { width: 31.25%; } | |
.row .five { width: 39.583333333%; } | |
.row .six { width: 47.916666666%; } | |
.row .seven { width: 56.25%; } | |
.row .eight { width: 64.583333333%; } | |
.row .nine { width: 72.916666666%; } | |
.row .ten { width: 81.25%; } | |
.row .eleven { width: 89.583333333%; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment