Skip to content

Instantly share code, notes, and snippets.

@JoshRiser
Last active December 21, 2015 03:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save JoshRiser/6245947 to your computer and use it in GitHub Desktop.
Save JoshRiser/6245947 to your computer and use it in GitHub Desktop.
Responsive 1436px Grid
.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; }
}
@jrdn91
Copy link

jrdn91 commented Aug 16, 2013

is there a 2x ready PSD yet?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment