erichegt/dabblet.css

## dabblet.css
/**
 * Flexbox demo
 */
footer {
	background-image: url(http://mirrorfashion.net/loja/img/fundo-rodape.png);
	width: 100%;
}

.container {
	width: 940px;
	margin: 0 auto;
	/*
	 * O container vira um container flex.
	 * Os filhos dele terão o tamanho flexível,
	 * de acordo com as regras que escrevermos
	 */
	display: flex;
	/*
	 * Os filhos desse container devem ficar
	 * centralizados verticalmente. Outras possibilidades:
	 * - stretch: estica as caixas
	 * - start: as caixas ficam grudadas no topo
	 * - end: as caixas ficam grudadas na base
	 */
	align-items: center;
	/*
	 * O espaço que sobra depois de colocar os elementos
	 * dentro da caixa pode ser distribuído automaticamente
	 * pelo container. Para isso, usamos a propriedade abaixo.
	 * Com o valor space-between, o espaço que sobra é
	 * distribuído entre os elementos. Outras opçoes:
	 * - space-around: coloca espaço antes do primeiro e depois do último
	 */
	justify-content: space-between;
}

.social li {
	display: inline-block;
	list-style: none;
	margin-left: 25px;
}

.social li a {
	height: 32px;
	width: 32px;
	display: block;
	text-indent: -9999px;
}

.social li a[href*="facebook.com"] {
	background-image: url(http://mirrorfashion.net/loja/img/facebook.png);
}
.social li a[href*="twitter.com"] {
	background-image: url(http://mirrorfashion.net/loja/img/twitter.png);
}
.social li a[href*="plus.google.com"] {
	background-image: url(http://mirrorfashion.net/loja/img/googleplus.png);
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->
<footer>
	<div class="container">
		<h1><img src="http://mirrorfashion.net/loja/img/logo-rodape.png"></h1>
		<ul class="social">
			<li><a href="http://facebook.com/mirrorfashion">Facebook</a></li>
			<li><a href="http://twitter.com/mirrorfashion">Twitter</a></li>
			<li><a href="http://plus.google.com/mirrorfashion">Google+</a></li>
		</ul>
	</div>
</footer>

## dabblet.js
// alert('Hello world!');

## settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* Flexbox demo
	*/
	footer {
	background-image: url(http://mirrorfashion.net/loja/img/fundo-rodape.png);
	width: 100%;
	}

	.container {
	width: 940px;
	margin: 0 auto;
	/*
	* O container vira um container flex.
	* Os filhos dele terão o tamanho flexível,
	* de acordo com as regras que escrevermos
	*/
	display: flex;
	/*
	* Os filhos desse container devem ficar
	* centralizados verticalmente. Outras possibilidades:
	* - stretch: estica as caixas
	* - start: as caixas ficam grudadas no topo
	* - end: as caixas ficam grudadas na base
	*/
	align-items: center;
	/*
	* O espaço que sobra depois de colocar os elementos
	* dentro da caixa pode ser distribuído automaticamente
	* pelo container. Para isso, usamos a propriedade abaixo.
	* Com o valor space-between, o espaço que sobra é
	* distribuído entre os elementos. Outras opçoes:
	* - space-around: coloca espaço antes do primeiro e depois do último
	*/
	justify-content: space-between;
	}

	.social li {
	display: inline-block;
	list-style: none;
	margin-left: 25px;
	}

	.social li a {
	height: 32px;
	width: 32px;
	display: block;
	text-indent: -9999px;
	}

	.social li a[href*="facebook.com"] {
	background-image: url(http://mirrorfashion.net/loja/img/facebook.png);
	}
	.social li a[href*="twitter.com"] {
	background-image: url(http://mirrorfashion.net/loja/img/twitter.png);
	}
	.social li a[href*="plus.google.com"] {
	background-image: url(http://mirrorfashion.net/loja/img/googleplus.png);
	}
	<!-- content to be placed inside <body>…</body> -->
	<footer>
	<div class="container">
	<h1><img src="http://mirrorfashion.net/loja/img/logo-rodape.png"></h1>
	<ul class="social">
	<li><a href="http://facebook.com/mirrorfashion">Facebook</a></li>
	<li><a href="http://twitter.com/mirrorfashion">Twitter</a></li>
	<li><a href="http://plus.google.com/mirrorfashion">Google+</a></li>
	</ul>
	</div>
	</footer>