Skip to content

Instantly share code, notes, and snippets.

@seankmchenry
Last active October 25, 2016 15:24
Show Gist options
  • Save seankmchenry/0be087e9bcc36b8ff9e47f27206e4cb5 to your computer and use it in GitHub Desktop.
Save seankmchenry/0be087e9bcc36b8ff9e47f27206e4cb5 to your computer and use it in GitHub Desktop.
Flexbox grid plugin with old iPhone fallback
/**
* _fallback.scss
*
* Fallback grid for flexboxgrid.scss
* Fixes iPhone 4 and 5 issues.
*/
.row {
display: block;
font-family: empty;
}
.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 {
display: inline-block;
font-family: $body-font;
}
.col-xs {
width: 100%;
}
@for $i from 1 through 12 {
.col-xs-#{$i} {
width: percentage($i/12);
}
}
.start-xs {
text-align: left;
}
.center-xs {
text-align: center;
}
.end-xs {
text-align: right;
}
.top-xs {
vertical-align: top;
}
.middle-xs {
vertical-align: middle;
}
.bottom-xs {
vertical-align: bottom;
}
@media only screen and (min-width: $break-sm) {
.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 {
display: inline-block;
font-family: $body-font;
}
.col-sm {
width: 100%;
}
@for $i from 1 through 12 {
.col-sm-#{$i} {
width: percentage($i/12);
}
}
.start-sm {
text-align: left;
}
.center-sm {
text-align: center;
}
.end-sm {
text-align: right;
}
.top-sm {
vertical-align: top;
}
.middle-sm {
vertical-align: middle;
}
.bottom-sm {
vertical-align: bottom;
}
}
@media only screen and (min-width: $break-md) {
.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 {
display: inline-block;
font-family: $body-font;
}
.col-md {
width: 100%;
}
@for $i from 1 through 12 {
.col-md-#{$i} {
width: percentage($i/12);
}
}
.start-md {
text-align: left;
}
.center-md {
text-align: center;
}
.end-md {
text-align: right;
}
.top-md {
vertical-align: top;
}
.middle-md {
vertical-align: middle;
}
.bottom-md {
vertical-align: bottom;
}
}
@media only screen and (min-width: $break-lg) {
.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 {
display: inline-block;
font-family: $body-font;
}
.col-lg {
width: 100%;
}
@for $i from 1 through 12 {
.col-lg-#{$i} {
width: percentage($i/12);
}
}
.start-lg {
text-align: left;
}
.center-lg {
text-align: center;
}
.end-lg {
text-align: right;
}
.top-lg {
vertical-align: top;
}
.middle-lg {
vertical-align: middle;
}
.bottom-lg {
vertical-align: bottom;
}
}
/**
* flexboxgrid.scss
*/
/*
Variables
*/
$gutter-width: 1.25rem !default;
// set up container/rows
.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;
}
.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;
}
@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;
}
}
@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;
}
}
@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;
}
}
/*
Fallback
*/
// targets iPhone 4 and 5 (portrait and landscape)
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3), only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) {
@import "fallback";
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment