CSS pseudo

dabblet.css

/**
 * CSS pseudo
 */
 
/* Makes CSS box model logical*/
* {box-sizing: border-box;}

body {
	background: #ccc;
	min-height: 100%;
	color: #333;
	font: 16px/26px 'Helvetica' sans-serif;
	text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
}

/* Print a href after external links */
a[href ^= 'http://']::after {
	content: ' (' attr(href) ')'
}

.global-width {
	clear: both;
	width: 960px;
	margin: 0 auto;
}

.right {
	float: right;
}

.left {
	float: left;
}

.col-1{
	width: 225px;
	margin: 0 20px 20px 0;
	overflow: auto;
}

.col-1:first-child h2{
	color: #e88;
}

.col-1 h2 {
	padding-left: 68px;
	position: relative;
}

.col-1 h2:before {
	content: url('http://png-3.findicons.com/files/icons/2166/oxygen/48/pencil.png');
	position: absolute;
	left: 0;
}

/* Removes margin on last element on every row */
.col-1:nth-child(4n) {
	margin-right: 0;
}

/* First collumn on every row has to clear left not to allow floating elements to the left*/
.col-1:nth-child(5n) {clear: left;}

/*White collumn - This selector will make all collumns white if there is at least 5*/
.col-1:first-child:nth-last-child(n +5),
.col-1:first-child:nth-last-child(n +5) ~ .col-1 {
	background: #f5f5f5;
	box-shadow: 5px 5px 20px rgba(0,0,0,0.1) inset;
	border-style: solid;
	border-width: 1px;
	border-color: rgba(0,0,0,0.3) #fff #fff rgba(0,0,0,0.3);
	border-radius: 3px;
	padding: 20px;
	max-height: 225px;

}

.two-collumns {
	column-count: 2;
	column-gap: 40px;
}

.main-content {
	border-top: 1px solid #aaa;
	padding: 40px 0;
	margin: 40px auto;
}

.button {
	background-image: linear-gradient(rgba(255,200,30,0.5), rgba(255,100,30,0.5));
	border-style: solid;
	border-width: 1px;
	border-color: rgba(255,255,255,0.7) rgba(0,0,0,0.2) rgba(0,0,0,0.2) rgba(255,255,255,0.4);
	box-shadow: 0 0 3px rgba(0,0,0,0.2);
	color: rgba(58,128,80,1);
	border-radius: 3px;
	padding: 10px;
	text-decoration: none;
	text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
	letter-spacing: 0.1em;
}

.button:hover {
	border-color: rgba(200,200,200,0.1) rgba(255,255,255,0.5) rgba(255,255,255,0.5) rgba(0,0,0,0.2);
	box-shadow: none;
	border-radius: 5px;
	text-shadow: -1px -1px 0 rgba(255,255,255,0.3);

}

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

dabblet.html

<header class="global-width clearfix">
	<h1>Hello world</h1>
	<p class="two-collumns">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<a class="button right" href="#">Hover me gently</a>
</header>
<div class="main-content global-width clearfix">
	<article class="left col-1">
		<h2>Intresting stuff</h2>
		<p>Consectetur <a href="about">adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</p>
	</article>
	<article class="left col-1">		
		<h2>Intresting stuff</h2>
		<p>Lorem ipsum dolor sit amet, <a href="http://www.google.com">consectetur</a> asse cillum dolore eu fugiat nulla pariatur.</p>
	</article>
	<article class="left col-1">		
		<h2>Intresting stuff</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
	</article>
	<article class="left col-1">		
		<h2>Intresting stuff</h2>		
		<p>Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
	</article>
	<article class="left col-1">		<h2>Intresting stuff</h2>
		<p>Lorem ipsum dolor sit amet, consectetur <a href="about">adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
	</article>
	<article class="left col-1">		
		<h2>Intresting stuff</h2>
		<p>Lorem ipsum dolor sit amet, <a href="http://www.google.com">consectetur</a> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
	</article>
	<article class="left col-1">		
		<h2>Intresting stuff</h2>
		<p>Nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
	</article>
	<article class="left col-1">		
		<h2>Intresting stuff</h2>		
		<p>Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
	</article>
</div>
<footer>
	<p class="global-width">&copy;</p>
</footer>

settings.json

{"view":"separate","seethrough":"","prefixfree":"1","page":"all"}