Skip to content

Instantly share code, notes, and snippets.

@bryanwillis

bryanwillis/gridlex.css

Last active October 14, 2016 17:25
Show Gist options
  • Save bryanwillis/1ca6b2a98908c2dcf88017a9bf19c2ef to your computer and use it in GitHub Desktop.
Save bryanwillis/1ca6b2a98908c2dcf88017a9bf19c2ef to your computer and use it in GitHub Desktop.
Download ZIP
Mobile First Gridlex Testing with responsive hidden columns
Raw
gridlex.css
/* ==========================================================================
GRIDLEX
Just a Flexbox Grid System
========================================================================== */
[class*="grid"] {
box-sizing: border-box;
display: flex;
flex-flow: row wrap;
margin: 0 -8px;
}
.col,
[class*="col-"] {
box-sizing: border-box;
flex: 0 0 auto;
padding: 0 8px 16px;
}
.col {
flex: 1 1 0%;
}
.grid.col,
.grid[class*="col-"] {
margin: 0;
padding: 0;
}
/************************
HELPERS SUFFIXES
*************************/
[class*="grid-"][class*="-noGutter"] {
margin: 0;
}
[class*="grid-"][class*="-noGutter"] > [class*="col"] {
padding: 0;
}
[class*="grid-"][class*="-center"] {
justify-content: center;
}
[class*="grid-"][class*="-right"] {
justify-content: flex-end;
align-self: flex-end;
margin-left: auto;
}
[class*="grid-"][class*="-top"] {
align-items: flex-start;
}
[class*="grid-"][class*="-middle"] {
align-items: center;
}
[class*="grid-"][class*="-bottom"] {
align-items: flex-end;
}
[class*="grid-"][class*="-reverse"] {
flex-direction: row-reverse;
}
[class*="grid-"][class*="-column"] {
flex-direction: column;
}
[class*="grid-"][class*="-column"] > [class*="col-"] {
flex-basis: auto;
}
[class*="grid-"][class*="-column-reverse"] {
flex-direction: column-reverse;
}
[class*="grid-"][class*="-spaceBetween"] {
justify-content: space-between;
}
[class*="grid-"][class*="-spaceAround"] {
justify-content: space-around;
}
[class*="grid-"][class*="-noBottom"] > [class*="col"] {
padding-bottom: 0;
}
[class*="col-"][class*="-top"] {
align-self: flex-start;
}
[class*="col-"][class*="-middle"] {
align-self: center;
}
[class*="col-"][class*="-bottom"] {
align-self: flex-end;
}
[class*="col-"][class*="-first"] {
order: -1;
}
[class*="col-"][class*="-last"] {
order: 1;
}
/************************
HIDING COLS
*************************/
[class*="col-"][class*="-1"], [class*="col-"][class*="-2"], [class*="col-"][class*="-3"], [class*="col-"][class*="-4"], [class*="col-"][class*="-5"], [class*="col-"][class*="-6"], [class*="col-"][class*="-7"], [class*="col-"][class*="-8"], [class*="col-"][class*="-9"], [class*="col-"][class*="-10"], [class*="col-"][class*="-11"], [class*="col-"][class*="-12"] {
display: block;
}
[class*="col-"][class*="-0"] {
display: none;
}
@media screen and (min-width: 320px) {
[class*="col-"][class*="_xs-1"], [class*="col-"][class*="_xs-2"], [class*="col-"][class*="_xs-3"], [class*="col-"][class*="_xs-4"], [class*="col-"][class*="_xs-5"], [class*="col-"][class*="_xs-6"], [class*="col-"][class*="_xs-7"], [class*="col-"][class*="_xs-8"], [class*="col-"][class*="_xs-9"], [class*="col-"][class*="_xs-10"], [class*="col-"][class*="_xs-11"], [class*="col-"][class*="_xs-12"] {
display: block;
}
[class*="col-"][class*="_xs-0"] {
display: none;
}
}
@media screen and (min-width: 480px) {
[class*="col-"][class*="_sm-1"], [class*="col-"][class*="_sm-2"], [class*="col-"][class*="_sm-3"], [class*="col-"][class*="_sm-4"], [class*="col-"][class*="_sm-5"], [class*="col-"][class*="_sm-6"], [class*="col-"][class*="_sm-7"], [class*="col-"][class*="_sm-8"], [class*="col-"][class*="_sm-9"], [class*="col-"][class*="_sm-10"], [class*="col-"][class*="_sm-11"], [class*="col-"][class*="_sm-12"] {
display: block;
}
[class*="col-"][class*="_sm-0"] {
display: none;
}
}
@media screen and (min-width: 768px) {
[class*="col-"][class*="_md-1"], [class*="col-"][class*="_md-2"], [class*="col-"][class*="_md-3"], [class*="col-"][class*="_md-4"], [class*="col-"][class*="_md-5"], [class*="col-"][class*="_md-6"], [class*="col-"][class*="_md-7"], [class*="col-"][class*="_md-8"], [class*="col-"][class*="_md-9"], [class*="col-"][class*="_md-10"], [class*="col-"][class*="_md-11"], [class*="col-"][class*="_md-12"] {
display: block;
}
[class*="col-"][class*="_md-0"] {
display: none;
}
}
@media screen and (min-width: 992px) {
[class*="col-"][class*="_lg-1"], [class*="col-"][class*="_lg-2"], [class*="col-"][class*="_lg-3"], [class*="col-"][class*="_lg-4"], [class*="col-"][class*="_lg-5"], [class*="col-"][class*="_lg-6"], [class*="col-"][class*="_lg-7"], [class*="col-"][class*="_lg-8"], [class*="col-"][class*="_lg-9"], [class*="col-"][class*="_lg-10"], [class*="col-"][class*="_lg-11"], [class*="col-"][class*="_lg-12"] {
display: block;
}
[class*="col-"][class*="_lg-0"] {
display: none;
}
}
@media screen and (min-width: 1200px) {
[class*="col-"][class*="_xl-1"], [class*="col-"][class*="_xl-2"], [class*="col-"][class*="_xl-3"], [class*="col-"][class*="_xl-4"], [class*="col-"][class*="_xl-5"], [class*="col-"][class*="_xl-6"], [class*="col-"][class*="_xl-7"], [class*="col-"][class*="_xl-8"], [class*="col-"][class*="_xl-9"], [class*="col-"][class*="_xl-10"], [class*="col-"][class*="_xl-11"], [class*="col-"][class*="_xl-12"] {
display: block;
}
[class*="col-"][class*="_xl-0"] {
display: none;
}
}
/************************
GRID BY NUMBER
*************************/
[class*="grid-1"] > .col, [class*="grid-1"] > [class*='col-'] {
flex-basis: 100%;
max-width: 100%;
}
[class*="grid-2"] > .col, [class*="grid-2"] > [class*='col-'] {
flex-basis: 50%;
max-width: 50%;
}
[class*="grid-3"] > .col, [class*="grid-3"] > [class*='col-'] {
flex-basis: 33.33333%;
max-width: 33.33333%;
}
[class*="grid-4"] > .col, [class*="grid-4"] > [class*='col-'] {
flex-basis: 25%;
max-width: 25%;
}
[class*="grid-5"] > .col, [class*="grid-5"] > [class*='col-'] {
flex-basis: 20%;
max-width: 20%;
}
[class*="grid-6"] > .col, [class*="grid-6"] > [class*='col-'] {
flex-basis: 16.66667%;
max-width: 16.66667%;
}
[class*="grid-7"] > .col, [class*="grid-7"] > [class*='col-'] {
flex-basis: 14.28571%;
max-width: 14.28571%;
}
[class*="grid-8"] > .col, [class*="grid-8"] > [class*='col-'] {
flex-basis: 12.5%;
max-width: 12.5%;
}
[class*="grid-9"] > .col, [class*="grid-9"] > [class*='col-'] {
flex-basis: 11.11111%;
max-width: 11.11111%;
}
[class*="grid-10"] > .col, [class*="grid-10"] > [class*='col-'] {
flex-basis: 10%;
max-width: 10%;
}
[class*="grid-11"] > .col, [class*="grid-11"] > [class*='col-'] {
flex-basis: 9.09091%;
max-width: 9.09091%;
}
[class*="grid-12"] > .col, [class*="grid-12"] > [class*='col-'] {
flex-basis: 8.33333%;
max-width: 8.33333%;
}
@media screen and (min-width: 320px) {
[class*="_xs-1"] > .col, [class*="_xs-1"] > [class*='col-'] {
flex-basis: 100%;
max-width: 100%;
}
[class*="_xs-2"] > .col, [class*="_xs-2"] > [class*='col-'] {
flex-basis: 50%;
max-width: 50%;
}
[class*="_xs-3"] > .col, [class*="_xs-3"] > [class*='col-'] {
flex-basis: 33.33333%;
max-width: 33.33333%;
}
[class*="_xs-4"] > .col, [class*="_xs-4"] > [class*='col-'] {
flex-basis: 25%;
max-width: 25%;
}
[class*="_xs-5"] > .col, [class*="_xs-5"] > [class*='col-'] {
flex-basis: 20%;
max-width: 20%;
}
[class*="_xs-6"] > .col, [class*="_xs-6"] > [class*='col-'] {
flex-basis: 16.66667%;
max-width: 16.66667%;
}
[class*="_xs-7"] > .col, [class*="_xs-7"] > [class*='col-'] {
flex-basis: 14.28571%;
max-width: 14.28571%;
}
[class*="_xs-8"] > .col, [class*="_xs-8"] > [class*='col-'] {
flex-basis: 12.5%;
max-width: 12.5%;
}
[class*="_xs-9"] > .col, [class*="_xs-9"] > [class*='col-'] {
flex-basis: 11.11111%;
max-width: 11.11111%;
}
[class*="_xs-10"] > .col, [class*="_xs-10"] > [class*='col-'] {
flex-basis: 10%;
max-width: 10%;
}
[class*="_xs-11"] > .col, [class*="_xs-11"] > [class*='col-'] {
flex-basis: 9.09091%;
max-width: 9.09091%;
}
[class*="_xs-12"] > .col, [class*="_xs-12"] > [class*='col-'] {
flex-basis: 8.33333%;
max-width: 8.33333%;
}
}
@media screen and (min-width: 480px) {
[class*="_sm-1"] > .col, [class*="_sm-1"] > [class*='col-'] {
flex-basis: 100%;
max-width: 100%;
}
[class*="_sm-2"] > .col, [class*="_sm-2"] > [class*='col-'] {
flex-basis: 50%;
max-width: 50%;
}
[class*="_sm-3"] > .col, [class*="_sm-3"] > [class*='col-'] {
flex-basis: 33.33333%;
max-width: 33.33333%;
}
[class*="_sm-4"] > .col, [class*="_sm-4"] > [class*='col-'] {
flex-basis: 25%;
max-width: 25%;
}
[class*="_sm-5"] > .col, [class*="_sm-5"] > [class*='col-'] {
flex-basis: 20%;
max-width: 20%;
}
[class*="_sm-6"] > .col, [class*="_sm-6"] > [class*='col-'] {
flex-basis: 16.66667%;
max-width: 16.66667%;
}
[class*="_sm-7"] > .col, [class*="_sm-7"] > [class*='col-'] {
flex-basis: 14.28571%;
max-width: 14.28571%;
}
[class*="_sm-8"] > .col, [class*="_sm-8"] > [class*='col-'] {
flex-basis: 12.5%;
max-width: 12.5%;
}
[class*="_sm-9"] > .col, [class*="_sm-9"] > [class*='col-'] {
flex-basis: 11.11111%;
max-width: 11.11111%;
}
[class*="_sm-10"] > .col, [class*="_sm-10"] > [class*='col-'] {
flex-basis: 10%;
max-width: 10%;
}
[class*="_sm-11"] > .col, [class*="_sm-11"] > [class*='col-'] {
flex-basis: 9.09091%;
max-width: 9.09091%;
}
[class*="_sm-12"] > .col, [class*="_sm-12"] > [class*='col-'] {
flex-basis: 8.33333%;
max-width: 8.33333%;
}
}
@media screen and (min-width: 768px) {
[class*="_md-1"] > .col, [class*="_md-1"] > [class*='col-'] {
flex-basis: 100%;
max-width: 100%;
}
[class*="_md-2"] > .col, [class*="_md-2"] > [class*='col-'] {
flex-basis: 50%;
max-width: 50%;
}
[class*="_md-3"] > .col, [class*="_md-3"] > [class*='col-'] {
flex-basis: 33.33333%;
max-width: 33.33333%;
}
[class*="_md-4"] > .col, [class*="_md-4"] > [class*='col-'] {
flex-basis: 25%;
max-width: 25%;
}
[class*="_md-5"] > .col, [class*="_md-5"] > [class*='col-'] {
flex-basis: 20%;
max-width: 20%;
}
[class*="_md-6"] > .col, [class*="_md-6"] > [class*='col-'] {
flex-basis: 16.66667%;
max-width: 16.66667%;
}
[class*="_md-7"] > .col, [class*="_md-7"] > [class*='col-'] {
flex-basis: 14.28571%;
max-width: 14.28571%;
}
[class*="_md-8"] > .col, [class*="_md-8"] > [class*='col-'] {
flex-basis: 12.5%;
max-width: 12.5%;
}
[class*="_md-9"] > .col, [class*="_md-9"] > [class*='col-'] {
flex-basis: 11.11111%;
max-width: 11.11111%;
}
[class*="_md-10"] > .col, [class*="_md-10"] > [class*='col-'] {
flex-basis: 10%;
max-width: 10%;
}
[class*="_md-11"] > .col, [class*="_md-11"] > [class*='col-'] {
flex-basis: 9.09091%;
max-width: 9.09091%;
}
[class*="_md-12"] > .col, [class*="_md-12"] > [class*='col-'] {
flex-basis: 8.33333%;
max-width: 8.33333%;
}
}
@media screen and (min-width: 992px) {
[class*="_lg-1"] > .col, [class*="_lg-1"] > [class*='col-'] {
flex-basis: 100%;
max-width: 100%;
}
[class*="_lg-2"] > .col, [class*="_lg-2"] > [class*='col-'] {
flex-basis: 50%;
max-width: 50%;
}
[class*="_lg-3"] > .col, [class*="_lg-3"] > [class*='col-'] {
flex-basis: 33.33333%;
max-width: 33.33333%;
}
[class*="_lg-4"] > .col, [class*="_lg-4"] > [class*='col-'] {
flex-basis: 25%;
max-width: 25%;
}
[class*="_lg-5"] > .col, [class*="_lg-5"] > [class*='col-'] {
flex-basis: 20%;
max-width: 20%;
}
[class*="_lg-6"] > .col, [class*="_lg-6"] > [class*='col-'] {
flex-basis: 16.66667%;
max-width: 16.66667%;
}
[class*="_lg-7"] > .col, [class*="_lg-7"] > [class*='col-'] {
flex-basis: 14.28571%;
max-width: 14.28571%;
}
[class*="_lg-8"] > .col, [class*="_lg-8"] > [class*='col-'] {
flex-basis: 12.5%;
max-width: 12.5%;
}
[class*="_lg-9"] > .col, [class*="_lg-9"] > [class*='col-'] {
flex-basis: 11.11111%;
max-width: 11.11111%;
}
[class*="_lg-10"] > .col, [class*="_lg-10"] > [class*='col-'] {
flex-basis: 10%;
max-width: 10%;
}
[class*="_lg-11"] > .col, [class*="_lg-11"] > [class*='col-'] {
flex-basis: 9.09091%;
max-width: 9.09091%;
}
[class*="_lg-12"] > .col, [class*="_lg-12"] > [class*='col-'] {
flex-basis: 8.33333%;
max-width: 8.33333%;
}
}
@media screen and (min-width: 1200px) {
[class*="_xl-1"] > .col, [class*="_xl-1"] > [class*='col-'] {
flex-basis: 100%;
max-width: 100%;
}
[class*="_xl-2"] > .col, [class*="_xl-2"] > [class*='col-'] {
flex-basis: 50%;
max-width: 50%;
}
[class*="_xl-3"] > .col, [class*="_xl-3"] > [class*='col-'] {
flex-basis: 33.33333%;
max-width: 33.33333%;
}
[class*="_xl-4"] > .col, [class*="_xl-4"] > [class*='col-'] {
flex-basis: 25%;
max-width: 25%;
}
[class*="_xl-5"] > .col, [class*="_xl-5"] > [class*='col-'] {
flex-basis: 20%;
max-width: 20%;
}
[class*="_xl-6"] > .col, [class*="_xl-6"] > [class*='col-'] {
flex-basis: 16.66667%;
max-width: 16.66667%;
}
[class*="_xl-7"] > .col, [class*="_xl-7"] > [class*='col-'] {
flex-basis: 14.28571%;
max-width: 14.28571%;
}
[class*="_xl-8"] > .col, [class*="_xl-8"] > [class*='col-'] {
flex-basis: 12.5%;
max-width: 12.5%;
}
[class*="_xl-9"] > .col, [class*="_xl-9"] > [class*='col-'] {
flex-basis: 11.11111%;
max-width: 11.11111%;
}
[class*="_xl-10"] > .col, [class*="_xl-10"] > [class*='col-'] {
flex-basis: 10%;
max-width: 10%;
}
[class*="_xl-11"] > .col, [class*="_xl-11"] > [class*='col-'] {
flex-basis: 9.09091%;
max-width: 9.09091%;
}
[class*="_xl-12"] > .col, [class*="_xl-12"] > [class*='col-'] {
flex-basis: 8.33333%;
max-width: 8.33333%;
}
}
/************************
COLS SIZES
*************************/
[class*='grid'] > [class*="col-1"] {
flex-basis: 8.33333%;
max-width: 8.33333%;
}
[class*='grid'] > [class*="col-2"] {
flex-basis: 16.66667%;
max-width: 16.66667%;
}
[class*='grid'] > [class*="col-3"] {
flex-basis: 25%;
max-width: 25%;
}
[class*='grid'] > [class*="col-4"] {
flex-basis: 33.33333%;
max-width: 33.33333%;
}
[class*='grid'] > [class*="col-5"] {
flex-basis: 41.66667%;
max-width: 41.66667%;
}
[class*='grid'] > [class*="col-6"] {
flex-basis: 50%;
max-width: 50%;
}
[class*='grid'] > [class*="col-7"] {
flex-basis: 58.33333%;
max-width: 58.33333%;
}
[class*='grid'] > [class*="col-8"] {
flex-basis: 66.66667%;
max-width: 66.66667%;
}
[class*='grid'] > [class*="col-9"] {
flex-basis: 75%;
max-width: 75%;
}
[class*='grid'] > [class*="col-10"] {
flex-basis: 83.33333%;
max-width: 83.33333%;
}
[class*='grid'] > [class*="col-11"] {
flex-basis: 91.66667%;
max-width: 91.66667%;
}
[class*='grid'] > [class*="col-12"] {
flex-basis: 100%;
max-width: 100%;
}
[class*="grid"] > [data-push-left*="off-0"] {
margin-left: 0;
}
[class*="grid"] > [data-push-left*="off-1"] {
margin-left: 8.33333%;
}
[class*="grid"] > [data-push-left*="off-2"] {
margin-left: 16.66667%;
}
[class*="grid"] > [data-push-left*="off-3"] {
margin-left: 25%;
}
[class*="grid"] > [data-push-left*="off-4"] {
margin-left: 33.33333%;
}
[class*="grid"] > [data-push-left*="off-5"] {
margin-left: 41.66667%;
}
[class*="grid"] > [data-push-left*="off-6"] {
margin-left: 50%;
}
[class*="grid"] > [data-push-left*="off-7"] {
margin-left: 58.33333%;
}
[class*="grid"] > [data-push-left*="off-8"] {
margin-left: 66.66667%;
}
[class*="grid"] > [data-push-left*="off-9"] {
margin-left: 75%;
}
[class*="grid"] > [data-push-left*="off-10"] {
margin-left: 83.33333%;
}
[class*="grid"] > [data-push-left*="off-11"] {
margin-left: 91.66667%;
}
[class*="grid"] > [data-push-right*="off-0"] {
margin-right: 0;
}
[class*="grid"] > [data-push-right*="off-1"] {
margin-right: 8.33333%;
}
[class*="grid"] > [data-push-right*="off-2"] {
margin-right: 16.66667%;
}
[class*="grid"] > [data-push-right*="off-3"] {
margin-right: 25%;
}
[class*="grid"] > [data-push-right*="off-4"] {
margin-right: 33.33333%;
}
[class*="grid"] > [data-push-right*="off-5"] {
margin-right: 41.66667%;
}
[class*="grid"] > [data-push-right*="off-6"] {
margin-right: 50%;
}
[class*="grid"] > [data-push-right*="off-7"] {
margin-right: 58.33333%;
}
[class*="grid"] > [data-push-right*="off-8"] {
margin-right: 66.66667%;
}
[class*="grid"] > [data-push-right*="off-9"] {
margin-right: 75%;
}
[class*="grid"] > [data-push-right*="off-10"] {
margin-right: 83.33333%;
}
[class*="grid"] > [data-push-right*="off-11"] {
margin-right: 91.66667%;
}
@media screen and (min-width: 320px) {
[class*='grid'] > [class*="_xs-1"] {
flex-basis: 8.33333%;
max-width: 8.33333%;
}
[class*='grid'] > [class*="_xs-2"] {
flex-basis: 16.66667%;
max-width: 16.66667%;
}
[class*='grid'] > [class*="_xs-3"] {
flex-basis: 25%;
max-width: 25%;
}
[class*='grid'] > [class*="_xs-4"] {
flex-basis: 33.33333%;
max-width: 33.33333%;
}
[class*='grid'] > [class*="_xs-5"] {
flex-basis: 41.66667%;
max-width: 41.66667%;
}
[class*='grid'] > [class*="_xs-6"] {
flex-basis: 50%;
max-width: 50%;
}
[class*='grid'] > [class*="_xs-7"] {
flex-basis: 58.33333%;
max-width: 58.33333%;
}
[class*='grid'] > [class*="_xs-8"] {
flex-basis: 66.66667%;
max-width: 66.66667%;
}
[class*='grid'] > [class*="_xs-9"] {
flex-basis: 75%;
max-width: 75%;
}
[class*='grid'] > [class*="_xs-10"] {
flex-basis: 83.33333%;
max-width: 83.33333%;
}
[class*='grid'] > [class*="_xs-11"] {
flex-basis: 91.66667%;
max-width: 91.66667%;
}
[class*='grid'] > [class*="_xs-12"] {
flex-basis: 100%;
max-width: 100%;
}
[class*="grid"] > [data-push-left*="_xs-0"] {
margin-left: 0;
}
[class*="grid"] > [data-push-left*="_xs-1"] {
margin-left: 8.33333%;
}
[class*="grid"] > [data-push-left*="_xs-2"] {
margin-left: 16.66667%;
}
[class*="grid"] > [data-push-left*="_xs-3"] {
margin-left: 25%;
}
[class*="grid"] > [data-push-left*="_xs-4"] {
margin-left: 33.33333%;
}
[class*="grid"] > [data-push-left*="_xs-5"] {
margin-left: 41.66667%;
}
[class*="grid"] > [data-push-left*="_xs-6"] {
margin-left: 50%;
}
[class*="grid"] > [data-push-left*="_xs-7"] {
margin-left: 58.33333%;
}
[class*="grid"] > [data-push-left*="_xs-8"] {
margin-left: 66.66667%;
}
[class*="grid"] > [data-push-left*="_xs-9"] {
margin-left: 75%;
}
[class*="grid"] > [data-push-left*="_xs-10"] {
margin-left: 83.33333%;
}
[class*="grid"] > [data-push-left*="_xs-11"] {
margin-left: 91.66667%;
}
[class*="grid"] > [data-push-right*="_xs-0"] {
margin-right: 0;
}
[class*="grid"] > [data-push-right*="_xs-1"] {
margin-right: 8.33333%;
}
[class*="grid"] > [data-push-right*="_xs-2"] {
margin-right: 16.66667%;
}
[class*="grid"] > [data-push-right*="_xs-3"] {
margin-right: 25%;
}
[class*="grid"] > [data-push-right*="_xs-4"] {
margin-right: 33.33333%;
}
[class*="grid"] > [data-push-right*="_xs-5"] {
margin-right: 41.66667%;
}
[class*="grid"] > [data-push-right*="_xs-6"] {
margin-right: 50%;
}
[class*="grid"] > [data-push-right*="_xs-7"] {
margin-right: 58.33333%;
}
[class*="grid"] > [data-push-right*="_xs-8"] {
margin-right: 66.66667%;
}
[class*="grid"] > [data-push-right*="_xs-9"] {
margin-right: 75%;
}
[class*="grid"] > [data-push-right*="_xs-10"] {
margin-right: 83.33333%;
}
[class*="grid"] > [data-push-right*="_xs-11"] {
margin-right: 91.66667%;
}
}
@media screen and (min-width: 480px) {
[class*='grid'] > [class*="_sm-1"] {
flex-basis: 8.33333%;
max-width: 8.33333%;
}
[class*='grid'] > [class*="_sm-2"] {
flex-basis: 16.66667%;
max-width: 16.66667%;
}
[class*='grid'] > [class*="_sm-3"] {
flex-basis: 25%;
max-width: 25%;
}
[class*='grid'] > [class*="_sm-4"] {
flex-basis: 33.33333%;
max-width: 33.33333%;
}
[class*='grid'] > [class*="_sm-5"] {
flex-basis: 41.66667%;
max-width: 41.66667%;
}
[class*='grid'] > [class*="_sm-6"] {
flex-basis: 50%;
max-width: 50%;
}
[class*='grid'] > [class*="_sm-7"] {
flex-basis: 58.33333%;
max-width: 58.33333%;
}
[class*='grid'] > [class*="_sm-8"] {
flex-basis: 66.66667%;
max-width: 66.66667%;
}
[class*='grid'] > [class*="_sm-9"] {
flex-basis: 75%;
max-width: 75%;
}
[class*='grid'] > [class*="_sm-10"] {
flex-basis: 83.33333%;
max-width: 83.33333%;
}
[class*='grid'] > [class*="_sm-11"] {
flex-basis: 91.66667%;
max-width: 91.66667%;
}
[class*='grid'] > [class*="_sm-12"] {
flex-basis: 100%;
max-width: 100%;
}
[class*="grid"] > [data-push-left*="_sm-0"] {
margin-left: 0;
}
[class*="grid"] > [data-push-left*="_sm-1"] {
margin-left: 8.33333%;
}
[class*="grid"] > [data-push-left*="_sm-2"] {
margin-left: 16.66667%;
}
[class*="grid"] > [data-push-left*="_sm-3"] {
margin-left: 25%;
}
[class*="grid"] > [data-push-left*="_sm-4"] {
margin-left: 33.33333%;
}
[class*="grid"] > [data-push-left*="_sm-5"] {
margin-left: 41.66667%;
}
[class*="grid"] > [data-push-left*="_sm-6"] {
margin-left: 50%;
}
[class*="grid"] > [data-push-left*="_sm-7"] {
margin-left: 58.33333%;
}
[class*="grid"] > [data-push-left*="_sm-8"] {
margin-left: 66.66667%;
}
[class*="grid"] > [data-push-left*="_sm-9"] {
margin-left: 75%;
}
[class*="grid"] > [data-push-left*="_sm-10"] {
margin-left: 83.33333%;
}
[class*="grid"] > [data-push-left*="_sm-11"] {
margin-left: 91.66667%;
}
[class*="grid"] > [data-push-right*="_sm-0"] {
margin-right: 0;
}
[class*="grid"] > [data-push-right*="_sm-1"] {
margin-right: 8.33333%;
}
[class*="grid"] > [data-push-right*="_sm-2"] {
margin-right: 16.66667%;
}
[class*="grid"] > [data-push-right*="_sm-3"] {
margin-right: 25%;
}
[class*="grid"] > [data-push-right*="_sm-4"] {
margin-right: 33.33333%;
}
[class*="grid"] > [data-push-right*="_sm-5"] {
margin-right: 41.66667%;
}
[class*="grid"] > [data-push-right*="_sm-6"] {
margin-right: 50%;
}
[class*="grid"] > [data-push-right*="_sm-7"] {
margin-right: 58.33333%;
}
[class*="grid"] > [data-push-right*="_sm-8"] {
margin-right: 66.66667%;
}
[class*="grid"] > [data-push-right*="_sm-9"] {
margin-right: 75%;
}
[class*="grid"] > [data-push-right*="_sm-10"] {
margin-right: 83.33333%;
}
[class*="grid"] > [data-push-right*="_sm-11"] {
margin-right: 91.66667%;
}
}
@media screen and (min-width: 768px) {
[class*='grid'] > [class*="_md-1"] {
flex-basis: 8.33333%;
max-width: 8.33333%;
}
[class*='grid'] > [class*="_md-2"] {
flex-basis: 16.66667%;
max-width: 16.66667%;
}
[class*='grid'] > [class*="_md-3"] {
flex-basis: 25%;
max-width: 25%;
}
[class*='grid'] > [class*="_md-4"] {
flex-basis: 33.33333%;
max-width: 33.33333%;
}
[class*='grid'] > [class*="_md-5"] {
flex-basis: 41.66667%;
max-width: 41.66667%;
}
[class*='grid'] > [class*="_md-6"] {
flex-basis: 50%;
max-width: 50%;
}
[class*='grid'] > [class*="_md-7"] {
flex-basis: 58.33333%;
max-width: 58.33333%;
}
[class*='grid'] > [class*="_md-8"] {
flex-basis: 66.66667%;
max-width: 66.66667%;
}
[class*='grid'] > [class*="_md-9"] {
flex-basis: 75%;
max-width: 75%;
}
[class*='grid'] > [class*="_md-10"] {
flex-basis: 83.33333%;
max-width: 83.33333%;
}
[class*='grid'] > [class*="_md-11"] {
flex-basis: 91.66667%;
max-width: 91.66667%;
}
[class*='grid'] > [class*="_md-12"] {
flex-basis: 100%;
max-width: 100%;
}
[class*="grid"] > [data-push-left*="_md-0"] {
margin-left: 0;
}
[class*="grid"] > [data-push-left*="_md-1"] {
margin-left: 8.33333%;
}
[class*="grid"] > [data-push-left*="_md-2"] {
margin-left: 16.66667%;
}
[class*="grid"] > [data-push-left*="_md-3"] {
margin-left: 25%;
}
[class*="grid"] > [data-push-left*="_md-4"] {
margin-left: 33.33333%;
}
[class*="grid"] > [data-push-left*="_md-5"] {
margin-left: 41.66667%;
}
[class*="grid"] > [data-push-left*="_md-6"] {
margin-left: 50%;
}
[class*="grid"] > [data-push-left*="_md-7"] {
margin-left: 58.33333%;
}
[class*="grid"] > [data-push-left*="_md-8"] {
margin-left: 66.66667%;
}
[class*="grid"] > [data-push-left*="_md-9"] {
margin-left: 75%;
}
[class*="grid"] > [data-push-left*="_md-10"] {
margin-left: 83.33333%;
}
[class*="grid"] > [data-push-left*="_md-11"] {
margin-left: 91.66667%;
}
[class*="grid"] > [data-push-right*="_md-0"] {
margin-right: 0;
}
[class*="grid"] > [data-push-right*="_md-1"] {
margin-right: 8.33333%;
}
[class*="grid"] > [data-push-right*="_md-2"] {
margin-right: 16.66667%;
}
[class*="grid"] > [data-push-right*="_md-3"] {
margin-right: 25%;
}
[class*="grid"] > [data-push-right*="_md-4"] {
margin-right: 33.33333%;
}
[class*="grid"] > [data-push-right*="_md-5"] {
margin-right: 41.66667%;
}
[class*="grid"] > [data-push-right*="_md-6"] {
margin-right: 50%;
}
[class*="grid"] > [data-push-right*="_md-7"] {
margin-right: 58.33333%;
}
[class*="grid"] > [data-push-right*="_md-8"] {
margin-right: 66.66667%;
}
[class*="grid"] > [data-push-right*="_md-9"] {
margin-right: 75%;
}
[class*="grid"] > [data-push-right*="_md-10"] {
margin-right: 83.33333%;
}
[class*="grid"] > [data-push-right*="_md-11"] {
margin-right: 91.66667%;
}
}
@media screen and (min-width: 992px) {
[class*='grid'] > [class*="_lg-1"] {
flex-basis: 8.33333%;
max-width: 8.33333%;
}
[class*='grid'] > [class*="_lg-2"] {
flex-basis: 16.66667%;
max-width: 16.66667%;
}
[class*='grid'] > [class*="_lg-3"] {
flex-basis: 25%;
max-width: 25%;
}
[class*='grid'] > [class*="_lg-4"] {
flex-basis: 33.33333%;
max-width: 33.33333%;
}
[class*='grid'] > [class*="_lg-5"] {
flex-basis: 41.66667%;
max-width: 41.66667%;
}
[class*='grid'] > [class*="_lg-6"] {
flex-basis: 50%;
max-width: 50%;
}
[class*='grid'] > [class*="_lg-7"] {
flex-basis: 58.33333%;
max-width: 58.33333%;
}
[class*='grid'] > [class*="_lg-8"] {
flex-basis: 66.66667%;
max-width: 66.66667%;
}
[class*='grid'] > [class*="_lg-9"] {
flex-basis: 75%;
max-width: 75%;
}
[class*='grid'] > [class*="_lg-10"] {
flex-basis: 83.33333%;
max-width: 83.33333%;
}
[class*='grid'] > [class*="_lg-11"] {
flex-basis: 91.66667%;
max-width: 91.66667%;
}
[class*='grid'] > [class*="_lg-12"] {
flex-basis: 100%;
max-width: 100%;
}
[class*="grid"] > [data-push-left*="_lg-0"] {
margin-left: 0;
}
[class*="grid"] > [data-push-left*="_lg-1"] {
margin-left: 8.33333%;
}
[class*="grid"] > [data-push-left*="_lg-2"] {
margin-left: 16.66667%;
}
[class*="grid"] > [data-push-left*="_lg-3"] {
margin-left: 25%;
}
[class*="grid"] > [data-push-left*="_lg-4"] {
margin-left: 33.33333%;
}
[class*="grid"] > [data-push-left*="_lg-5"] {
margin-left: 41.66667%;
}
[class*="grid"] > [data-push-left*="_lg-6"] {
margin-left: 50%;
}
[class*="grid"] > [data-push-left*="_lg-7"] {
margin-left: 58.33333%;
}
[class*="grid"] > [data-push-left*="_lg-8"] {
margin-left: 66.66667%;
}
[class*="grid"] > [data-push-left*="_lg-9"] {
margin-left: 75%;
}
[class*="grid"] > [data-push-left*="_lg-10"] {
margin-left: 83.33333%;
}
[class*="grid"] > [data-push-left*="_lg-11"] {
margin-left: 91.66667%;
}
[class*="grid"] > [data-push-right*="_lg-0"] {
margin-right: 0;
}
[class*="grid"] > [data-push-right*="_lg-1"] {
margin-right: 8.33333%;
}
[class*="grid"] > [data-push-right*="_lg-2"] {
margin-right: 16.66667%;
}
[class*="grid"] > [data-push-right*="_lg-3"] {
margin-right: 25%;
}
[class*="grid"] > [data-push-right*="_lg-4"] {
margin-right: 33.33333%;
}
[class*="grid"] > [data-push-right*="_lg-5"] {
margin-right: 41.66667%;
}
[class*="grid"] > [data-push-right*="_lg-6"] {
margin-right: 50%;
}
[class*="grid"] > [data-push-right*="_lg-7"] {
margin-right: 58.33333%;
}
[class*="grid"] > [data-push-right*="_lg-8"] {
margin-right: 66.66667%;
}
[class*="grid"] > [data-push-right*="_lg-9"] {
margin-right: 75%;
}
[class*="grid"] > [data-push-right*="_lg-10"] {
margin-right: 83.33333%;
}
[class*="grid"] > [data-push-right*="_lg-11"] {
margin-right: 91.66667%;
}
}
@media screen and (min-width: 1200px) {
[class*='grid'] > [class*="_xl-1"] {
flex-basis: 8.33333%;
max-width: 8.33333%;
}
[class*='grid'] > [class*="_xl-2"] {
flex-basis: 16.66667%;
max-width: 16.66667%;
}
[class*='grid'] > [class*="_xl-3"] {
flex-basis: 25%;
max-width: 25%;
}
[class*='grid'] > [class*="_xl-4"] {
flex-basis: 33.33333%;
max-width: 33.33333%;
}
[class*='grid'] > [class*="_xl-5"] {
flex-basis: 41.66667%;
max-width: 41.66667%;
}
[class*='grid'] > [class*="_xl-6"] {
flex-basis: 50%;
max-width: 50%;
}
[class*='grid'] > [class*="_xl-7"] {
flex-basis: 58.33333%;
max-width: 58.33333%;
}
[class*='grid'] > [class*="_xl-8"] {
flex-basis: 66.66667%;
max-width: 66.66667%;
}
[class*='grid'] > [class*="_xl-9"] {
flex-basis: 75%;
max-width: 75%;
}
[class*='grid'] > [class*="_xl-10"] {
flex-basis: 83.33333%;
max-width: 83.33333%;
}
[class*='grid'] > [class*="_xl-11"] {
flex-basis: 91.66667%;
max-width: 91.66667%;
}
[class*='grid'] > [class*="_xl-12"] {
flex-basis: 100%;
max-width: 100%;
}
[class*="grid"] > [data-push-left*="_xl-0"] {
margin-left: 0;
}
[class*="grid"] > [data-push-left*="_xl-1"] {
margin-left: 8.33333%;
}
[class*="grid"] > [data-push-left*="_xl-2"] {
margin-left: 16.66667%;
}
[class*="grid"] > [data-push-left*="_xl-3"] {
margin-left: 25%;
}
[class*="grid"] > [data-push-left*="_xl-4"] {
margin-left: 33.33333%;
}
[class*="grid"] > [data-push-left*="_xl-5"] {
margin-left: 41.66667%;
}
[class*="grid"] > [data-push-left*="_xl-6"] {
margin-left: 50%;
}
[class*="grid"] > [data-push-left*="_xl-7"] {
margin-left: 58.33333%;
}
[class*="grid"] > [data-push-left*="_xl-8"] {
margin-left: 66.66667%;
}
[class*="grid"] > [data-push-left*="_xl-9"] {
margin-left: 75%;
}
[class*="grid"] > [data-push-left*="_xl-10"] {
margin-left: 83.33333%;
}
[class*="grid"] > [data-push-left*="_xl-11"] {
margin-left: 91.66667%;
}
[class*="grid"] > [data-push-right*="_xl-0"] {
margin-right: 0;
}
[class*="grid"] > [data-push-right*="_xl-1"] {
margin-right: 8.33333%;
}
[class*="grid"] > [data-push-right*="_xl-2"] {
margin-right: 16.66667%;
}
[class*="grid"] > [data-push-right*="_xl-3"] {
margin-right: 25%;
}
[class*="grid"] > [data-push-right*="_xl-4"] {
margin-right: 33.33333%;
}
[class*="grid"] > [data-push-right*="_xl-5"] {
margin-right: 41.66667%;
}
[class*="grid"] > [data-push-right*="_xl-6"] {
margin-right: 50%;
}
[class*="grid"] > [data-push-right*="_xl-7"] {
margin-right: 58.33333%;
}
[class*="grid"] > [data-push-right*="_xl-8"] {
margin-right: 66.66667%;
}
[class*="grid"] > [data-push-right*="_xl-9"] {
margin-right: 75%;
}
[class*="grid"] > [data-push-right*="_xl-10"] {
margin-right: 83.33333%;
}
[class*="grid"] > [data-push-right*="_xl-11"] {
margin-right: 91.66667%;
}
}
Raw
gridlex.scss
/* ==========================================================================
GRIDLEX
Just a Flexbox Grid System
========================================================================== */
//************************
// VARIABLES
//************************
$gl-gridName: grid !default;
$gl-colName: col !default;
$gl-gutter: 16px !default; // Total
$gl-col-bottom: $gl-gutter !default;
$gl-xs: "screen and (min-width: 320px)" !default;
$gl-sm: "screen and (min-width: 480px)" !default;
$gl-md: "screen and (min-width: 768px)" !default;
$gl-lg: "screen and (min-width: 992px)" !default;
$gl-xl: "screen and (min-width: 1200px)" !default;
$glp_col-0: (100%/0);
$glp_col-1: (100%/12);
$glp_col-2: ($glp_col-1*2);
$glp_col-3: ($glp_col-1*3);
$glp_col-4: ($glp_col-1*4);
$glp_col-5: ($glp_col-1*5);
$glp_col-6: ($glp_col-1*6);
$glp_col-7: ($glp_col-1*7);
$glp_col-8: ($glp_col-1*8);
$glp_col-9: ($glp_col-1*9);
$glp_col-10: ($glp_col-1*10);
$glp_col-11: ($glp_col-1*11);
$glp_col-12: 100%;
$glp_col-5-12: (100%/5);
$glp_col-7-12: (100%/7);
$glp_col-8-12: (100%/8);
$glp_col-9-12: (100%/9);
$glp_col-10-12: (100%/10);
$glp_col-11-12: (100%/11);
// Function to generate the grid by number
@mixin makeGridByNumber($grid)
{
[class*="#{$grid}-1"] > .#{$gl-colName}, [class*="#{$grid}-1"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-12; max-width: $glp_col-12; }
[class*="#{$grid}-2"] > .#{$gl-colName}, [class*="#{$grid}-2"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-6; max-width: $glp_col-6; }
[class*="#{$grid}-3"] > .#{$gl-colName}, [class*="#{$grid}-3"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-4; max-width: $glp_col-4; }
[class*="#{$grid}-4"] > .#{$gl-colName}, [class*="#{$grid}-4"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-3; max-width: $glp_col-3; }
[class*="#{$grid}-5"] > .#{$gl-colName}, [class*="#{$grid}-5"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-5-12; max-width: $glp_col-5-12; }
[class*="#{$grid}-6"] > .#{$gl-colName}, [class*="#{$grid}-6"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-2; max-width: $glp_col-2; }
[class*="#{$grid}-7"] > .#{$gl-colName}, [class*="#{$grid}-7"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-7-12; max-width: $glp_col-7-12; }
[class*="#{$grid}-8"] > .#{$gl-colName}, [class*="#{$grid}-8"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-8-12; max-width: $glp_col-8-12; }
[class*="#{$grid}-9"] > .#{$gl-colName}, [class*="#{$grid}-9"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-9-12; max-width: $glp_col-9-12; }
[class*="#{$grid}-10"] > .#{$gl-colName}, [class*="#{$grid}-10"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-10-12; max-width: $glp_col-10-12; }
[class*="#{$grid}-11"] > .#{$gl-colName}, [class*="#{$grid}-11"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-11-12; max-width: $glp_col-11-12; }
[class*="#{$grid}-12"] > .#{$gl-colName}, [class*="#{$grid}-12"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-1; max-width: $glp_col-1; }
}
// Function to generate the grid by columns
@mixin makeCol($col)
{
[class*='#{$gl-gridName}'] {
> [class*="#{$col}-1"]{ flex-basis: $glp_col-1;max-width: $glp_col-1; }
> [class*="#{$col}-2"]{ flex-basis: $glp_col-2;max-width: $glp_col-2; }
> [class*="#{$col}-3"]{ flex-basis: $glp_col-3;max-width: $glp_col-3; }
> [class*="#{$col}-4"]{ flex-basis: $glp_col-4;max-width: $glp_col-4;}
> [class*="#{$col}-5"]{ flex-basis: $glp_col-5;max-width: $glp_col-5;}
> [class*="#{$col}-6"]{ flex-basis: $glp_col-6;max-width: $glp_col-6;}
> [class*="#{$col}-7"]{ flex-basis: $glp_col-7;max-width: $glp_col-7;}
> [class*="#{$col}-8"]{ flex-basis: $glp_col-8;max-width: $glp_col-8;}
> [class*="#{$col}-9"]{ flex-basis: $glp_col-9;max-width: $glp_col-9;}
> [class*="#{$col}-10"]{ flex-basis: $glp_col-10;max-width: $glp_col-10;}
> [class*="#{$col}-11"]{ flex-basis: $glp_col-11;max-width: $glp_col-11;}
> [class*="#{$col}-12"]{ flex-basis: $glp_col-12;max-width: $glp_col-12;}
}
}
// Function to generate the offset
@mixin makeOff($off)
{
[class*="#{$gl-gridName}"]{
> [data-push-left*="#{$off}-0"]{ margin-left: 0; }
> [data-push-left*="#{$off}-1"]{ margin-left: $glp_col-1; }
> [data-push-left*="#{$off}-2"]{ margin-left: $glp_col-2; }
> [data-push-left*="#{$off}-3"]{ margin-left: $glp_col-3; }
> [data-push-left*="#{$off}-4"]{ margin-left: $glp_col-4; }
> [data-push-left*="#{$off}-5"]{ margin-left: $glp_col-5; }
> [data-push-left*="#{$off}-6"]{ margin-left: $glp_col-6; }
> [data-push-left*="#{$off}-7"]{ margin-left: $glp_col-7; }
> [data-push-left*="#{$off}-8"]{ margin-left: $glp_col-8; }
> [data-push-left*="#{$off}-9"]{ margin-left: $glp_col-9; }
> [data-push-left*="#{$off}-10"]{ margin-left: $glp_col-10; }
> [data-push-left*="#{$off}-11"]{ margin-left: $glp_col-11; }
> [data-push-right*="#{$off}-0"]{ margin-right: 0; }
> [data-push-right*="#{$off}-1"]{ margin-right: $glp_col-1; }
> [data-push-right*="#{$off}-2"]{ margin-right: $glp_col-2; }
> [data-push-right*="#{$off}-3"]{ margin-right: $glp_col-3; }
> [data-push-right*="#{$off}-4"]{ margin-right: $glp_col-4; }
> [data-push-right*="#{$off}-5"]{ margin-right: $glp_col-5; }
> [data-push-right*="#{$off}-6"]{ margin-right: $glp_col-6; }
> [data-push-right*="#{$off}-7"]{ margin-right: $glp_col-7; }
> [data-push-right*="#{$off}-8"]{ margin-right: $glp_col-8; }
> [data-push-right*="#{$off}-9"]{ margin-right: $glp_col-9; }
> [data-push-right*="#{$off}-10"]{ margin-right: $glp_col-10; }
> [data-push-right*="#{$off}-11"]{ margin-right: $glp_col-11; }
}
}
[class*="#{$gl-gridName}"]{
box-sizing: border-box;
display: flex;
flex-flow: row wrap;
margin: 0 (-$gl-gutter/2);
}
.#{$gl-colName},
[class*="#{$gl-colName}-"]{
box-sizing: border-box;
flex: 0 0 auto;
padding: 0 ($gl-gutter/2) $gl-col-bottom;
}
.#{$gl-colName}{
flex: 1 1 0%;
}
.#{$gl-gridName}.#{$gl-colName},
.#{$gl-gridName}[class*="#{$gl-colName}-"]{
margin: 0;
padding: 0;
}
/************************
HELPERS SUFFIXES
*************************/
// FOR GRID
[class*="#{$gl-gridName}-"]{
// No spacing between cols : noGutter
&[class*="-noGutter"]{
margin: 0;
> [class*="#{$gl-colName}"]{
padding: 0;
}
}
// Horizontal alignment
&[class*="-center"]{
justify-content: center;
}
&[class*="-right"]{
justify-content: flex-end;
align-self: flex-end;
margin-left: auto;
}
// Vertical alignment
&[class*="-top"]{
align-items: flex-start;
}
&[class*="-middle"]{
align-items: center;
}
&[class*="-bottom"]{
align-items: flex-end;
}
// Orders
&[class*="-reverse"]{
flex-direction: row-reverse;
}
&[class*="-column"] {
flex-direction: column;
> [class*="#{$gl-colName}-"] {
flex-basis: auto;
}
}
&[class*="-column-reverse"]{
flex-direction: column-reverse;
}
// Spaces between and around cols
&[class*="-spaceBetween"]{
justify-content: space-between;
}
&[class*="-spaceAround"]{
justify-content: space-around;
}
// Removes the padding-bottom
&[class*="-noBottom"] > [class*="#{$gl-colName}"]{
padding-bottom: 0;
}
}
// FOR COL
[class*="#{$gl-colName}-"]{
&[class*="-top"]{
align-self: flex-start;
}
&[class*="-middle"]{
align-self: center;
}
&[class*="-bottom"]{
align-self: flex-end;
}
&[class*="-first"]{
order: -1;
}
&[class*="-last"]{
order: 1;
}
}
/************************
HIDING COLS
*************************/
[class*="#{$gl-colName}-"][class*="-1"], [class*="#{$gl-colName}-"][class*="-2"], [class*="#{$gl-colName}-"][class*="-3"], [class*="#{$gl-colName}-"][class*="-4"], [class*="#{$gl-colName}-"][class*="-5"], [class*="#{$gl-colName}-"][class*="-6"], [class*="#{$gl-colName}-"][class*="-7"], [class*="#{$gl-colName}-"][class*="-8"], [class*="#{$gl-colName}-"][class*="-9"], [class*="#{$gl-colName}-"][class*="-10"], [class*="#{$gl-colName}-"][class*="-11"], [class*="#{$gl-colName}-"][class*="-12"]
{
display: block;
}
[class*="#{$gl-colName}-"][class*="-0"]{
display: none;
}
@media #{$gl-xs}{
[class*="#{$gl-colName}-"][class*="_xs-1"], [class*="#{$gl-colName}-"][class*="_xs-2"], [class*="#{$gl-colName}-"][class*="_xs-3"], [class*="#{$gl-colName}-"][class*="_xs-4"], [class*="#{$gl-colName}-"][class*="_xs-5"], [class*="#{$gl-colName}-"][class*="_xs-6"], [class*="#{$gl-colName}-"][class*="_xs-7"], [class*="#{$gl-colName}-"][class*="_xs-8"], [class*="#{$gl-colName}-"][class*="_xs-9"], [class*="#{$gl-colName}-"][class*="_xs-10"], [class*="#{$gl-colName}-"][class*="_xs-11"], [class*="#{$gl-colName}-"][class*="_xs-12"]
{
display: block;
}
[class*="#{$gl-colName}-"][class*="_xs-0"]{
display: none;
}
}
@media #{$gl-sm}{
[class*="#{$gl-colName}-"][class*="_sm-1"], [class*="#{$gl-colName}-"][class*="_sm-2"], [class*="#{$gl-colName}-"][class*="_sm-3"], [class*="#{$gl-colName}-"][class*="_sm-4"], [class*="#{$gl-colName}-"][class*="_sm-5"], [class*="#{$gl-colName}-"][class*="_sm-6"], [class*="#{$gl-colName}-"][class*="_sm-7"], [class*="#{$gl-colName}-"][class*="_sm-8"], [class*="#{$gl-colName}-"][class*="_sm-9"], [class*="#{$gl-colName}-"][class*="_sm-10"], [class*="#{$gl-colName}-"][class*="_sm-11"], [class*="#{$gl-colName}-"][class*="_sm-12"]
{
display: block;
}
[class*="#{$gl-colName}-"][class*="_sm-0"]{
display: none;
}
}
@media #{$gl-md}{
[class*="#{$gl-colName}-"][class*="_md-1"], [class*="#{$gl-colName}-"][class*="_md-2"], [class*="#{$gl-colName}-"][class*="_md-3"], [class*="#{$gl-colName}-"][class*="_md-4"], [class*="#{$gl-colName}-"][class*="_md-5"], [class*="#{$gl-colName}-"][class*="_md-6"], [class*="#{$gl-colName}-"][class*="_md-7"], [class*="#{$gl-colName}-"][class*="_md-8"], [class*="#{$gl-colName}-"][class*="_md-9"], [class*="#{$gl-colName}-"][class*="_md-10"], [class*="#{$gl-colName}-"][class*="_md-11"], [class*="#{$gl-colName}-"][class*="_md-12"]
{
display: block;
}
[class*="#{$gl-colName}-"][class*="_md-0"]{
display: none;
}
}
@media #{$gl-lg}{
[class*="#{$gl-colName}-"][class*="_lg-1"], [class*="#{$gl-colName}-"][class*="_lg-2"], [class*="#{$gl-colName}-"][class*="_lg-3"], [class*="#{$gl-colName}-"][class*="_lg-4"], [class*="#{$gl-colName}-"][class*="_lg-5"], [class*="#{$gl-colName}-"][class*="_lg-6"], [class*="#{$gl-colName}-"][class*="_lg-7"], [class*="#{$gl-colName}-"][class*="_lg-8"], [class*="#{$gl-colName}-"][class*="_lg-9"], [class*="#{$gl-colName}-"][class*="_lg-10"], [class*="#{$gl-colName}-"][class*="_lg-11"], [class*="#{$gl-colName}-"][class*="_lg-12"]
{
display: block;
}
[class*="#{$gl-colName}-"][class*="_lg-0"]{
display: none;
}
}
@media #{$gl-xl}{
[class*="#{$gl-colName}-"][class*="_xl-1"], [class*="#{$gl-colName}-"][class*="_xl-2"], [class*="#{$gl-colName}-"][class*="_xl-3"], [class*="#{$gl-colName}-"][class*="_xl-4"], [class*="#{$gl-colName}-"][class*="_xl-5"], [class*="#{$gl-colName}-"][class*="_xl-6"], [class*="#{$gl-colName}-"][class*="_xl-7"], [class*="#{$gl-colName}-"][class*="_xl-8"], [class*="#{$gl-colName}-"][class*="_xl-9"], [class*="#{$gl-colName}-"][class*="_xl-10"], [class*="#{$gl-colName}-"][class*="_xl-11"], [class*="#{$gl-colName}-"][class*="_xl-12"]
{
display: block;
}
[class*="#{$gl-colName}-"][class*="_xl-0"]{
display: none;
}
}
/************************
GRID BY NUMBER
*************************/
@include makeGridByNumber(#{$gl-gridName});
@media #{$gl-xs}{
@include makeGridByNumber(_xs);
}
@media #{$gl-sm}{
@include makeGridByNumber(_sm);
}
@media #{$gl-md}{
@include makeGridByNumber(_md);
}
@media #{$gl-lg}{
@include makeGridByNumber(_lg);
}
@media #{$gl-xl}{
@include makeGridByNumber(_xl);
}
/************************
COLS SIZES
*************************/
@include makeCol(#{$gl-colName});
@include makeOff(off);
@media #{$gl-xs}{
@include makeCol(_xs);
@include makeOff(_xs);
}
@media #{$gl-sm}{
@include makeCol(_sm);
@include makeOff(_sm);
}
@media #{$gl-md}{
@include makeCol(_md);
@include makeOff(_md);
}
@media #{$gl-lg}{
@include makeCol(_lg);
@include makeOff(_lg);
}
@media #{$gl-xl}{
@include makeCol(_xl);
@include makeOff(_xl);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment