/* Welcome new Grid! */ .flex {
display:flex; flex-wrap:wrap; margin-left:-2%; margin-right:-2%; /* default spaces */ & [class*='col-'] { padding-left:2%; padding-right:2%; } &.fixedSpaces { $gapSpace: 14px; margin-left: -$gapSpace; margin-right: -$gapSpace; [class*='col-'] { padding-left: $gapSpace; padding-right: $gapSpace; } } &.noSpaces { margin-left:0; margin-right:0; [class*='col-'] { padding-left:0; padding-right:0; } } /* alignments */ &.verticalCenter { align-items: center; } &.reverse { flex-wrap:wrap-reverse; } &.bottom [class*='col-'], &.reverse.top [class*='col-']{ align-self: flex-end; } &.top [class*='col-'], &.reverse.bottom [class*='col-'] { align-self: flex-start; } // generate colums // .col-1-12 { width: 8.33333%; } @for $i from 1 through 12 { $width: (100% / 12) * $i; > .col-#{$i}-12 { width: $width; } }
}
/* ipad landscape and > */ @include media($tablet, “max”) {
.flex:not(.later) > [class*='col-']:not([class*='col-phablet-']):not([class*='col-phone-']) { width: 100%; } .flex > .col-tablet-1-1 { width: 100% !important; } .flex > .col-tablet-1-2 { width: 50% !important; } .flex > .col-tablet-1-3 { width: 33.33333333% !important; } .flex > .col-tablet-1-4 { width: 25% !important; }
}
/* phablet landscape and ipad portrait and > */ @include media($phablet, “max”) {
.flex.later > [class*='col-']:not([class*='col-phone-']) { width: 100%; } .flex > .col-phablet-1-1 { width: 100% !important; } .flex > .col-phablet-1-2 { width: 50% !important; } .flex > .col-phablet-1-3 { width: 33.33333333% !important; }
}
/* phone portrait and > */ @include media($phone, “max”) {
.flex > [class*='col-'] { width: 100%; } .flex > .col-phone-1-1 { width: 100% !important; } .flex > .col-phone-1-2 { width: 50% !important; }
}