Skip to content

Instantly share code, notes, and snippets.

@seankmchenry
Last active April 25, 2017 16:19
Show Gist options
  • Save seankmchenry/388f80bb4f949b1370f33632596604d3 to your computer and use it in GitHub Desktop.
Save seankmchenry/388f80bb4f949b1370f33632596604d3 to your computer and use it in GitHub Desktop.
Flexbox Grid implementation
/**
* flexboxgrid.scss
*/
/*
Variables
*/
// breakpoints
$break-xs: 35rem;
$break-sm: 48rem;
$break-md: 62rem;
$break-lg: 75rem;
$break-xl: 90rem;
// gutter size
$gutter-width: 1.25rem !default;
/*
Core
*/
.container-fluid,
.container {
margin-right: auto;
margin-left: auto;
padding-right: $gutter-width;
padding-left: $gutter-width;
}
.row {
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
flex-direction: row;
flex-wrap: wrap;
margin-right: -$gutter-width;
margin-left: -$gutter-width;
}
.row.reverse {
flex-direction: row-reverse;
}
.col.reverse {
flex-direction: column-reverse;
}
/*
X-Small
*/
.col-xs,
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12 {
box-sizing: border-box;
flex: 0 0 auto;
padding-right: $gutter-width;
padding-left: $gutter-width;
}
.col-xs {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
}
@for $i from 1 through 12 {
.col-xs-#{$i} {
flex-basis: percentage($i/12);
max-width: percentage($i/12);
}
.col-xs-offset-#{$i} {
margin-left: percentage($i/12);
}
}
.start-xs {
justify-content: flex-start;
text-align: start;
}
.center-xs {
justify-content: center;
text-align: center;
}
.end-xs {
justify-content: flex-end;
text-align: end;
}
.top-xs {
align-items: flex-start;
}
.middle-xs {
align-items: center;
}
.bottom-xs {
align-items: flex-end;
}
.around-xs {
justify-content: space-around;
}
.between-xs {
justify-content: space-between;
}
.first-xs {
order: -1;
}
.last-xs {
order: 1;
}
/*
Small
*/
@media only screen and (min-width: $break-sm) {
.container {
width: $break-sm - (2 * $gutter-width);
}
.col-sm,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12 {
box-sizing: border-box;
flex: 0 0 auto;
padding-right: $gutter-width;
padding-left: $gutter-width;
}
.col-sm {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
}
@for $i from 1 through 12 {
.col-sm-#{$i} {
flex-basis: percentage($i/12);
max-width: percentage($i/12);
}
.col-sm-offset-#{$i} {
margin-left: percentage($i/12);
}
}
.start-sm {
justify-content: flex-start;
text-align: start;
}
.center-sm {
justify-content: center;
text-align: center;
}
.end-sm {
justify-content: flex-end;
text-align: end;
}
.top-sm {
align-items: flex-start;
}
.middle-sm {
align-items: center;
}
.bottom-sm {
align-items: flex-end;
}
.around-sm {
justify-content: space-around;
}
.between-sm {
justify-content: space-between;
}
.first-sm {
order: -1;
}
.last-sm {
order: 1;
}
}
/*
Medium
*/
@media only screen and (min-width: $break-md) {
.container {
width: $break-md - (2 * $gutter-width);
}
.col-md,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12 {
box-sizing: border-box;
flex: 0 0 auto;
padding-right: $gutter-width;
padding-left: $gutter-width;
}
.col-md {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
}
@for $i from 1 through 12 {
.col-md-#{$i} {
flex-basis: percentage($i/12);
max-width: percentage($i/12);
}
.col-md-offset-#{$i} {
margin-left: percentage($i/12);
}
}
.start-md {
justify-content: flex-start;
text-align: start;
}
.center-md {
justify-content: center;
text-align: center;
}
.end-md {
justify-content: flex-end;
text-align: end;
}
.top-md {
align-items: flex-start;
}
.middle-md {
align-items: center;
}
.bottom-md {
align-items: flex-end;
}
.around-md {
justify-content: space-around;
}
.between-md {
justify-content: space-between;
}
.first-md {
order: -1;
}
.last-md {
order: 1;
}
}
/*
Large
*/
@media only screen and (min-width: $break-lg) {
.container {
width: $break-lg - (2 * $gutter-width);
}
.col-lg,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
box-sizing: border-box;
flex: 0 0 auto;
padding-right: $gutter-width;
padding-left: $gutter-width;
}
.col-lg {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
}
@for $i from 1 through 12 {
.col-lg-#{$i} {
flex-basis: percentage($i/12);
max-width: percentage($i/12);
}
.col-lg-offset-#{$i} {
margin-left: percentage($i/12);
}
}
.start-lg {
justify-content: flex-start;
text-align: start;
}
.center-lg {
justify-content: center;
text-align: center;
}
.end-lg {
justify-content: flex-end;
text-align: end;
}
.top-lg {
align-items: flex-start;
}
.middle-lg {
align-items: center;
}
.bottom-lg {
align-items: flex-end;
}
.around-lg {
justify-content: space-around;
}
.between-lg {
justify-content: space-between;
}
.first-lg {
order: -1;
}
.last-lg {
order: 1;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment