one-element rules

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

Demo on CodePen

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

Demo on CodePen

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;
}

Demo on CodePen

dotCSS 2014 | @TimPietrusky

More rules to come...

Cheers!

@TimPietrusky