The joy of CSS

Colours

Use hsla()

Hue:
Saturation:
Lightness:

A good palette:
http://clrs.cc/

A palette generator:
https://palx.jxnblk.com/

Color names:
http://colours.neilorangepeel.com/

Typography

Web fonts are slow fun

Use the system font first.

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

Shapes & Animation
ROBOTS

CSS is capable
of incredible things

@lynnandtonic - http://a.singlediv.com
 

CSS has a bad rep

Complex?
Suprising?

Expection violation

The web has a grain

"CSS 2.1 is a style sheet language that allows authors and users to attach style (e.g. fonts and spacing) to structured documents"
https://www.w3.org/TR/CSS2/

Structured Documents

Web Apps are a hack

Inspect this element

JS Bin on jsbin.com

CSS FIRST AID

Myths

<div>itis

Not a thing

Use as many divs as you need*

*"Semantics"

* Simplicity > Minimalism > Obsession

.class.itis

Not a thing

What if CSS was composable?

Semantic class names

.post .author .name

Self explanatory class names?

.block .text-center .dark-red
Who are you CSSing for?
Step 0

Look after yourself

It's not CSS, it's You.

CSS is You are capable
of incredible things

Time & patience required

"But I don't designer"

Don't be afraid to learn

  • Black and white first
  • Double your whitespace
  • Steal like an artist

7-rules-for-creating-gorgeous-ui-part-1

More time & patience required

CSS FIRST AID

display

display:block
display:block
display:block
display:inline-block
display:inline-block
display:inline-block
display:inline
display:inline
display:inline

display

text-align:center
display:block
display:block; width:50%
display:block; width:50%
display:inline-block; width:50%
display:inline-block; width:50%

whitespace!

text-align:center
display:block; width:50%
display:block; width:50%
display:inline-block; width:50%
display:inline-block; width:50%
display:inline-block; width:50%
display:inline-block; width:50%
position
parent display:block; padding:15px
child 1 display:block
child 2 display:block
parent display:block; padding:15px
child 1 display:block; position:relative; bottom:-200px
child 2 display:block
position absolute with relative parent
parent display:block; padding:15px
child 1 display:block
child 2 display:block
parent display:block; padding:15px; position:relative
child 1 display:block; position:absloute; bottom:-200px
child 2 display:block

Further Reading

http://tachyons.io

http://cssstats.com

http://stylelint.io

@olizilla