Skip to content

Instantly share code, notes, and snippets.

@pedrodelgallego

pedrodelgallego/dabblet.html

Created March 12, 2013 03:33
Show Gist options
  • Save pedrodelgallego/5140104 to your computer and use it in GitHub Desktop.
Save pedrodelgallego/5140104 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.html
<style type="text/css" media="screen">
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-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 #FDC72F 3px;
}
.elem-green > .label, .elem-green > .endlabel{
background-color: #FDC72F;
}
.elem-red {
border: solid #D64078 3px;
}
.elem-red > .label, .elem-red > .endlabel{
color: white;
background-color: #D64078;
}
.elem-orange {
border: solid #96C02E 3px;
}
.elem-orange > .label, .elem-orange > .endlabel{
background-color: #96C02E;
}
</style>
<p class="content">
</p><div class="box2 elem">
<span class="label">&lt;div class="box2"&gt;</span>
<p>
I'm an inline block!
</p>
<span class="endlabel">&lt;/div&gt;</span>
</div>
<div class="box2 elem">
<span class="label">&lt;div class="box2"&gt;</span>
<p>
I'm an inline block!
</p>
<span class="endlabel">&lt;/div&gt;</span>
</div>
<div class="box2 elem">
<span class="label">&lt;div class="box2"&gt;</span>
<p>
I'm an inline block!
</p>
<span class="endlabel">&lt;/div&gt;</span>
</div>
<div class="box2 elem">
<span class="label">&lt;div class="box2"&gt;</span>
<p>
I'm an inline block!
</p>
<span class="endlabel">&lt;/div&gt;</span>
</div>
<div class="box2 elem">
<span class="label">&lt;div class="box2"&gt;</span>
<p>
I'm an inline block!
</p>
<span class="endlabel">&lt;/div&gt;</span>
</div>
<div class="box2 elem">
<span class="label">&lt;div class="box2"&gt;</span>
<p>
I'm an inline block!
</p>
<span class="endlabel">&lt;/div&gt;</span>
</div>
<div class="box2 elem">
<span class="label">&lt;div class="box2"&gt;</span>
<p>
I'm an inline block!
</p>
<span class="endlabel">&lt;/div&gt;</span>
</div>
<div class="box2 elem">
<span class="label">&lt;div class="box2"&gt;</span>
<p>
I'm an inline block!
</p>
<span class="endlabel">&lt;/div&gt;</span>
</div>
<div class="box2 elem">
<span class="label">&lt;div class="box2"&gt;</span>
<p>
I'm an inline block!
</p>
<span class="endlabel">&lt;/div&gt;</span>
</div>
<div class="box2 elem">
<span class="label">&lt;div class="box2"&gt;</span>
<p>
I'm an inline block!
</p>
<span class="endlabel">&lt;/div&gt;</span>
</div>
<div class="box2 elem">
<span class="label">&lt;div class="box2"&gt;</span>
<p>
I'm an inline block!
</p>
<span class="endlabel">&lt;/div&gt;</span>
</div>
<p></p>
<!-- content to be placed inside <body>…</body> -->
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment