Zen Grids

dabblet.css

/**
 * Zen Grids
 */
 /** Scss 
 @media all and (min-width: 50em) {
div#main {
 @include zen-grid-container;
}
    .work {
      @include zen-grid-item(3, 1);  // Span 3 columns starting in 1st column
    }   
    .events{
      @include zen-grid-item(6, 4);  // Span 6 columns starting in 4th column
    }   
    .drupalorg {
      @include zen-grid-item(3, 10); // Span 3 columns starting in 10th column
    }   
  }
*/


div#main:before, div#main:after {
    content: "";
    display: table;
}
div#main:after {
    clear: both;
}
.work {
    -moz-box-sizing: border-box;
    float: left;
    margin-left: 0;
    margin-right: -300%;
    padding-left: 10px;
    padding-right: 10px;
    width: 300%;
    word-wrap: break-word;
}
.events {
    -moz-box-sizing: border-box;
    float: left;
    margin-left: 300%;
    margin-right: -900%;
    padding-left: 10px;
    padding-right: 10px;
    width: 600%;
    word-wrap: break-word;
}
.drupalorg {
    -moz-box-sizing: border-box;
    float: left;
    margin-left: 900%;
    margin-right: -1200%;
    padding-left: 10px;
    padding-right: 10px;
    width: 300%;
    word-wrap: break-word;
}

dabblet.html

<div id="main">
<section class="work">
<section class="events">
<section class="drupalorg">
</div>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}