one-element rules
dotCSS 2014 | @TimPietrusky
dotCSS 2014 | @TimPietrusky
Rule #1
You do not talk about fight club.
-#8
dotCSS 2014 | @TimPietrusky
Rule #9
Default markup is very important.
dotCSS 2014 | @TimPietrusky
<div class="one-element"></div>.one-element {
position: relative;
}HTML
CSS
Rule #9: Default markup is very important.
dotCSS 2014 | @TimPietrusky
Rule #10
Center in the middle you should.
dotCSS 2014 | @TimPietrusky
.center {
/* [1] */
position: absolute;
left: 50%;
top: 50%;
/* [2] */
transform: translate(-50%, -50%);
}
CSS
Rule #10: Center in the middle you should.
HTML
<div class="center">
<div class="one-element"></div>
</div>dotCSS 2014 | @TimPietrusky
Rule #11
Create basic stuff with
box-shadow.
dotCSS 2014 | @TimPietrusky
Rule #11: Create basic stuff with box-shadow.
.one-element {
/* ... */
/* [1] */
width: 0;
height: 0;
/* [2] */
box-shadow:
0 0 0 1em #c00, /* red */
-3em 0 0 1em #0c0, /* green */
3em 0 0 1em #00c, /* blue */
;
} CSS
dotCSS 2014 | @TimPietrusky
Rule #12
em is awesome.
dotCSS 2014 | @TimPietrusky
body {
font-size: 1em;
}CSS
Rule #12: em is awesome.
body {
font-size: 2.5em;
}CSS
body {
font-size: .5em;
}CSS
dotCSS 2014 | @TimPietrusky
Rule #13
Add some fancy border-radius.
dotCSS 2014 | @TimPietrusky
CSS
Rule #13: Add some fancy border-radius.
.one-element {
/* ... */
/* [1] */
border-radius: 50%;
/* [2] */
width: .25em;
height: .25em;
/* [3] */
background: #c00;
}
dotCSS 2014 | @TimPietrusky
More rules to come...
Cheers!
one-element rules
By Tim Pietrusky
one-element rules
A set of rules to create one-element stuff with a very basic demo for every rule. (4 min talk)
