grid

by lovromar

HTML

<div class="wrapper">
        </div>
</header>
<div class="row">
        <div class="sm-col-span-2 lg-col-span-4">
                <h1>Blog</h1>
        </div>
        <nav class="sm-col-span-2 lg-col-span-4">
                <ul>
        </nav>
</div>
        <li><a href="#">Latest posts</a></li>
        <li><a href="#">Popular posts</a></li>
</ul>
<div class="content" role="main">
        <div class="wrapper">
                <div class="row">
                        <article class="sm-col-span-4 lg-col-span-3">
<h2>Article title</h2>
<p>02/12/2013</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper.</p>

</article>
                    
                    <aside class="sm-col-span-4 lg-col-span-1">
        <h2>Related Articles</h2>
<nav>
<ul>
</ul> </nav>
        </aside>
                    
            </div>
    </div>
</div>

CSS

/*Grid styles*/
.wrapper{
        padding-left: 15px;
        padding-right: 15px;
}
.row:after{
        content: ' ';
        clear: both;
        display: block;
}
[class*="col-span"] {
    float: left;
    box-sizing: border-box;
    padding-left: 15px;
        padding-right: 15px;
}
.sm-col-span-1{
        width: 25%;
}
.sm-col-span-2{
        width: 50%;
}
.sm-col-span-3{
        width: 75%;
}

.sm-col-span-4{
width: 100%;
}
@media screen and (min-width: 768px){
        .lg-col-span-1{
width: 25%; }
        .lg-col-span-2{
                width: 50%;
}
        .lg-col-span-3{
                width: 75%;
}
        .lg-col-span-4{
                width: 100%;
} }








/*Site specific*/
body{
margin: 0;
        padding: 0;
    font-size: 14px;
    line-height: 18px;
}
header{
        background: #304480;
        padding-top: 10px;
        padding-bottom: 10px;
        color: #fff;
}
ul{
        padding: 0px;
margin: 0px;
}
ul li{
        list-style: none;
}
header nav{
        text-align: right;
}

header nav a{
        color: #fff;
}
@media screen and (min-width: 768px){
        header nav{
                text-align: center;
                padding-top: 10px;
                border-top: 1px dashed #ccc;
                margin-top: 10px;
}
        header nav li{
                display: inline-block;
} }