Skip to content

Instantly share code, notes, and snippets.

@jlaeser

jlaeser/index.html

Created July 2, 2012 15:14
Show Gist options
  • Save jlaeser/3033717 to your computer and use it in GitHub Desktop.
Save jlaeser/3033717 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jlaeser created this gist Jul 2, 2012.
    204 changes: 204 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,204 @@


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">

    <title>OOCSS 12 unit grid &middot; CodePen</title>

    <style>
    .line:after,
    .lastUnit:after {
    clear:both;
    display:block;
    visibility:hidden;
    overflow:hidden;
    height:0 !important;
    line-height:0;
    font-size:xx-large;
    content:" x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";
    }
    .line {*zoom:1;}
    .unit {float:left;}
    .lastUnit {
    display:table-cell;
    float:none;
    width:auto;
    *display:block;
    *zoom:1;
    _position:relative;
    _left:-3px;
    _margin-right:-3px;
    }

    .size1of12{width:08.3334%;}
    .size1of6{width:16.6667%;}
    .size1of4{width:25%;}
    .size1of3{width:33.3334%;}
    .size5of12{width:41.6667%;}
    .size1of2{width:50%;}
    .size7of12{width:58.3334%;}
    .size2of3{width:66.6667%;}
    .size3of4{width:75%;}
    .size5of6{width:83.3334%;}
    .size11of12{width:91.6667%;}
    .size1of1{float:none;}

    /**/
    .whole-page{
    background:#efefef;
    font-size:12px;
    line-height:1.62em;
    font-family:Arial;
    width:960px;
    margin:10px auto;
    }
    .line{
    padding:5px 0px 5px 0px;
    }
    .unit{
    background:#AAA;
    }
    .lastUnit{
    background:#999;
    }
    .unit span,
    .lastUnit span{
    display:block;
    padding: 5px 0px 5px 0px;
    margin:0px 10px 0px 10px;
    background:#DDD;
    text-align:center;
    border-radius: 3px;
    }
    </style>

    <style>
    #codepen-footer, #codepen-footer * {
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    box-sizing: border-box !important;
    }
    #codepen-footer {
    display: block !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    padding: 0 10px !important;
    margin: 0 !important;
    height: 30px !important;
    line-height: 30px !important;
    font-size: 12px !important;
    color: #eeeeee !important;
    background-color: #505050 !important;
    text-align: left !important;
    background: -webkit-linear-gradient(top, #505050, #383838) !important;
    background: -moz-linear-gradient(top, #505050, #383838) !important;
    background: -ms-linear-gradient(top, #505050, #383838) !important;
    background: -o-linear-gradient(top, #505050, #383838) !important;
    border-top: 1px solid black !important;
    border-bottom: 1px solid black !important;
    border-radius: 0 !important;
    border-image: none !important;
    box-shadow: inset 0 1px 0 #6e6e6e, 0 2px 2px rgba(0, 0, 0, 0.4) !important;
    z-index: 300 !important;
    font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    }
    #codepen-footer a {
    color: #a7a7a7 !important;
    text-decoration: none !important;
    }
    #codepen-footer a:hover {
    color: white !important;
    }
    </style>
    <script>
    // Kill alerts, confirmations and prompts
    window.alert = function(){};
    window.confirm = function(){};
    window.prompt = function(){};
    window.open = function(){};
    window.print = function(){};
    </script>

    <script src="http://codepen.io/javascripts/libs/prefixfree.min.js"></script>
    </head>
    <body>

    <div class="whole-page">
    <div class="line">
    <div class="unit size1of12"><span>1/12</span></div>
    <div class="unit size1of12"><span>1/12</span></div>
    <div class="unit size1of12"><span>1/12</span></div>
    <div class="unit size1of12"><span>1/12</span></div>
    <div class="unit size1of12"><span>1/12</span></div>
    <div class="unit size1of12"><span>1/12</span></div>
    <div class="unit size1of12"><span>1/12</span></div>
    <div class="unit size1of12"><span>1/12</span></div>
    <div class="unit size1of12"><span>1/12</span></div>
    <div class="unit size1of12"><span>1/12</span></div>
    <div class="unit size1of12"><span>1/12</span></div>
    <div class="lastUnit"><span>1/12</span></div>
    </div>
    <div class="line">
    <div class="unit size1of6"><span>1/6</span></div>
    <div class="unit size1of6"><span>1/6</span></div>
    <div class="unit size1of6"><span>1/6</span></div>
    <div class="unit size1of6"><span>1/6</span></div>
    <div class="unit size1of6"><span>1/6</span></div>
    <div class="lastUnit"><span>1/6</span></div>
    </div>
    <div class="line">
    <div class="unit size1of4"><span>1/4</span></div>
    <div class="unit size1of4"><span>1/4</span></div>
    <div class="unit size1of4"><span>1/4</span></div>
    <div class="lastUnit"><span>1/4</span></div>
    </div>
    <div class="line">
    <div class="unit size1of3"><span>1/3</span></div>
    <div class="unit size1of3"><span>1/3</span></div>
    <div class="lastUnit"><span>1/3</span></div>
    </div>
    <div class="line">
    <div class="unit size1of2"><span>1/2</span></div>
    <div class="lastUnit"><span>1/2</span></div>
    </div>
    <div class="line">
    <div class="unit size7of12"><span>7/12</span></div>
    <div class="lastUnit"><span>5/12</span></div>
    </div>
    <div class="line">
    <div class="unit size2of3"><span>2/3</span></div>
    <div class="lastUnit"><span>1/3</span></div>
    </div>
    <div class="line">
    <div class="unit size3of4"><span>3/4</span></div>
    <div class="lastUnit"><span>1/4</span></div>
    </div>
    <div class="line">
    <div class="unit size5of6"><span>5/6</span></div>
    <div class="lastUnit"><span>1/6</span></div>
    </div>
    <div class="line">
    <div class="unit size11of12"><span>11/12</span></div>
    <div class="lastUnit"><span>1/12</span></div>
    </div>
    </div>

    <script src="http://codepen.io/javascripts/libs/modernizr.js"></script>

    <div id="codepen-footer">
    <a style="color: #f73535 !important;" href="https://codepen.wufoo.com/forms/m7x3r3/def/field14=" onclick="window.open(this.href, null, 'height=517, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1'); return false">Report Abuse</a>

    &nbsp;

    <a href="/jlaeser/pen/oocss-12-unit-grid/3">Edit this Pen</a>
    </div>

    </body>

    </html>
    59 changes: 59 additions & 0 deletions markup.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,59 @@
    <div class="whole-page">
    <div class="line">
    <div class="unit size1of12"><span>1/12</span></div>
    <div class="unit size1of12"><span>1/12</span></div>
    <div class="unit size1of12"><span>1/12</span></div>
    <div class="unit size1of12"><span>1/12</span></div>
    <div class="unit size1of12"><span>1/12</span></div>
    <div class="unit size1of12"><span>1/12</span></div>
    <div class="unit size1of12"><span>1/12</span></div>
    <div class="unit size1of12"><span>1/12</span></div>
    <div class="unit size1of12"><span>1/12</span></div>
    <div class="unit size1of12"><span>1/12</span></div>
    <div class="unit size1of12"><span>1/12</span></div>
    <div class="lastUnit"><span>1/12</span></div>
    </div>
    <div class="line">
    <div class="unit size1of6"><span>1/6</span></div>
    <div class="unit size1of6"><span>1/6</span></div>
    <div class="unit size1of6"><span>1/6</span></div>
    <div class="unit size1of6"><span>1/6</span></div>
    <div class="unit size1of6"><span>1/6</span></div>
    <div class="lastUnit"><span>1/6</span></div>
    </div>
    <div class="line">
    <div class="unit size1of4"><span>1/4</span></div>
    <div class="unit size1of4"><span>1/4</span></div>
    <div class="unit size1of4"><span>1/4</span></div>
    <div class="lastUnit"><span>1/4</span></div>
    </div>
    <div class="line">
    <div class="unit size1of3"><span>1/3</span></div>
    <div class="unit size1of3"><span>1/3</span></div>
    <div class="lastUnit"><span>1/3</span></div>
    </div>
    <div class="line">
    <div class="unit size1of2"><span>1/2</span></div>
    <div class="lastUnit"><span>1/2</span></div>
    </div>
    <div class="line">
    <div class="unit size7of12"><span>7/12</span></div>
    <div class="lastUnit"><span>5/12</span></div>
    </div>
    <div class="line">
    <div class="unit size2of3"><span>2/3</span></div>
    <div class="lastUnit"><span>1/3</span></div>
    </div>
    <div class="line">
    <div class="unit size3of4"><span>3/4</span></div>
    <div class="lastUnit"><span>1/4</span></div>
    </div>
    <div class="line">
    <div class="unit size5of6"><span>5/6</span></div>
    <div class="lastUnit"><span>1/6</span></div>
    </div>
    <div class="line">
    <div class="unit size11of12"><span>11/12</span></div>
    <div class="lastUnit"><span>1/12</span></div>
    </div>
    </div>
    64 changes: 64 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,64 @@
    .line:after,
    .lastUnit:after {
    clear:both;
    display:block;
    visibility:hidden;
    overflow:hidden;
    height:0 !important;
    line-height:0;
    font-size:xx-large;
    content:" x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";
    }
    .line {*zoom:1;}
    .unit {float:left;}
    .lastUnit {
    display:table-cell;
    float:none;
    width:auto;
    *display:block;
    *zoom:1;
    _position:relative;
    _left:-3px;
    _margin-right:-3px;
    }

    .size1of12{width:08.3334%;}
    .size1of6{width:16.6667%;}
    .size1of4{width:25%;}
    .size1of3{width:33.3334%;}
    .size5of12{width:41.6667%;}
    .size1of2{width:50%;}
    .size7of12{width:58.3334%;}
    .size2of3{width:66.6667%;}
    .size3of4{width:75%;}
    .size5of6{width:83.3334%;}
    .size11of12{width:91.6667%;}
    .size1of1{float:none;}

    /**/
    .whole-page{
    background:#efefef;
    font-size:12px;
    line-height:1.62em;
    font-family:Arial;
    width:960px;
    margin:10px auto;
    }
    .line{
    padding:5px 0px 5px 0px;
    }
    .unit{
    background:#AAA;
    }
    .lastUnit{
    background:#999;
    }
    .unit span,
    .lastUnit span{
    display:block;
    padding: 5px 0px 5px 0px;
    margin:0px 10px 0px 10px;
    background:#DDD;
    text-align:center;
    border-radius: 3px;
    }