Last active
August 24, 2016 20:43
-
-
Save jeffschwartz/3fb18902536e5c16320f23ee400dfb19 to your computer and use it in GitHub Desktop.
12 Column, Mobile First Grid System
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
* { | |
box-sizing: border-box; | |
} | |
/* | |
* 12 Column, Mobile First Grid System | |
*/ | |
/* clear fix */ | |
.row::after { | |
content: ""; | |
clear: both; | |
display: block; | |
} | |
/* mobile columns */ | |
[class*="col-"] { | |
width: 100%; | |
} | |
/* tablet columns: */ | |
@media only screen and (min-width: 600px) { | |
[class*="col-"] { | |
float: left; | |
padding: 15px; | |
} | |
[class*="span-col"]:after { | |
content: ""; | |
} | |
.col-m-1 {width: 8.33%;} | |
.col-m-2 {width: 16.66%;} | |
.col-m-3 {width: 25%;} | |
.col-m-4 {width: 33.33%;} | |
.col-m-5 {width: 41.66%;} | |
.col-m-6 {width: 50%;} | |
.col-m-7 {width: 58.33%;} | |
.col-m-8 {width: 66.66%;} | |
.col-m-9 {width: 75%;} | |
.col-m-10 {width: 83.33%;} | |
.col-m-11 {width: 91.66%;} | |
.col-m-12 {width: 100%;} | |
.span-col-m-left-1 {margin-left: 8.33%;} | |
.span-col-m-left-2 {margin-left: 16.66%;} | |
.span-col-m-left-3 {margin-left: 25%;} | |
.span-col-m-left-4 {margin-left: 33.33%;} | |
.span-col-m-left-5 {margin-left: 41.66%;} | |
.span-col-m-left-6 {margin-left: 50%;} | |
.span-col-m-left-7 {margin-left: 58.33%;} | |
.span-col-m-left-8 {margin-left: 66.66%;} | |
.span-col-m-left-9 {margin-left: 75%;} | |
.span-col-m-left-10 {margin-left: 83.33%;} | |
.span-col-m-left-11 {margin-left: 91.66%;} | |
.span-col-m-left-12 {margin-left: 100%;} | |
.span-col-m-right-1 {margin-right: 8.33%;} | |
.span-col-m-right-2 {margin-right: 16.66%;} | |
.span-col-m-right-3 {margin-right: 25%;} | |
.span-col-m-right-4 {margin-right: 33.33%;} | |
.span-col-m-right-5 {margin-right: 41.66%;} | |
.span-col-m-right-6 {margin-right: 50%;} | |
.span-col-m-right-7 {margin-right: 58.33%;} | |
.span-col-m-right-8 {margin-right: 66.66%;} | |
.span-col-m-right-9 {margin-right: 75%;} | |
.span-col-m-right-10 {margin-right: 83.33%;} | |
.span-col-m-right-11 {margin-right: 91.66%;} | |
.span-col-m-right-12 {margin-right: 100%;} | |
} | |
/* desktop columns */ | |
@media only screen and (min-width: 768px) { | |
[class*="col-"] { | |
float: left; | |
padding: 15px; | |
} | |
[class*="span-col"]:after { | |
content: ""; | |
} | |
.col-1 {width: 8.33%;} | |
.col-2 {width: 16.66%;} | |
.col-3 {width: 25%;} | |
.col-4 {width: 33.33%;} | |
.col-5 {width: 41.66%;} | |
.col-6 {width: 50%;} | |
.col-7 {width: 58.33%;} | |
.col-8 {width: 66.66%;} | |
.col-9 {width: 75%;} | |
.col-10 {width: 83.33%;} | |
.col-11 {width: 91.66%;} | |
.col-12 {width: 100%;} | |
.span-col-left-1 {margin-left: 8.33%;} | |
.span-col-left-2 {margin-left: 16.66%;} | |
.span-col-left-3 {margin-left: 25%;} | |
.span-col-left-4 {margin-left: 33.33%;} | |
.span-col-left-5 {margin-left: 41.66%;} | |
.span-col-left-6 {margin-left: 50%;} | |
.span-col-left-7 {margin-left: 58.33%;} | |
.span-col-left-8 {margin-left: 66.66%;} | |
.span-col-left-9 {margin-left: 75%;} | |
.span-col-left-10 {margin-left: 83.33%;} | |
.span-col-left-11 {margin-left: 91.66%;} | |
.span-col-left-12 {margin-left: 100%;} | |
.span-col-right-1 {margin-right: 8.33%;} | |
.span-col-right-2 {margin-right: 16.66%;} | |
.span-col-right-3 {margin-right: 25%;} | |
.span-col-right-4 {margin-right: 33.33%;} | |
.span-col-right-5 {margin-right: 41.66%;} | |
.span-col-right-6 {margin-right: 50%;} | |
.span-col-right-7 {margin-right: 58.33%;} | |
.span-col-right-8 {margin-right: 66.66%;} | |
.span-col-right-9 {margin-right: 75%;} | |
.span-col-right-10 {margin-right: 83.33%;} | |
.span-col-riGght-11 {margin-right: 91.66%;} | |
.span-col-right-12 {margin-right: 100%;} | |
} | |
.col-text-right { | |
text-align: right; | |
} | |
.col-text-center { | |
text-align: center; | |
} | |
/* End of 12 Column, Mobile First Grid System */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
JS Bin is here: https://jsbin.com/jibodeyuxa/edit?html,css