Grid System

HTML

<div class="container">
    <div class="frame">
        <div class="col-1"><div class="box">One</div></div>
        <div class="col-11"><div class="box">Eleven</div></div>
    </div>    
    <div class="frame">
        <div class="col-2"><div class="box">Two</div></div>
        <div class="col-10"><div class="box">Ten</div></div>
    </div>
    <div class="frame">
        <div class="col-3"><div class="box">Three</div></div>
        <div class="col-9"><div class="box">Nine</div></div>        
    </div>
    <div class="frame">
        <div class="col-4"><div class="box">Four</div></div>
        <div class="col-8"><div class="box">Eight</div></div>
    </div>
    <div class="frame">
        <div class="col-5"><div class="box">Five</div></div>
        <div class="col-7"><div class="box">Seven</div></div>
    </div>
    <div class="frame">
        <div class="col-6"><div class="box">Six</div></div>
        <div class="col-6"><div class="box">Six</div></div>        
    </div>
    <div class="frame">
        <div class="col-7"><div class="box">Seven</div></div>
        <div class="col-5"><div class="box">Five</div></div>
    </div>
    <div class="frame">
        <div class="col-8"><div class="box">Eight</div></div>
        <div class="col-4"><div class="box">Four</div></div>
    </div>
    <div class="frame">
        <div class="col-9"><div class="box">Nine</div></div>
        <div class="col-3"><div class="box">Three</div></div>
    </div>
    <div class="frame">
        <div class="col-10"><div class="box">Ten</div></div>
        <div class="col-2"><div class="box">Two</div></div>
    </div>
    <div class="frame">
        <div class="col-11"><div class="box">Eleven</div></div>
        <div class="col-1"><div class="box">One</div></div>
    </div>
</div>
<div class="container">
    <p>An example of how the system is used:</p>
    <div class="frame">
        <div class="col-4"><div class="box">navigation bar</div></div>
        <div class="col-8">
            <div...

CSS

/*
The Passion Fruit grid system.
Created by Kevin Sheppard: https://plus.google.com/+KevinSheppard/posts
Based on the Lemonade Grid system: http://lemonade.im/ 

Made to work on desktops, with responsive functionality coming soon.
*/

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box
}

.box {
    background: #DDD;
    color: #555;
    padding: 10px 0;
    border-radius: 4px;
    text-align: center;
    font-family: sans-serif;
    text-transform: uppercase;
}

.container {
    width: 100%x;
    padding: 4px;
}

/* Set the width of the grid */
.frame {
  width: 100%;
  margin: 0 auto
}

/* Attribute selector */
[class*='col-'] {
  float: left;
  padding: 4px;
}

[class*='col-']:first-of-type {
    padding-left: 0;
}

[class*='col-']:last-of-type {
    padding-right: 0;
}

/* Clearfix */
.frame:after {
  content: "";
  display: block;
  clear: both
}

.col-1 { width: 8.33%; }
.col-2 { width: 16.6666666667%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.6666666667%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.6666666667%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.6666666667%; }
.col-12 { width: 100%; }

.push-1 { margin-left: 8.33%; }
.push-2 { margin-left: 16.6666666667%; }
.push-3 { margin-left: 25%; }
.push-4 { margin-left: 33.33%; }
.push-5 { margin-left: 41.6666666667%; }
.push-6 { margin-left: 50%; }
.push-7 { margin-left: 58.33%; }
.push-8 { margin-left: 66.6666666667%; }
.push-9 { margin-left: 75%; }
.push-10 { margin-left: 83.33%; }
.push-11 { margin-left: 91.6666666667%; }
.push-12 { margin-left: 100%; }

.pull-1 { margin-left: -8.33%; }
.pull-2 { margin-left: -16.6666666667%; }
.pull-3 { margin-left: -25%; }
.pull-4 { margin-left: -33.33%; }
.pull-5 { margin-left: -41.6666666667%; }
.pull-6 { margin-left: -50%; }
.pull-7 { margin-left: -58.33%; }
.pull-8 { margin-left:...