Skip to content

Instantly share code, notes, and snippets.

@Meroje

Meroje/dabblet.css

Last active December 14, 2015 22:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Meroje/5160393 to your computer and use it in GitHub Desktop.
Save Meroje/5160393 to your computer and use it in GitHub Desktop.
Download ZIP
.elem outline box, from http://learnlayout.com/
Raw
dabblet.css
/**
* .elem outline box
*/
.elem {
border: solid #6AC5AC 3px;
position: relative;
}
.elem p {
padding: 0 1em;
}
.elem-inline .label, .elem-inline .endlabel {
position: static;
}
.label, .endlabel {
position: absolute;
background-color: #6AC5AC;
color: #414142;
line-height: 1em;
}
.label {
top: 0;
left: 0;
padding: 0 3px 3px 0;
}
.endlabel {
right: 0;
bottom: 0;
padding: 3px 0 0 3px;
}
.elem-green {
border: solid #96C02E 3px;
}
.elem-green > .label, .elem-green > .endlabel{
background-color: #96C02E;
}
.elem-red {
border: solid #D64078 3px;
}
.elem-red > .label, .elem-red > .endlabel{
color: white;
background-color: #D64078;
}
.elem-orange {
border: solid #FDC72F 3px;
}
.elem-orange > .label, .elem-orange > .endlabel{
background-color: #FDC72F;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<section class="elem elem-green">
<span class="label">&lt;section&gt;</span>
<p>
Flexbox is so easy!
</p>
<span class="endlabel">&lt;/section&gt;</span>
</section>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment