Chorégraphie de contenu

dabblet.css

/**
 * Chorégraphie de contenu
 */
body {
	font: 3em Lucida Sans Unicode, Lucida Sans, sans-serif;
	color: #333;
	background: #F2F2E2;
}

ul {
	margin: 1em auto;
	width: 600px;
	list-style: none;
	display: table;
}

li { 
	background: white;
}

li + li { 
	background: #fafafa;
}

li + li + li { 
	background: #f6f6f6; 
	display: table-header-group;
}

li + li + li + li { 
	background: #f0f0f0; 
	display: table-footer-group;
}

dabblet.html

<ul>
	<li>Premier item</li>
	<li>Deuxième item</li>
	<li>Troisième item</li>
	<li>Quatrième item</li>
</ul>

dabblet.js

// alert('Hello world!');

settings.json

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