gel-grid
Version:
A flexible code implementation of the GEL Grid
2 lines (1 loc) • 9.31 kB
CSS
.gel-wrap{box-sizing:border-box;margin:0 auto;max-width:1008px;padding-right:8px;padding-left:8px}@media(min-width: 25em){.gel-wrap{padding-left:16px;padding-right:16px}}@media(min-width: 80em){.gel-wrap{max-width:1280px}}.gel-layout{direction:ltr;display:flex;flex-flow:row wrap;flex-grow:1;list-style:none;margin-right:0;margin-left:-8px;padding-right:0;padding-left:0;text-align:left;letter-spacing:-0.31em;text-rendering:optimizespeed}.gel-layout{word-spacing:-0.43em}@media(min-width: 37.5em){.gel-layout{margin-left:-16px}}.gel-layout__item{box-sizing:border-box;display:inline-block;padding-left:8px;text-align:left;vertical-align:top;width:100%;letter-spacing:normal;text-rendering:auto;word-spacing:normal}@media(min-width: 37.5em){.gel-layout__item{padding-left:16px}}.gel-layout--flush{margin-left:0}.gel-layout--flush>.gel-layout__item{padding-left:0}.gel-layout--rev{flex-direction:row-reverse}.no-flexbox .gel-layout--rev{direction:rtl;text-align:left}.no-flexbox .gel-layout--rev>.gel-layout__item{direction:ltr;text-align:left}.gel-layout--middle{align-items:center}.gel-layout--middle>.gel-layout__item{vertical-align:middle}.gel-layout--bottom{align-items:flex-end}.gel-layout--bottom>.gel-layout__item{vertical-align:bottom}.gel-layout--right{text-align:right;justify-content:flex-end}.gel-layout--right>.gel-layout__item{text-align:left}.gel-layout--center{text-align:center;justify-content:center}.gel-layout--center>.gel-layout__item{text-align:left}.gel-layout--auto>.gel-layout__item{width:auto}.gel-layout--no-flex{min-width:100%}.gel-layout--no-flex,.gel-layout--no-flex>.gel-layout__item{display:inline-block}.gel-layout--equal>.gel-layout__item{display:flex}.gel-layout--fit>.gel-layout__item{width:auto;flex:1 1 auto}.gel-layout__item--top{align-self:flex-start}.gel-layout__item--center{align-self:center}.gel-layout__item--bottom{align-self:flex-end}.gel-1\/1{width:100% }.gel-1\/2{width:50% }.gel-1\/3{width:33.33333% }.gel-2\/3{width:66.66667% }.gel-1\/4{width:25% }.gel-3\/4{width:75% }.gel-1\/5{width:20% }.gel-2\/5{width:40% }.gel-3\/5{width:60% }.gel-4\/5{width:80% }.gel-1\/8{width:12.5% }.gel-3\/8{width:37.5% }.gel-5\/8{width:62.5% }.gel-7\/8{width:87.5% }.gel-1\/10{width:10% }.gel-3\/10{width:30% }.gel-7\/10{width:70% }.gel-9\/10{width:90% }.gel-1\/12{width:8.33333% }.gel-2\/12{width:16.66667% }.gel-5\/12{width:41.66667% }.gel-7\/12{width:58.33333% }.gel-10\/12{width:83.33333% }.gel-11\/12{width:91.66667% }.gel-1\/24{width:4.16667% }.gel-5\/24{width:20.83333% }.gel-7\/24{width:29.16667% }.gel-11\/24{width:45.83333% }.gel-13\/24{width:54.16667% }.gel-17\/24{width:70.83333% }.gel-19\/24{width:79.16667% }.gel-23\/24{width:95.83333% }@media(min-width: 25em){.gel-1\/1\@s{width:100% }.gel-1\/2\@s{width:50% }.gel-1\/3\@s{width:33.33333% }.gel-2\/3\@s{width:66.66667% }.gel-1\/4\@s{width:25% }.gel-3\/4\@s{width:75% }.gel-1\/5\@s{width:20% }.gel-2\/5\@s{width:40% }.gel-3\/5\@s{width:60% }.gel-4\/5\@s{width:80% }.gel-1\/8\@s{width:12.5% }.gel-3\/8\@s{width:37.5% }.gel-5\/8\@s{width:62.5% }.gel-7\/8\@s{width:87.5% }.gel-1\/10\@s{width:10% }.gel-3\/10\@s{width:30% }.gel-7\/10\@s{width:70% }.gel-9\/10\@s{width:90% }.gel-1\/12\@s{width:8.33333% }.gel-2\/12\@s{width:16.66667% }.gel-5\/12\@s{width:41.66667% }.gel-7\/12\@s{width:58.33333% }.gel-10\/12\@s{width:83.33333% }.gel-11\/12\@s{width:91.66667% }.gel-1\/24\@s{width:4.16667% }.gel-5\/24\@s{width:20.83333% }.gel-7\/24\@s{width:29.16667% }.gel-11\/24\@s{width:45.83333% }.gel-13\/24\@s{width:54.16667% }.gel-17\/24\@s{width:70.83333% }.gel-19\/24\@s{width:79.16667% }.gel-23\/24\@s{width:95.83333% }}@media(min-width: 37.5em){.gel-1\/1\@m{width:100% }.gel-1\/2\@m{width:50% }.gel-1\/3\@m{width:33.33333% }.gel-2\/3\@m{width:66.66667% }.gel-1\/4\@m{width:25% }.gel-3\/4\@m{width:75% }.gel-1\/5\@m{width:20% }.gel-2\/5\@m{width:40% }.gel-3\/5\@m{width:60% }.gel-4\/5\@m{width:80% }.gel-1\/8\@m{width:12.5% }.gel-3\/8\@m{width:37.5% }.gel-5\/8\@m{width:62.5% }.gel-7\/8\@m{width:87.5% }.gel-1\/10\@m{width:10% }.gel-3\/10\@m{width:30% }.gel-7\/10\@m{width:70% }.gel-9\/10\@m{width:90% }.gel-1\/12\@m{width:8.33333% }.gel-2\/12\@m{width:16.66667% }.gel-5\/12\@m{width:41.66667% }.gel-7\/12\@m{width:58.33333% }.gel-10\/12\@m{width:83.33333% }.gel-11\/12\@m{width:91.66667% }.gel-1\/24\@m{width:4.16667% }.gel-5\/24\@m{width:20.83333% }.gel-7\/24\@m{width:29.16667% }.gel-11\/24\@m{width:45.83333% }.gel-13\/24\@m{width:54.16667% }.gel-17\/24\@m{width:70.83333% }.gel-19\/24\@m{width:79.16667% }.gel-23\/24\@m{width:95.83333% }}@media(min-width: 56.25em){.gel-1\/1\@l{width:100% }.gel-1\/2\@l{width:50% }.gel-1\/3\@l{width:33.33333% }.gel-2\/3\@l{width:66.66667% }.gel-1\/4\@l{width:25% }.gel-3\/4\@l{width:75% }.gel-1\/5\@l{width:20% }.gel-2\/5\@l{width:40% }.gel-3\/5\@l{width:60% }.gel-4\/5\@l{width:80% }.gel-1\/8\@l{width:12.5% }.gel-3\/8\@l{width:37.5% }.gel-5\/8\@l{width:62.5% }.gel-7\/8\@l{width:87.5% }.gel-1\/10\@l{width:10% }.gel-3\/10\@l{width:30% }.gel-7\/10\@l{width:70% }.gel-9\/10\@l{width:90% }.gel-1\/12\@l{width:8.33333% }.gel-2\/12\@l{width:16.66667% }.gel-5\/12\@l{width:41.66667% }.gel-7\/12\@l{width:58.33333% }.gel-10\/12\@l{width:83.33333% }.gel-11\/12\@l{width:91.66667% }.gel-1\/24\@l{width:4.16667% }.gel-5\/24\@l{width:20.83333% }.gel-7\/24\@l{width:29.16667% }.gel-11\/24\@l{width:45.83333% }.gel-13\/24\@l{width:54.16667% }.gel-17\/24\@l{width:70.83333% }.gel-19\/24\@l{width:79.16667% }.gel-23\/24\@l{width:95.83333% }}@media(min-width: 63em){.gel-1\/1\@xl{width:100% }.gel-1\/2\@xl{width:50% }.gel-1\/3\@xl{width:33.33333% }.gel-2\/3\@xl{width:66.66667% }.gel-1\/4\@xl{width:25% }.gel-3\/4\@xl{width:75% }.gel-1\/5\@xl{width:20% }.gel-2\/5\@xl{width:40% }.gel-3\/5\@xl{width:60% }.gel-4\/5\@xl{width:80% }.gel-1\/8\@xl{width:12.5% }.gel-3\/8\@xl{width:37.5% }.gel-5\/8\@xl{width:62.5% }.gel-7\/8\@xl{width:87.5% }.gel-1\/10\@xl{width:10% }.gel-3\/10\@xl{width:30% }.gel-7\/10\@xl{width:70% }.gel-9\/10\@xl{width:90% }.gel-1\/12\@xl{width:8.33333% }.gel-2\/12\@xl{width:16.66667% }.gel-5\/12\@xl{width:41.66667% }.gel-7\/12\@xl{width:58.33333% }.gel-10\/12\@xl{width:83.33333% }.gel-11\/12\@xl{width:91.66667% }.gel-1\/24\@xl{width:4.16667% }.gel-5\/24\@xl{width:20.83333% }.gel-7\/24\@xl{width:29.16667% }.gel-11\/24\@xl{width:45.83333% }.gel-13\/24\@xl{width:54.16667% }.gel-17\/24\@xl{width:70.83333% }.gel-19\/24\@xl{width:79.16667% }.gel-23\/24\@xl{width:95.83333% }}@media(min-width: 80em){.gel-1\/1\@xxl{width:100% }.gel-1\/2\@xxl{width:50% }.gel-1\/3\@xxl{width:33.33333% }.gel-2\/3\@xxl{width:66.66667% }.gel-1\/4\@xxl{width:25% }.gel-3\/4\@xxl{width:75% }.gel-1\/5\@xxl{width:20% }.gel-2\/5\@xxl{width:40% }.gel-3\/5\@xxl{width:60% }.gel-4\/5\@xxl{width:80% }.gel-1\/8\@xxl{width:12.5% }.gel-3\/8\@xxl{width:37.5% }.gel-5\/8\@xxl{width:62.5% }.gel-7\/8\@xxl{width:87.5% }.gel-1\/10\@xxl{width:10% }.gel-3\/10\@xxl{width:30% }.gel-7\/10\@xxl{width:70% }.gel-9\/10\@xxl{width:90% }.gel-1\/12\@xxl{width:8.33333% }.gel-2\/12\@xxl{width:16.66667% }.gel-5\/12\@xxl{width:41.66667% }.gel-7\/12\@xxl{width:58.33333% }.gel-10\/12\@xxl{width:83.33333% }.gel-11\/12\@xxl{width:91.66667% }.gel-1\/24\@xxl{width:4.16667% }.gel-5\/24\@xxl{width:20.83333% }.gel-7\/24\@xxl{width:29.16667% }.gel-11\/24\@xxl{width:45.83333% }.gel-13\/24\@xxl{width:54.16667% }.gel-17\/24\@xxl{width:70.83333% }.gel-19\/24\@xxl{width:79.16667% }.gel-23\/24\@xxl{width:95.83333% }}