Skip to content

Instantly share code, notes, and snippets.

@plugnburn
Last active August 29, 2015 14:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save plugnburn/2058dd72ebd63958e04f to your computer and use it in GitHub Desktop.
Save plugnburn/2058dd72ebd63958e04f to your computer and use it in GitHub Desktop.
neoGrid
.row{width:100%;display:table;table-layout:fixed;border-collapse:collapse;margin:0;padding:0}
.row.auto{table-layout:auto}
.col,.col1,.col2,.col3,.col4,.col5,.col6,.col7,.col8,.col9,.col10,.col11,.col12{display:table-cell;border:hidden;vertical-align:top;margin:0;padding:0}
.vpos-middle{vertical-align:middle}
.vpos-bottom{vertical-align:bottom}
.col1{width:8.333333%;width:-webkit-calc(100%/12);width:-moz-calc(100%/12);width:calc(100%/12)}
.col2{width:16.666666%;width:-webkit-calc(100%/6);width:-moz-calc(100%/6);width:calc(100%/6)}
.col3{width:25%}
.col4{width:33.333333%;width:-webkit-calc(100%/3);width:-moz-calc(100%/3);width:calc(100%/3)}
.col5{width:41.666666%;width:-webkit-calc(500%/12);width:-moz-calc(500%/12);width:calc(500%/12)}
.col6{width:50%}
.col7{width:58.333333%;width:-webkit-calc(700%/12);width:-moz-calc(700%/12);width:calc(700%/12)}
.col8{width:66.666666%;width:-webkit-calc(200%/3);width:-moz-calc(200%/3);width:calc(200%/3)}
.col9{width:75%}
.col10{width:83.333333%;width:-webkit-calc(500%/6);width:-moz-calc(500%/6);width:calc(500%/6)}
.col11{width:91.666666%;width:-webkit-calc(1100%/12);width:-moz-calc(1100%/12);width:calc(1100%/12)}
.col12{width:100%}
.hide,.empty-hide:empty{display:none!important}
/*Tablet rendering*/
@media (min-width:480px) and (max-width:800px){
.pad-fluid{width:auto}
.pad-hide{display:none}
}
/*Smartphone rendering*/
@media (max-width:480px){
.row,.col,.col1,.col2,.col3,.col4,.col5,.col6,.col7,.col8,.col9,.col10,.col11,.col12{display:block;width:100%}
.mob-hide{display:none}
}
/*Orientation dependent display*/
@media screen and (orientation:portrait) {
.port-fluid{width:auto}
.port-hide{display:none}
}
@media screen and (orientation:landscape) {
.land-fluid{width:auto}
.land-hide{display:none}
}
/*High and low resolution dependent display*/
@media (-webkit-max-device-pixel-ratio:1),(max-resolution:96dpi),(max-resolution:1dppx) {
.lodpi-hide{display:none}
.lodpi-fluid{width:auto}
}
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi),(min-resolution:2dppx) {
.hidpi-hide{display:none}
.hidpi-fluid{width:auto}
}
/*Fullscreen dependent display*/
.fs-hide:-webkit-full-screen, .fs-show:not(:-webkit-full-screen){display:none}
.fs-hide:-moz-full-screen, .fs-show:not(:-moz-full-screen){display:none}
.fs-hide:-ms-fullscreen, .fs-show:not(:-ms-fullscreen){display:none}
.fs-hide:fullscreen, .fs-show:not(:fullscreen){display:none}
.fs-fluid:-webkit-full-screen{width:auto}
.fs-fluid:-moz-fullscreen{width:auto}
.fs-fluid:-ms-fullscreen{width:auto}
.fs-fluid:fullscreen{width:auto}
.nofs-fluid:not(-webkit-full-screen){width:auto}
.nofs-fluid:not(-moz-fullscreen){width:auto}
.nofs-fluid:not(-ms-fullscreen){width:auto}
.nofs-fluid:not(fullscreen){width:auto}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment