Scss - flexgrid framework #scss #sass-flexbox #framework

sass-flexgrid-framework.md

Sass Flexbox Grid

Media Queries

Grid media query variables: variables/_grid-variables.scss

@media #{$breakpoint-xs-only} { }  // max-width: 480px

@media #{$breakpoint-sm-up} { }    // min-width: 481px
@media #{$breakpoint-sm-only} { }  // min-width: 481px and max-width: 768px

@media #{$breakpoint-md-up} { }    // min-width: 769px
@media #{$breakpoint-md-only} { }  // min-width: 769px and max-width: 992px

@media #{$breakpoint-lg-up} { }    // min-width: 993px
@media #{$breakpoint-lg-only} { }  // min-width: 993px and max-width: 1200px

@media #{$breakpoint-xl-up} { }    // min-width: 1201px

//

@media (max-width: 768px) {}

Mixins

Sass Flexbox Mixins

// grid mixin

.container {
  @include row();

  .box {
    @include col(12);
    @include col(md, 6);
  }
}


// row mixins

@include row-reverse();
@include row-auto-height(); // not equal heights
@include row-flex-column();


// column mixins

@include col(md, 6); // col(<breakpoint prefix>, <number of columns>)
@include col(12); // col(<number of columns>)
@include col(); // column auto-width
@include col-offset(md, 6); // col-offset(<breakpoint prefix>, <number of columns>)
@include col-reverse(); // column reverse


// arrangement mixins

// - apply to a row
@include start(<breakpoint prefix>); // align to the beginning of the row
@include center(<breakpoint prefix>); // align to the center of the row
@include end(<breakpoint prefix>); // align to the end of the row
@include top(<breakpoint prefix>); // align to the top of the row
@include middle(<breakpoint prefix>); // align to the middle of the row
@include bottom(<breakpoint prefix>); // align to the bottom of the row
@include around(<breakpoint prefix>); // apply equal space around each row child
@include between(<breakpoint prefix>); // apply equal space between each row child

// - apply to a column
@include first(<breakpoint prefix>); // make a column first in order within a row
@include last(<breakpoint prefix>); // make a column last in order on XS and up


// visibility mixins

@include show(<breakpoint range prefix>);
@include hide(<breakpoint range prefix>);

Other

• Sass Flexbox - Available Classes