Skip to content

Instantly share code, notes, and snippets.

@zeusdeux

zeusdeux/flexbox-grid.scss

Created October 3, 2015 17:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save zeusdeux/c752856b1945645b9e7c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save zeusdeux/c752856b1945645b9e7c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. zeusdeux created this gist Oct 3, 2015.
    52 changes: 52 additions & 0 deletions flexbox-grid.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,52 @@
    /* Simple flexbox based grid system */

    $columns: 12;

    @mixin layout-cols($device) {
    @for $i from 1 through 12 {
    .l-#{$device}-col-#{$i} {
    flex: 0 0 $i / $columns * 100%;
    }
    }
    }

    @mixin responsify {

    /* Common rules */
    .l-container {
    margin-left: auto;
    margin-right: auto;

    .row {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;

    @include layout-cols(d);
    }
    }

    /* Tablet rules */
    @media only screen
    and (max-width: 768px) {
    .l-container {
    .row {
    @include layout-cols(t);
    }
    }
    }

    /* Mobile rules */
    @media only screen
    and (max-width: 480px) {
    .l-container{
    .row {
    @include layout-cols(m);
    }
    }
    }

    }

    @include responsify;