Skip to content

Instantly share code, notes, and snippets.

@sdthornton

sdthornton/layout-demo.html

Created October 1, 2014 19:24
Download ZIP

Revisions

  1. sdthornton created this gist Oct 1, 2014.
    27 changes: 27 additions & 0 deletions layout-demo.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,27 @@
    <!-- Result: https://cloudup.com/iD68XYKVseY -->

    <div class="column-parent">
    <div class="column--8">
    <div class="demo"></div>
    </div>

    <div class="column--4">
    <div class="demo"></div>
    </div>

    <!-- Nesting works well! -->
    <div class="column--7">
    <div class="column-parent">
    <div class="column--6">
    <div class="demo"></div>
    </div>
    <div class="column--6">
    <div class="demo"></div>
    </div>
    </div>
    </div>

    <div class="column--5">
    <div class="demo"></div>
    </div>
    </div>
    57 changes: 57 additions & 0 deletions layout.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,57 @@
    $max-width: 960px;
    $total-columns: 12;
    $column-width: percentage(1 / $total-columns); // 8.33333% (factored out from ($max-width / $total-column) / $total-columns)
    $gutter-width: 1rem; // IE9 supports rem usage

    %column {
    @include box-sizing(border-box);
    @include flex(0 0 auto);
    margin: 0 0 1rem;
    min-height: 1px;
    padding-left: $gutter-width;

    // IE9 fallback
    display: inline-block;
    font-size: 1rem; // Since parent font-size is 0
    vertical-align: top;
    }

    // This could be named `.row`, as it is *mostly* a row
    // but I find `.row` to be a misnomer as there is a chance
    // (when nesting) to have multiple `.row`'s within a single visual row
    .column-parent {
    @extend %clearfix;
    @include flexbox;
    @include flex-wrap(wrap);
    max-width: $max-width;
    width: 100%;

    // IE9 fallback
    font-size: 0; // cleanly removes inline-block 4px margin
    }

    @for $i from 1 through $total-columns {
    .column--#{$i} {
    @extend %column;
    width: $column-width * $i;
    }
    }


    // Not totally sure we want all column sizes to be 100%
    // on smaller devices, but that's for another time
    // For now, kept from Dan's gist
    @media only screen and (max-width: 568px) {
    [class*="column--"] {
    width: 100%;
    }
    }


    // Just for demo purposes
    // .demo is representative of column children
    .demo {
    background: #ddd;
    height: 200px;
    position: relative;
    }