MODULES BUILT AROUND THE EM UNIT

dabblet.css

/* MODULES BUILT AROUND THE EM UNIT */

*, *:before, *:after {
	box-sizing: border-box;
}

body {
	font-family: Georgia, serif;
	margin-top: 50px;
}

img {
		max-width: 100%;
		vertical-align: middle;
		height: auto;
	}

.media {
	background: orchid;
	overflow: 	hidden;
	font-size: 	10px;
	width: 		60em;
	padding: 	1em;
}

.media__image {
	float: left;
	margin: 0 1.5em 0 0;
	width: 25em;
}

.media__content {
	padding: 0;
}

.media__content > * {
	font-size: 1.7em;
}

	.media__title {
		margin: 0;
		font-size: 3em;
	}

dabblet.html

<article class="media">
	<figure class="media__image">
		<img src="http://placekitten.com/700/550">
	</figure>
	<div class="media__content">
		<h2 class="media__title">My title</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi inventore atque reprehenderit ipsa quo repellat magni ipsam eius err</p>
		<a class="more" href="#0">Read more</a>
	</div>
</article>

dabblet.js

// alert('Hello world!');

settings.json

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