.Container–fluid {
width: 80%; margin: 0 auto; box-sizing: border-box;
}
.Container–fixed {
max-width: 80%; width: 1000px; margin: 0 auto; box-sizing: border-box;
}
.Grid {
display: flex; flex-wrap: wrap; margin: 0; padding: 0; * { box-sizing: border-box; }
}
.Grid-cell {
flex: 1;
}
// cell order .cell–first {
order: 1;
}
.cell–last {
order: 100;
}
@media (min-width: $break-sm) {
.sm-cell--first { order: 1; } .sm-cell--last { order: 100; }
}
@media (min-width: $break-md) {
.md-cell--first { order: 1; } .md-cell--last { order: 100; }
}
@media (min-width: $break-lg) {
.lg-cell--first { order: 1; } .lg-cell--last { order: 100; }
}
@media (min-width: $break-xl) {
.xl-cell--first { order: 1; } .xl-cell--last { order: 100; }
}
.Grid-cell-inner {
padding: 1rem;
}
.Demo {
width: 100%; background-color: hsla(31, 15%, 50%, .1); padding: 1rem; text-align: center;
}
// group alignment .Grid–top {
align-items: flex-start;
}
.Grid-bottom {
align-items: flex-end;
}
.Grid–center {
align-items: center;
}
.Grid–justifyCenter {
justify-content: center;
}
// Individual alignment .Grid-cell–top {
align-self: flex-start;
}
.Grid-cell–bottom {
align-self: flex-end;
}
.Grid-cell–center {
align-self: center;
}
.Grid-cell–autoSize {
flex: none;
}
// Group sizing // baseline flex-basis .Grid–1of1 > .Grid-cell {
flex: 0 0 100%;
}
.Grid–1of2 > .Grid-cell {
flex: 0 0 50%;
}
.Grid–1of3 > .Grid-cell {
flex: 0 0 33.33333%;
}
.Grid–1of4 > .Grid-cell {
flex: 0 0 25%;
}
.Grid–1of6 > .Grid-cell {
flex: 0 0 16.666666%;
}
// flex-basis at different breakpoints @media (min-width: $break-sm) {
.sm-Grid--fit > .Grid-cell { flex: 1; } .sm-Grid--1of1 > .Grid-cell { flex: 0 0 100%; } .sm-Grid--1of2 > .Grid-cell { flex: 0 0 50%; } .sm-Grid--1of3 > .Grid-cell { flex: 0 0 33.33333%; } .sm-Grid--1of4 > .Grid-cell { flex: 0 0 25%; } .sm-Grid--1of6 > .Grid-cell { flex: 0 0 16.666666%;
}
}
@media (min-width: $break-md) {
.md-Grid--fit > .Grid-cell { flex: 1; } .md-Grid--1of1 > .Grid-cell { flex: 0 0 100%; } .md-Grid--1of2 > .Grid-cell { flex: 0 0 50%; } .md-Grid--1of3 > .Grid-cell { flex: 0 0 33.33333%; } .md-Grid--1of4 > .Grid-cell { flex: 0 0 25%; } .md-Grid--1of6 > .Grid-cell { flex: 0 0 16.666666%; }
}
@media (min-width: $break-lg) {
.lg-Grid--fit > .Grid-cell { flex: 1; } .lg-Grid--1of1 > .Grid-cell { flex: 0 0 100%; } .lg-Grid--1of2 > .Grid-cell { flex: 0 0 50%; } .lg-Grid--1of3 > .Grid-cell { flex: 0 0 33.33333%; } .lg-Grid--1of4 > .Grid-cell { flex: 0 0 25%; } .lg-Grid--1of6 > .Grid-cell { flex: 0 0 16.666666%; }
}
@media (min-width: $break-xl) {
.xl-Grid--fit > .Grid-cell { flex: 1; } .xl-Grid--1of1 > .Grid-cell { flex: 0 0 100%; } .xl-Grid--1of2 > .Grid-cell { flex: 0 0 50%; } .xl-Grid--1of3 > .Grid-cell { flex: 0 0 33.33333%; } .xl-Grid--1of4 > .Grid-cell { flex: 0 0 25%; } .lg-Grid--1of6 > .Grid-cell { flex: 0 0 16.666666%; }
}
// individual sizing per cell // baseline widths .cell–1of1 {
width: 100% !important; flex: none !important;
}
.cell–1of2 {
width: 50% !important; flex: none !important;
}
.cell–1of3 {
width: 33.33333% !important; flex: none !important;
}
.cell–2of3 {
width: 66.666666% !important; flex: none !important;
}
.cell–1of4 {
width: 25% !important; flex: none !important;
}
// widths at different breakpoints @media (min-width: $break-sm) {
.sm-cell--1of1 { width: 100% !important; flex: none !important; } .sm-cell--1of2 { width: 50% !important; flex: none !important; } .sm-cell--1of3 { width: 33.33333% !important; flex: none !important; } .sm-cell--2of3 { width: 66.666666% !important; flex: none !important; } .sm-cell--1of4 { width: 25% !important; flex: none !important; }
}
@media (min-width: $break-md) {
.md-cell--1of1 { width: 100% !important; flex: none !important; } .md-cell--1of2 { width: 50% !important; flex: none !important; } .md-cell--1of3 { width: 33.33333% !important; flex: none !important; } .md-cell--2of3 { width: 66.666666% !important; flex: none !important; } .md-cell--1of4 { width: 25% !important; flex: none !important; }
}
@media (min-width: $break-lg) {
.lg-cell--1of1 { width: 100% !important; flex: none !important; } .lg-cell--1of2 { width: 50% !important; flex: none !important; } .lg-cell--1of3 { width: 33.33333% !important; flex: none !important; } .lg-cell--2of3 { width: 66.666666% !important; flex: none !important; } .lg-cell--1of4 { width: 25% !important; flex: none !important; }
}
@media (min-width: $break-xl) {
.xl-cell--1of1 { width: 100% !important; flex: none !important; } .xl-cell--1of2 { width: 50% !important; flex: none !important; } .xl-cell--1of3 { width: 33.33333% !important; flex: none !important; } .xl-cell--2of3 { width: 66.666666% !important; flex: none !important; } .xl-cell--1of4 { width: 25% !important; flex: none !important; }
}
// Gutters .Grid–gutters {
// we have negative margins so that we can pad // the grid cells on the top and left // and so that grids will stack on top of each other nicely margin: -1rem 0 1rem -1rem;
}
.Grid–gutters > .Grid-cell {
padding: 1rem 0 0 1rem;
}
.Grid–guttersLg {
margin: -1.5rem 0 1.5rem -1.5rem;
}
.Grid–guttersLg > .Grid-cell {
padding: 1.5rem 0 0 1.5rem;
}
.Grid–guttersXL {
margin: -2rem 0 2rem -2rem;
}
.Grid–guttersXL > .Grid-cell {
padding: 2rem 0 0 2rem;
}