Skip to content

Instantly share code, notes, and snippets.

@gustavokuklinski
Last active December 25, 2015 00:49
Show Gist options
  • Save gustavokuklinski/6890805 to your computer and use it in GitHub Desktop.
Save gustavokuklinski/6890805 to your computer and use it in GitHub Desktop.
Simply Mobile First Responsive grid system
/**
*
* For Prototyping - Debugger
*
**/
.container-* { min-height: 40px; outline: 1px solid #cccccc; }
.row { min-height: 40px; outline: 2px solid #00ff00; }
.block1, .block2, .block2-2, .block3 { min-height: 40px; outline: 2px solid #ff0000; }
/* ====================================================================================================================== */
/* ====================================================================================================================== */
/**
*
* RESET
* - Clear all default margins
*
**/
* { padding: 0; margin: 0; }
html,
html a { -webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0,0,0,0.004); }
body { font-family: Arial; font-size: 1em; }
/* ====================================================================================================================== */
/* ====================================================================================================================== */
/**
*
* Static GRID
* - For fixed web sites
*
**/
/* Static Grid */
.container-stc { width: 1028px; margin: 0 auto; }
.container-stc .block1 { width: 293px; min-height: 30px; display: inline-block; vertical-align: top; }
.container-stc .block2 { width: 660px; min-height: 30px; display: inline-block; vertical-align: top; }
.container-stc .block3 { width: 1028px; min-height: 30px; display: inline-block; vertical-align: top; }
.container-stc .block2-2 { width: 477px; min-height: 30px; display: inline-block; vertical-align: top; }
.container-stc .block1:nth-child(1n+2),
.container-stc .block2-2:nth-child(1n+2),
.container-stc .block2:nth-child(2n+2) { margin-left: 70px; }
.container-stc .begin { margin-left: 0 !important; }
/* ====================================================================================================================== */
/* ====================================================================================================================== */
/**
*
* Responsive GRID
* - Mobile First
*
**/
/* Mobile First */
.container-rwd { width: 95%; margin: 0 auto; }
.row,
.container-rwd .block1,
.container-rwd .block2,
.container-rwd .block3,
.container-rwd .block2-2 { width: 100%; display: inline-block; vertical-align: top; }
@media (min-width: 37.500em) { /* 600px - Mobile */
.container-rwd { width: 37.500em; }
.container-rwd .block1,
.container-rwd .block2,
.container-rwd .block2-2 { width: 18em; }
.container-rwd .block1:nth-child(1n + 2),
.container-rwd .block2:nth-child(1n + 2),
.container-rwd .block2-2:nth-child(1n + 2) { margin-left: 1.222222em; }
.container-rwd .block1:nth-child(1n + 3),
.container-rwd .block2:nth-child(1n + 3) { margin-left: 0; }
}
@media (min-width: 50em) { /* 800px - Tablet */
.container-rwd { width: 48em; }
.container-rwd .block1,
.container-rwd .block2,
.container-rwd .block2-2 { width: 23.2555em; }
}
@media (min-width: 56.25em) { /* 900px - Tablet */
.container-rwd { width: 56.25em; }
.container-rwd .block1 { width: 16.7999em; }
.container-rwd .block2 { width: 36.5544em; }
.container-rwd .block2-2 { width: 26.6666em; }
.container-rwd .block1:nth-child(1n + 2),
.container-rwd .block2:nth-child(1n + 2),
.container-rwd .block2-2:nth-child(1n + 2) { margin-left: 2.6em; }
}
@media (min-width: 68.75em) { /* 1100px - Desktop */
.container-rwd { width: 68.75em; }
.container-rwd .block1 { width: 20.89999em; }
.container-rwd .block2 { width: 44.777777em; }
.container-rwd .block2-2 { width: 32.88888em; }
.container-rwd .block1:nth-child(1n + 2),
.container-rwd .block2:nth-child(1n + 2),
.container-rwd .block2-2:nth-child(1n + 2) { margin-left: 2.7em; }
}
@media (min-width: 75.000em) { /* 1200px - Desktop */
.container-rwd { width: 75.000em; }
.container-rwd .block1 { width: 23em; }
.container-rwd .block2 { width: 48.99999em; }
.container-rwd .block2-2 { width: 36em; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment