Greybox

Extremely simple wireframing toolkit.

HTML

<link rel="stylesheet" href="http://inuitcss.com/inuit.min.css">
<div class="island  greybox  greybox--medium  header">Header</div>

    <div class=wrapper>
    
        <ul class="nav  nav--fit  nav--block  greybox">
            <li><a href=#>Home</a></li>
            <li><a href=#>About</a></li>
            <li><a href=#>Portfolio</a></li>
            <li><a href=# class=go>Read more</a></li>
        </ul>
    
        <div class="island  greybox  greybox--large">Masthead</div>
    
        <div class=grid>
        
            <div class="grid__item  two-thirds  content">
                <div class="island  greybox  greybox--gigantic">Content</div>
            </div><!-- /content -->
        
            <div class="grid__item  one-third  sub-content">
                <div class="island  greybox">
                
                    <div class=grid>
                        <div class="grid__item  one-half">
                            <div class="islet  greybox">Ad</div>
                        </div>
                        <div class="grid__item  one-half">
                            <div class="islet  greybox">Ad</div>
                        </div>
                    </div>
                
                    <div class="island  greybox  greybox--huge">Sub content</div>
                
                
                    <div class="islet  greybox">Ad</div>
                
                </div>
            </div><!-- /sub-content -->
        
        </div>
    
    </div><!-- /wrapper -->
    
<div class="island  greybox  greybox--medium  footer">Footer</div>

CSS

/**
 * These demo styles sit on top of inuit.css
 * github.com/csswizardry/inuit.css/blob/master/inuit.css/objects/_greybox.scss
 */

html{
    font:1em/1.5 Georgia, serif;
    background-color:#fff;
    color:#333;
}
.wrapper{
    max-width:960px;
    padding:0 24px;
    margin:0 auto;
}
.footer{
    margin-bottom:0;
}