Skip to content

Instantly share code, notes, and snippets.

@wrumsby

wrumsby/dabblet.css

Created December 15, 2015 02:09
Show Gist options
  • Save wrumsby/04f5750bb5853984f3ce to your computer and use it in GitHub Desktop.
Save wrumsby/04f5750bb5853984f3ce to your computer and use it in GitHub Desktop.
Download ZIP
The first commented line is your dabblet’s title
Raw
dabblet.css
/**
* The first commented line is your dabblet’s title
*/
body {
box-sizing: border-box;
}
.xui-summary {
border: 1px solid #666;
border-radius: 4px;
display: table;
width: 100%
}
.xui-summary--item {
display: table-cell;
border-right: 1px solid #666;
text-align: center;
}
// see http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/
.xui-summary--item:nth-child(1):nth-last-child(1) {
width: 100%;
}
.xui-summary--item:nth-child(1):nth-last-child(2),
.xui-summary--item:nth-child(2):nth-last-child(1) {
width: 50%;
}
.xui-summary--item:nth-child(1):nth-last-child(3),
.xui-summary--item:nth-child(2):nth-last-child(2),
.xui-summary--item:nth-child(3):nth-last-child(1) {
width: 33%;
}
.xui-summary--item:last-of-type {
border-right: 0;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="xui-summary">
<div class="xui-summary--item">One</div>
<div class="xui-summary--item">Two</div>
</div>
<br/>
<div class="xui-summary">
<div class="xui-summary--item">One</div>
<div class="xui-summary--item">Two</div>
<div class="xui-summary--item">Three</div>
</div>
<p>
See
<a href="http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/">Styling elements based on sibling count</a>.
</p>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment