Skip to content

Instantly share code, notes, and snippets.

@g12n

g12n/dabblet.css

Created December 13, 2012 08:05
Show Gist options
  • Save g12n/4274908 to your computer and use it in GitHub Desktop.
Save g12n/4274908 to your computer and use it in GitHub Desktop.
Download ZIP
Flexbodx
Raw
dabblet.css
/**
* Flexbodx
*/
section, header, aside{
border: 1px solid; margin: 0px;
}
article{
display: flex;
flex-direction: row;
align-items: stretch;
border: 2px solid #000;
flex-wrap: wrap;
}
header{
background: #00aaff;
flex-basis:100%;
flex-grow :1;
flex-grow auto;
order:1;
}
section{
background: #ddd;
flex-basis: 10%;
min-height: 500px;
flex-grow :4;
flex-grow auto;
order:2
}
aside{
order:3;
background:#f60;
flex-basis: 10%;
flex-grow :1;
flex-grow auto;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<article>
<header>
<h1>Headline</h1>
</header>
<section>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</section>
<aside>
<p>sidebar</p>
</aside>
</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment