Semantic CSS

by _sir

HTML

<div class="row">
    <div class="span-big"><div class="imgText">
        <img width="200" height="100" src="http://feo2.llbean.com/o/o/Nq39nU0d8.jpg" alt="" />
        <h2>Test</h2>
        <div class="links">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
        </div>
        </div></div>
    <div class="span-small imgText">
        <img width="200" height="200" src="http://feo1.llbean.com/6/N/-EVxBStJs.webp" alt="" />
        <h2>Test</h2>
        <div class="links">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
        </div>
    </div>
</div>
<div class="row">
    <div class="span-big"><div class="imgText">
        <img width="200" height="100" src="http://feo2.llbean.com/o/o/Nq39nU0d8.jpg" alt="" />
        <h2>Test</h2>
        <div class="links">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
        </div>
        </div></div>
    <div class="span-small imgText">
        <img width="200" height="200" src="http://feo1.llbean.com/6/N/-EVxBStJs.webp" alt="" />
        <div class="links">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
        </div>
    </div>
</div>
<div class="row layout-20-60-20">
    <div>
        Narrow Content
    </div>
    <div>
        Wide content
    </div>
    <div>
        Narrow Content
    </div>
</div>
<div class="row five-up">
    <div class="title">This is a descriptive introduction for the other four blocks</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
</div>

CSS

body { font-family: Arial; }

.row { clear:both; margin-bottom: 1em; border-bottom: 1px gray dotted; overflow: auto; }
.row > div,
[class^="span-"] { float: left; display: inline-block; box-sizing: border-box; margin: 0; padding: 0 7px; }
.span-big { width: 71%; }
.span-small { width: 29%; }

.imgText > img { width: 100%; height: auto; display: block; margin-bottom: .5em; }
.imgText > img + h2 { font-size: 24px; margin: .25em 0; padding: 0; background: #ffe; }
.imgText > img + .links a { display: block; line-height: 1.9em; }
.imgText > h2 + .links { margin: .5em 0; font-family: Arial; font-size: 16px; }
.imgText > .links a { margin: 0 1em 0 0; }

.row.layout-20-60-20 > div { width: 20%; background: #eee; }
.row.layout-20-60-20 > div + div { width: 60%; background: #ddd; }
.row.layout-20-60-20 > div + div + div { width: 20%; background: #eee; }

.row.five-up { background: #445588; color: #fff; overflow: auto; margin: .5em 0; }
.row.five-up > div { width: 20%; min-height: 100px; }
.row.five-up > div.title { font-weight: bold; color: #458; background: #fff; border-right: 1px solid gray; }

@media (max-width: 800px) {
    .row.five-up > div { width: 25%; }
    .row.five-up > div.title { width: 100%; min-height: 2em; padding: .5em; margin-bottom: .5em; text-align: center; border-bottom: 1px dashed green; border-right: none;  }   
}