thelucre / bkwld

yo grid.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

hot sauce

ok, bkwld. here's the beef.

i created the grid from scratch, javascript free. very interesting excerise. smart, on your part.

i spent 3 hours making the grid work, 4 hours styling and pluggin in content, and a little extra to fix for ie 7/8

how to use

every row needs a div wrapper with the row class. each column should have a row-* and col-* class added to choose the size you want.

class options

  1. Columns - specify width
  • .col-full
  • .col-53
  • .col-46
  • .col-26
  1. Rows - specify height
  • .row-full
  • .row-xxlg
  • .row-xlg
  • .row-lg
  • .row-md
  • .row-sm
  • .row-xsm

full header row example

<div class="row">
    <div id="header" class="col-full row-full">
        <h1 class="intro">Goodbye, <br/>Barbados!</h1>
    </div>
</div>

nesting

when you have a nested row, add the .nested-right or .nested-left class. column classes should be added to the nested element, not the child element with a row-* class.

nesting example

<div class="row">
    <div id="pink-sky" class="col-46 row-xxlg photo-box">
        Left Pane Content
    </div>
    <div class="row col-53 nested-right">
        <div class="row-xsm pink">
             Right Pane Upper Content
        </div>
    </div>
    <div class="row col-53 nested-right">
        <div class="row-lg navy">
        	Right Pane Lower Content
        </div>
    </div>
</div>

About

yo grid.


Languages

Language:CSS 95.5%Language:Ruby 4.5%Language:JavaScript 0.0%