Skip to content

Instantly share code, notes, and snippets.

@junyper
Created February 26, 2015 22:39

Revisions

  1. junyper created this gist Feb 26, 2015.
    20 changes: 20 additions & 0 deletions SassMeister-input-HTML.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,20 @@
    <div class="Grid">
    <div class="GridCell Example">
    Selvage umami Wes Anderson Carles authentic try-hard. Neutra DIY put a bird on it fanny pack chillwave narwhal, Austin synth wolf normcore Tumblr single-origin coffee.
    </div>
    <div class="GridCell Example">
    Selvage umami Wes Anderson Carles authentic try-hard. Neutra DIY put a bird on it fanny pack chillwave narwhal, Austin synth wolf normcore Tumblr single-origin coffee. Banjo ugh brunch health goth, cold-pressed tilde selfies direct trade dreamcatcher food truck Portland pork belly whatever distillery. Hella chia wolf Blue Bottle, Bushwick farm-to-table Marfa ugh put a bird on it listicle aesthetic Odd Future. Neutra banh mi sriracha migas selvage wolf, church-key meditation tofu art party flannel. Photo booth chia typewriter Wes Anderson. Godard shabby chic Intelligentsia, single-origin coffee forage craft beer cold-pressed jean shorts fashion axe biodiesel direct trade fixie stumptown.
    </div>
    <div class="GridCell Example">
    Hella chia wolf Blue Bottle, Bushwick farm-to-table Marfa ugh put a bird on it listicle aesthetic Odd Future. Neutra banh mi sriracha migas selvage wolf, church-key meditation tofu art party flannel. Photo booth chia typewriter Wes Anderson. Godard shabby chic Intelligentsia, single-origin coffee forage craft beer cold-pressed jean shorts fashion axe biodiesel direct trade fixie stumptown.
    </div>
    </div>

    <div class="Grid">
    <div class="GridCell--half Example">
    Selvage umami Wes Anderson Carles authentic try-hard. Neutra DIY put a bird on it fanny pack chillwave narwhal, Austin synth wolf normcore Tumblr single-origin coffee.
    </div>
    <div class="GridCell--half Example">
    Hella chia wolf Blue Bottle, Bushwick farm-to-table Marfa ugh put a bird on it listicle aesthetic Odd Future. Neutra banh mi sriracha migas selvage wolf, church-key meditation tofu art party flannel. Photo booth chia typewriter Wes Anderson. Godard shabby chic Intelligentsia, single-origin coffee forage craft beer cold-pressed jean shorts fashion axe biodiesel direct trade fixie stumptown.
    </div>
    </div>
    71 changes: 71 additions & 0 deletions SassMeister-input.scss
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,71 @@
    // ----
    // Sass (v3.4.12)
    // Compass (v1.0.3)
    // ----

    * {
    box-sizing: border-box;
    }

    // this would come from the global config
    $space: (
    xxs: 0.375rem, /* 6px */
    xs: 0.75rem, /* 12px */
    sm: 1.125rem, /* 18px */
    md: 1.5rem, /* 24px */
    lg: 1.875rem, /* 30px */
    xl: 2.25rem, /* 36px */
    xxl: 2.625rem, /* 42px */
    jumbo: 3rem /* 48px */
    );

    // this would come from the global config
    $grid-max-width: 79.375rem;

    $grid-sizes: (
    equal: 1,
    half: 0 0 50%,
    third: 0 0 33.3333%,
    quarter: 0 0 25%,
    full: 0 0 100%
    );

    $grid-alignment: (
    top: flex-start,
    bottom: flex-end,
    center: center,
    auto: auto
    );
    @mixin grid () {
    display: flex;
    max-width: $grid-max-width;
    flex-wrap: wrap;
    }

    @mixin grid-cell ($size: equal, $align: auto) {
    display: flex;
    flex: map-get($grid-sizes, $size);
    align-self: map-get($grid-alignment, $align);
    }

    // Maybe there is a Grid react component?
    .Grid {
    @include grid;
    }

    .GridCell {
    @include grid-cell();
    }

    .GridCell--half {
    @include grid-cell(half);
    }

    // Padding could be applied separately
    // I'm thinking it's not a grid thing and the
    // you get the consistency by having the spacing
    // vars in the global config?
    .Example {
    background-color: lightgray;
    padding: map-get($space, sm);
    }
    26 changes: 26 additions & 0 deletions SassMeister-output.css
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    * {
    box-sizing: border-box;
    }

    .Grid {
    display: flex;
    max-width: 79.375rem;
    flex-wrap: wrap;
    }

    .GridCell {
    display: flex;
    flex: 1;
    align-self: auto;
    }

    .GridCell--half {
    display: flex;
    flex: 0 0 50%;
    align-self: auto;
    }

    .Example {
    background-color: lightgray;
    padding: 1.125rem;
    }
    20 changes: 20 additions & 0 deletions SassMeister-rendered.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,20 @@
    <div class="Grid">
    <div class="GridCell Example">
    Selvage umami Wes Anderson Carles authentic try-hard. Neutra DIY put a bird on it fanny pack chillwave narwhal, Austin synth wolf normcore Tumblr single-origin coffee.
    </div>
    <div class="GridCell Example">
    Selvage umami Wes Anderson Carles authentic try-hard. Neutra DIY put a bird on it fanny pack chillwave narwhal, Austin synth wolf normcore Tumblr single-origin coffee. Banjo ugh brunch health goth, cold-pressed tilde selfies direct trade dreamcatcher food truck Portland pork belly whatever distillery. Hella chia wolf Blue Bottle, Bushwick farm-to-table Marfa ugh put a bird on it listicle aesthetic Odd Future. Neutra banh mi sriracha migas selvage wolf, church-key meditation tofu art party flannel. Photo booth chia typewriter Wes Anderson. Godard shabby chic Intelligentsia, single-origin coffee forage craft beer cold-pressed jean shorts fashion axe biodiesel direct trade fixie stumptown.
    </div>
    <div class="GridCell Example">
    Hella chia wolf Blue Bottle, Bushwick farm-to-table Marfa ugh put a bird on it listicle aesthetic Odd Future. Neutra banh mi sriracha migas selvage wolf, church-key meditation tofu art party flannel. Photo booth chia typewriter Wes Anderson. Godard shabby chic Intelligentsia, single-origin coffee forage craft beer cold-pressed jean shorts fashion axe biodiesel direct trade fixie stumptown.
    </div>
    </div>

    <div class="Grid">
    <div class="GridCell--half Example">
    Selvage umami Wes Anderson Carles authentic try-hard. Neutra DIY put a bird on it fanny pack chillwave narwhal, Austin synth wolf normcore Tumblr single-origin coffee.
    </div>
    <div class="GridCell--half Example">
    Hella chia wolf Blue Bottle, Bushwick farm-to-table Marfa ugh put a bird on it listicle aesthetic Odd Future. Neutra banh mi sriracha migas selvage wolf, church-key meditation tofu art party flannel. Photo booth chia typewriter Wes Anderson. Godard shabby chic Intelligentsia, single-origin coffee forage craft beer cold-pressed jean shorts fashion axe biodiesel direct trade fixie stumptown.
    </div>
    </div>