Skip to content

Instantly share code, notes, and snippets.

@josephrexme josephrexme/_grid.scss
Last active Jul 26, 2018

Embed
What would you like to do?
Flexbox grid extract from ionic http://ionicframework.com/docs/components/#grid . For a CSS version, you can transpile here https://www.sassmeister.com
/**
* Grid:
* Using flexbox for the grid, inspired by Philip Walton:
* http://philipwalton.github.io/solved-by-flexbox/demos/grids/
* By default each .col within a .row will evenly take up
* available width, and the height of each .col with take
* up the height of the tallest .col in the same .row.
*
* @example
* <div class="row">
* <div class="col"><p class="u-contentbg u-txtcenter">Col 1/2</p></div>
* <div class="col"><p class="u-contentbg u-txtcenter">Col 1/2</p></div>
* </div>
* <div class="row">
* <div class="col"><p class="u-contentbg u-txtcenter">Col 1/4</p></div>
* <div class="col"><p class="u-contentbg u-txtcenter">Col 1/4</p></div>
* <div class="col"><p class="u-contentbg u-txtcenter">Col 1/4</p></div>
* <div class="col"><p class="u-contentbg u-txtcenter">Col 1/4</p></div>
* </div>
* <div class="row">
* <div class="col col-50"><p class="u-contentbg u-txtcenter">Col 1/2</p></div>
* <div class="col"><p class="u-contentbg u-txtcenter">Col 1/4</p></div>
* <div class="col"><p class="u-contentbg u-txtcenter">Col 1/4</p></div>
* </div>
* <div class="row">
* <div class="col"><p class="u-contentbg u-txtcenter">Col 1/4</p></div>
* <div class="col col-75"><p class="u-contentbg u-txtcenter">Col 3/4</p></div>
* </div>
* <div class="row responsive-sm">
* <div class="col"><p class="u-contentbg u-txtcenter">Col 1/2 sm responsive</p></div>
* <div class="col"><p class="u-contentbg u-txtcenter">Col 1/2 sm responsive</p></div>
* </div>
* <div class="row responsive-md">
* <div class="col"><p class="u-contentbg u-txtcenter">Col 1/2 md responsive</p></div>
* <div class="col"><p class="u-contentbg u-txtcenter">Col 1/2 md responsive</p></div>
* </div>
* <div class="row responsive-lg">
* <div class="col"><p class="u-contentbg u-txtcenter">Col 1/2 lg responsive</p></div>
* <div class="col"><p class="u-contentbg u-txtcenter">Col 1/2 lg responsive</p></div>
* </div>
*/
// -------------------------------
$grid-padding-width: 10px !default;
$grid-responsive-sm-break: 567px !default; // smaller than landscape phone
$grid-responsive-md-break: 767px !default; // smaller than portrait tablet
$grid-responsive-lg-break: 1023px !default; // smaller than landscape tablet
// Flexbox Mixins
// --------------------------------------------------
// http://philipwalton.github.io/solved-by-flexbox/
// https://github.com/philipwalton/solved-by-flexbox
@mixin display-flex {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}
@mixin display-inline-flex {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -moz-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
}
@mixin flex-direction($value: row) {
@if $value == row-reverse {
-webkit-box-direction: reverse;
-webkit-box-orient: horizontal;
} @else if $value == column {
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
} @else if $value == column-reverse {
-webkit-box-direction: reverse;
-webkit-box-orient: vertical;
} @else {
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
}
-webkit-flex-direction: $value;
-moz-flex-direction: $value;
-ms-flex-direction: $value;
flex-direction: $value;
}
@mixin flex-wrap($value: nowrap) {
// No Webkit Box fallback.
-webkit-flex-wrap: $value;
-moz-flex-wrap: $value;
@if $value == nowrap {
-ms-flex-wrap: none;
} @else {
-ms-flex-wrap: $value;
}
flex-wrap: $value;
}
@mixin flex($fg: 1, $fs: null, $fb: null) {
-webkit-box-flex: $fg;
-webkit-flex: $fg $fs $fb;
-moz-box-flex: $fg;
-moz-flex: $fg $fs $fb;
-ms-flex: $fg $fs $fb;
flex: $fg $fs $fb;
}
@mixin flex-flow($values: (row nowrap)) {
// No Webkit Box fallback.
-webkit-flex-flow: $values;
-moz-flex-flow: $values;
-ms-flex-flow: $values;
flex-flow: $values;
}
@mixin align-items($value: stretch) {
@if $value == flex-start {
-webkit-box-align: start;
-ms-flex-align: start;
} @else if $value == flex-end {
-webkit-box-align: end;
-ms-flex-align: end;
} @else {
-webkit-box-align: $value;
-ms-flex-align: $value;
}
-webkit-align-items: $value;
-moz-align-items: $value;
align-items: $value;
}
@mixin align-self($value: auto) {
-webkit-align-self: $value;
-moz-align-self: $value;
@if $value == flex-start {
-ms-flex-item-align: start;
} @else if $value == flex-end {
-ms-flex-item-align: end;
} @else {
-ms-flex-item-align: $value;
}
align-self: $value;
}
@mixin align-content($value: stretch) {
-webkit-align-content: $value;
-moz-align-content: $value;
@if $value == flex-start {
-ms-flex-line-pack: start;
} @else if $value == flex-end {
-ms-flex-line-pack: end;
} @else {
-ms-flex-line-pack: $value;
}
align-content: $value;
}
@mixin justify-content($value: stretch) {
@if $value == flex-start {
-webkit-box-pack: start;
-ms-flex-pack: start;
} @else if $value == flex-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
} @else if $value == space-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
} @else {
-webkit-box-pack: $value;
-ms-flex-pack: $value;
}
-webkit-justify-content: $value;
-moz-justify-content: $value;
justify-content: $value;
}
@mixin flex-order($n) {
-webkit-order: $n;
-ms-flex-order: $n;
order: $n;
-webkit-box-ordinal-group: $n;
}
@mixin responsive-grid-break($selector, $max-width) {
@media (max-width: $max-width) {
#{$selector} {
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
.col, .col-10, .col-20, .col-25, .col-33, .col-34, .col-50, .col-66, .col-67, .col-75, .col-80, .col-90 {
@include flex(1);
margin-bottom: ($grid-padding-width * 3) / 2;
margin-left: 0;
max-width: 100%;
width: 100%;
}
}
}
}
.row {
@include display-flex();
padding: ($grid-padding-width / 2);
width: 100%;
}
.row-wrap {
@include flex-wrap(wrap);
}
.row-no-padding {
padding: 0;
> .col {
padding: 0;
}
}
.row + .row {
margin-top: ($grid-padding-width / 2) * -1;
padding-top: 0;
}
.col {
@include flex(1);
display: block;
padding: ($grid-padding-width / 2);
width: 100%;
}
/* Vertically Align Columns */
/* .row-* vertically aligns every .col in the .row */
.row-top {
@include align-items(flex-start);
}
.row-bottom {
@include align-items(flex-end);
}
.row-center {
@include align-items(center);
}
.row-stretch {
@include align-items(stretch);
}
.row-baseline {
@include align-items(baseline);
}
/* .col-* vertically aligns an individual .col */
.col-top {
@include align-self(flex-start);
}
.col-bottom {
@include align-self(flex-end);
}
.col-center {
@include align-self(center);
}
/* Column Offsets */
.col-offset-10 {
margin-left: 10%;
}
.col-offset-20 {
margin-left: 20%;
}
.col-offset-25 {
margin-left: 25%;
}
.col-offset-33, .col-offset-34 {
margin-left: 33.3333%;
}
.col-offset-50 {
margin-left: 50%;
}
.col-offset-66, .col-offset-67 {
margin-left: 66.6666%;
}
.col-offset-75 {
margin-left: 75%;
}
.col-offset-80 {
margin-left: 80%;
}
.col-offset-90 {
margin-left: 90%;
}
/* Explicit Column Percent Sizes */
/* By default each grid column will evenly distribute */
/* across the grid. However, you can specify individual */
/* columns to take up a certain size of the available area */
.col-10 {
@include flex(0, 0, 10%);
max-width: 10%;
}
.col-20 {
@include flex(0, 0, 20%);
max-width: 20%;
}
.col-25 {
@include flex(0, 0, 25%);
max-width: 25%;
}
.col-33, .col-34 {
@include flex(0, 0, 33.3333%);
max-width: 33.3333%;
}
.col-40 {
@include flex(0, 0, 40%);
max-width: 40%;
}
.col-50 {
@include flex(0, 0, 50%);
max-width: 50%;
}
.col-60 {
@include flex(0, 0, 60%);
max-width: 60%;
}
.col-66, .col-67 {
@include flex(0, 0, 66.6666%);
max-width: 66.6666%;
}
.col-75 {
@include flex(0, 0, 75%);
max-width: 75%;
}
.col-80 {
@include flex(0, 0, 80%);
max-width: 80%;
}
.col-90 {
@include flex(0, 0, 90%);
max-width: 90%;
}
/* Responsive Grid Classes */
/* Adding a class of responsive-X to a row */
/* will trigger the flex-direction to */
/* change to column and add some margin */
/* to any columns in the row for clearity */
@include responsive-grid-break('.responsive-sm', $grid-responsive-sm-break);
@include responsive-grid-break('.responsive-md', $grid-responsive-md-break);
@include responsive-grid-break('.responsive-lg', $grid-responsive-lg-break);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.