Last active
December 21, 2015 03:58
-
-
Save JoshRiser/6245947 to your computer and use it in GitHub Desktop.
Responsive 1436px 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
.container { width: 1436px; margin: auto; position: relative; } | |
.row > [class*="grid"]:last-child, .last { margin-right: 0; } | |
.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11, .grid12 { float: left; margin-right: 40px; } | |
.grid1 { width: 83px; } | |
.grid2 { width: 206px; } | |
.grid3 { width: 329px; } | |
.grid4 { width: 452px; } | |
.grid5 { width: 575px; } | |
.grid6 { width: 698px; } | |
.grid7 { width: 821px; } | |
.grid8 { width: 944px; } | |
.grid9 { width: 1067px; } | |
.grid10 { width: 1190px; } | |
.grid11 { width: 1313px; } | |
.grid12 { width: 1436px; } | |
.prefix1 { padding-left: 123px; } | |
.prefix2 { padding-left: 246px; } | |
.prefix3 { padding-left: 369px; } | |
.prefix4 { padding-left: 492px; } | |
.prefix5 { padding-left: 615px; } | |
.prefix6 { padding-left: 738px; } | |
.prefix7 { padding-left: 861px; } | |
.prefix8 { padding-left: 984px; } | |
.prefix9 { padding-left: 1107px; } | |
.prefix10 { padding-left: 1230px; } | |
.prefix11 { padding-left: 1353px; } | |
.suffix1 { padding-right: 123px; } | |
.suffix2 { padding-right: 246px; } | |
.suffix3 { padding-right: 369px; } | |
.suffix4 { padding-right: 492px; } | |
.suffix5 { padding-right: 615px; } | |
.suffix6 { padding-right: 738px; } | |
.suffix7 { padding-right: 861px; } | |
.suffix8 { padding-right: 984px; } | |
.suffix9 { padding-right: 1107px; } | |
.suffix10 { padding-right: 1230px; } | |
.suffix11 { padding-right: 1353px; } | |
@media only screen and (max-width: 1436px) { | |
.container { width: 1146px; } | |
.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11, .grid12 { margin-right: 30px; } | |
.grid1 { width: 68px; } | |
.grid2 { width: 166px; } | |
.grid3 { width: 264px; } | |
.grid4 { width: 362px; } | |
.grid5 { width: 460px; } | |
.grid6 { width: 558px; } | |
.grid7 { width: 656px; } | |
.grid8 { width: 754px; } | |
.grid9 { width: 852px; } | |
.grid10 { width: 950px; } | |
.grid11 { width: 1048px; } | |
.grid12 { width: 1146px; } | |
.prefix1 { padding-left: 98px; } | |
.prefix2 { padding-left: 196px; } | |
.prefix3 { padding-left: 294px; } | |
.prefix4 { padding-left: 392px; } | |
.prefix5 { padding-left: 490px; } | |
.prefix6 { padding-left: 588px; } | |
.prefix7 { padding-left: 686px; } | |
.prefix8 { padding-left: 784px; } | |
.prefix9 { padding-left: 882px; } | |
.prefix10 { padding-left: 980px; } | |
.prefix11 { padding-left: 1078px; } | |
.suffix1 { padding-right: 98px; } | |
.suffix2 { padding-right: 196px; } | |
.suffix3 { padding-right: 294px; } | |
.suffix4 { padding-right: 392px; } | |
.suffix5 { padding-right: 490px; } | |
.suffix6 { padding-right: 588px; } | |
.suffix7 { padding-right: 686px; } | |
.suffix8 { padding-right: 784px; } | |
.suffix9 { padding-right: 882px; } | |
.suffix10 { padding-right: 980px; } | |
.suffix11 { padding-right: 1078px; } | |
} | |
@media only screen and (max-width: 1146px) { | |
.container { width: 978px; } | |
.grid1 { width: 54px; } | |
.grid2 { width: 138px; } | |
.grid3 { width: 222px; } | |
.grid4 { width: 306px; } | |
.grid5 { width: 390px; } | |
.grid6 { width: 474px; } | |
.grid7 { width: 558px; } | |
.grid8 { width: 642px; } | |
.grid9 { width: 726px; } | |
.grid10 { width: 810px; } | |
.grid11 { width: 894px; } | |
.grid12 { width: 978px; } | |
.prefix1 { padding-left: 84px; } | |
.prefix2 { padding-left: 168px; } | |
.prefix3 { padding-left: 252px; } | |
.prefix4 { padding-left: 336px; } | |
.prefix5 { padding-left: 420px; } | |
.prefix6 { padding-left: 504px; } | |
.prefix7 { padding-left: 588px; } | |
.prefix8 { padding-left: 672px; } | |
.prefix9 { padding-left: 756px; } | |
.prefix10 { padding-left: 840px; } | |
.prefix11 { padding-left: 924px; } | |
.suffix1 { padding-right: 84px; } | |
.suffix2 { padding-right: 168px; } | |
.suffix3 { padding-right: 252px; } | |
.suffix4 { padding-right: 336px; } | |
.suffix5 { padding-right: 420px; } | |
.suffix6 { padding-right: 504px; } | |
.suffix7 { padding-right: 588px; } | |
.suffix8 { padding-right: 672px; } | |
.suffix9 { padding-right: 756px; } | |
.suffix10 { padding-right: 840px; } | |
.suffix11 { padding-right: 924px; } | |
} | |
@media only screen and (max-width: 978px) { | |
.container { width: 702px; } | |
.grid1 { width: 31px; } | |
.grid2 { width: 92px; } | |
.grid3 { width: 153px; } | |
.grid4 { width: 214px; } | |
.grid5 { width: 275px; } | |
.grid6 { width: 336px; } | |
.grid7 { width: 397px; } | |
.grid8 { width: 458px; } | |
.grid9 { width: 519px; } | |
.grid10 { width: 580px; } | |
.grid11 { width: 641px; } | |
.grid12 { width: 702px; } | |
.prefix1 { padding-left: 61px; } | |
.prefix2 { padding-left: 122px; } | |
.prefix3 { padding-left: 183px; } | |
.prefix4 { padding-left: 244px; } | |
.prefix5 { padding-left: 305px; } | |
.prefix6 { padding-left: 366px; } | |
.prefix7 { padding-left: 427px; } | |
.prefix8 { padding-left: 488px; } | |
.prefix9 { padding-left: 549px; } | |
.prefix10 { padding-left: 610px; } | |
.prefix11 { padding-left: 671px; } | |
.suffix1 { padding-right: 61px; } | |
.suffix2 { padding-right: 122px; } | |
.suffix3 { padding-right: 183px; } | |
.suffix4 { padding-right: 244px; } | |
.suffix5 { padding-right: 305px; } | |
.suffix6 { padding-right: 366px; } | |
.suffix7 { padding-right: 427px; } | |
.suffix8 { padding-right: 488px; } | |
.suffix9 { padding-right: 549px; } | |
.suffix10 { padding-right: 610px; } | |
.suffix11 { padding-right: 671px; } | |
} | |
@media only screen and (max-width: 768px) { | |
.container, .grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11, .grid12 { width: 440px; margin: auto; } | |
.prefix1, .prefix2, .prefix3, .prefix4, .prefix5, .prefix6, .prefix7, .prefix8, .prefix9, .prefix10, .prefix11, | |
.suffix1, .suffix2, .suffix3, .suffix4, .suffix5, .suffix6, .suffix7, .suffix8, .suffix9, .suffix10, .suffix11 { padding: 0; } | |
} | |
@media only screen and (max-width: 480px) { | |
.container, .grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11, .grid12 { width: 280px; } | |
.prefix1, .prefix2, .prefix3, .prefix4, .prefix5, .prefix6, .prefix7, .prefix8, .prefix9, .prefix10, .prefix11, | |
.suffix1, .suffix2, .suffix3, .suffix4, .suffix5, .suffix6, .suffix7, .suffix8, .suffix9, .suffix10, .suffix11, { padding: 0; } | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
is there a 2x ready PSD yet?