CSS DevConf 2015

A boat-load of style...

by Gabriel Halley

Ahoy from the H.M.S. Queen Mary!

SVG is awesome

Best used for user controls, logos, icons, and illustrations.

(when devs and designers play nicely)

Group SVG elements smartly

Use simple shapes instead of paths (where practical)

Combine paths if not animating them seperately

SVG Tools

  • GreenSock Animation Platform (GSAP)
  • Snap.svg
  • Velocity.js
  • D3.js
  • Highcharts

Nobody knows how cubic bezier works

But you can play with it here: www.cubic-bezier.com

Style Guides

Start them early, update them often

Provide devs scalable and accessible code early in the dev cycle to empower them.

Animations can be really, really effective.

Pay attention to some basic animation principles (from Disney animation)

Choreograph animations consistently

Really cool selectors are coming soon

(as soon as they're supported by a browser)

(any browser)

Prepare to be wrong

Have opinions, and state them as such:

"I think this is..." vs. "This is..."

Be open to new information

It could change your mind!