Skip to content

Instantly share code, notes, and snippets.

@b4z81

b4z81/Don't Overthink It Grids.markdown

Created August 28, 2015 13:10
Show Gist options
  • Save b4z81/004c56f017481894072b to your computer and use it in GitHub Desktop.
Save b4z81/004c56f017481894072b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. b4z81 created this gist Aug 28, 2015.
    9 changes: 9 additions & 0 deletions Don't Overthink It Grids.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    Don't Overthink It Grids
    ------------------------
    Writeup on CSS-Tricks : http://css-tricks.com/dont-overthink-it-grids/

    Forked from [Chris Coyier](http://codepen.io/chriscoyier/)'s Pen [Don't Overthink It Grids](http://codepen.io/chriscoyier/pen/eGcLw/).

    A [Pen](http://codepen.io/b4z81/pen/xwKKox) by [Stefano Guglielmi](http://codepen.io/b4z81) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/b4z81/pen/xwKKox/license).
    92 changes: 92 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,92 @@
    <h1>Don't Overthink It Grids <em>(while we wait for flexbox!)</em></h1>

    <div class="grid">
    <div class="col-2-3">
    <div class="module">
    <h3>2/3</h3>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    </div>
    </div>
    <div class="col-1-3">
    <div class="module">
    <h3>1/3</h3>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies</p>
    </div>
    </div>
    </div>

    <div class="grid grid-pad">
    <div class="col-2-3">
    <div class="module">
    <h3>2/3 (Opt-in Outside Padding)</h3>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    </div>
    </div>
    <div class="col-1-3">
    <div class="module">
    <h3>1/3</h3>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam.</p>
    </div>
    </div>
    </div>

    <div class="grid grid-pad">
    <div class="col-1-8">
    <div class="module">
    <h3>1/8</h3>
    </div>
    </div>
    <div class="col-1-8">
    <div class="module">
    <h3>1/8</h3>
    </div>
    </div>
    <div class="col-1-8">
    <div class="module">
    <h3>1/8</h3>
    </div>
    </div>
    <div class="col-1-8">
    <div class="module">
    <h3>1/8</h3>
    </div>
    </div>
    <div class="col-1-8">
    <div class="module">
    <h3>1/8</h3>
    </div>
    </div>
    <div class="col-1-8">
    <div class="module">
    <h3>1/8</h3>
    </div>
    </div>
    <div class="col-1-8">
    <div class="module">
    <h3>1/8</h3>
    </div>
    </div>
    <div class="col-1-8">
    <div class="module">
    <h3>1/8</h3>
    </div>
    </div>
    </div>

    <div class="grid grid-pad">
    <div class="col-1-4">
    <div class="module">
    <h3>1/4</h3>
    </div>
    </div>
    <div class="col-1-2">
    <div class="module">
    <h3>1/2</h3>
    </div>
    </div>
    <div class="col-1-4">
    <div class="module">
    <h3>1/4</h3>
    </div>
    </div>
    </div>
    1 change: 1 addition & 0 deletions scripts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    68 changes: 68 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,68 @@
    @import "compass/css3";

    * {
    @include box-sizing(border-box);
    }

    $pad: 20px;

    .grid {
    background: white;
    margin: 0 0 $pad 0;

    &:after {
    /* Or @extend clearfix */
    content: "";
    display: table;
    clear: both;
    }
    }

    [class*='col-'] {
    float: left;
    padding-right: $pad;
    .grid &:last-of-type {
    padding-right: 0;
    }
    }
    .col-2-3 {
    width: 66.66%;
    }
    .col-1-3 {
    width: 33.33%;
    }
    .col-1-2 {
    width: 50%;
    }
    .col-1-4 {
    width: 25%;
    }
    .col-1-8 {
    width: 12.5%;
    }

    .module {
    padding: $pad;
    background: #eee;
    }

    /* Opt-in outside padding */
    .grid-pad {
    padding: $pad 0 $pad $pad;
    [class*='col-']:last-of-type {
    padding-right: $pad;
    }
    }

    body {
    padding: 10px 50px 200px;
    background: url(http://s.cdpn.io/3/[email protected]);
    background-size: 300px 300px;
    }
    h1 {
    color: white;
    em {
    color: #666;
    font-size: 16px;
    }
    }