Kings

of Code

2012



talk about


  • Adobe: CSS regions

  • Facebook: deployment

  • CSS3 animations & transitions

CSS regions

HTML & CSS

allows content to flow across multiple areas


CSS regions

What can it do


ADAPTIVE  using media queries

AUTO-SIZE  calculate size based on content

WEBKIT  layout engine, IE10, Canary

CSS regions

web browsers


Safari, Chrome & mobile - WebKit
Internet Explorer - Trident
Firefox - Gecko
Opera - Presto

CSS regions

What can we

use it for

CSS regions

content flow


CSS regions

wrap shape



CSS regions

exclusions



CSS regions

CSS Regions &

Media Queries


Css regions

what can we

use it for


YouTube video

Single flow

CSS exclusions: The Raven

CSS regions

references


http://html.adobe.com/webstandards/

http://www.adobe.com/devnet/html5/articles/css3-regions.html

http://adobe.github.com/web-platform/samples/css-regions/

Facebook


DEPLOYMENT

Facebook

Tools & Culture


pushers think like developers

developers think like pushers



http://www.facebook.com/video/video.php?v=10100259101684977&oid=9445547199&comments

Facebook

culture


Everybody is a tester
Employees see the latest
Gradually introduce new features

Facebook

Tools



Watir
Gatekeeper

CSS3 Transitions

&  Animations


Animatable

Social media icons

Animated menus

SpiderMan

Monster

CSS3 Transitions &  Animations

browser support


IE10

Firefox

Chrome

Safari (iOS)

Android

Compare browsers >


CSS3 Transitions &  Animations

target browsers



CSS code in action >

EINDE

SLUT

FIN


THE END >


ENDE

FINE

FINAL


Made with Slides.com