Digital Publishing with CSS Regions

Slides for my talk at Kings of Code in Asterdam, 2012 about using CSS Regions and CSS Exclusions & Shapes as building blocks for digital publications layout.

Source at: https://github.com/oslego/kingsofcode-dec12

Transcript

1. DIGITAL PUBLISHING ON THE WEB CSS Regions, CSS Exclusions and Shapes Razvan Caliman / @razvancaliman
2. OVERVIEW Publishing: from print to digital Platform: open web, HTML & CSS Packaging: one idea
3. PAPER MAGAZINES Rich design & typography Complex layout Fixed page dimensions
8. GOING DIGITAL Devices Interactivity Personal attachment
9. THE TOOLS Print publishing tools
10. ONE DEVICE
11. FILE SIZE
12. MORE DEVICES Form-factors x 2 orientations Platforms DPI
13. OVERVIEW Platform: open web, HTML & CSS Publishing: from print to digital Packaging: one idea
14. HTML & CSS
15. ADVANTAGES open format widespread support adaptive web standards
16. CSS: WHAT'S MISSING rich layout complex shapes overflow control
17. CSS REGIONS
20. a r t i c l e { / * c o l l e c t c o n t e n t i n t o a n a m e d f l o w * / f l o w - i n t o : m y F l o w ; } . r e g i o n { / * r e n d e r t h e c o n t e n t f r o m t h e n a m e d f l o w * / f l o w - f r o m : m y F l o w ; }
21. AGGREGATE CONTENT a r t i c l e h 1 , a r t i c l e i m g , a r t i c l e p : n t h - c h i l d ( 1 ) { / * c o l l e c t c o n t e n t i n t o a n a m e d f l o w * / f l o w - i n t o : p r e v i e w ; } . r e g i o n { / * r e n d e r t h e c o n t e n t f r o m t h e n a m e d f l o w * / f l o w - f r o m : p r e v i e w ; }
22. MARKUP SEPARATION < ! - - c o n t e n t : s e m a n t i c m a r k u p - - > < a r t i c l e > < h 1 > T i t l e < / h 1 > < p > . . . < / p > < / a r t i c l e > < ! - - l a y o u t : h e l p e r m a r k u p - - > < d i v c l a s s = " r e g i o n " > < / d i v > < d i v c l a s s = " r e g i o n " > < / d i v > < d i v c l a s s = " r e g i o n " > < / d i v >
23. REGIONS ARE ONLY VISUAL CONTAINERS
24. REGIONS & JAVASCRIPT
25. CSS OBJECT MODEL v a r f l o w s = d o c u m e n t . g e t N a m e d F l o w s ( ) v a r f l o w = f l o w s [ ' m y F l o w ' ] / / G e t t h e n o d e s c o l l e c t e d i n t h e n a m e d f l o w f l o w . g e t C o n t e n t ( ) / / G e t t h e r e g i o n s t h a t r e n d e r t h e c o n t e n t f l o w . g e t R e g i o n s ( )
26. DOES IT FIT? v a r f l o w s = d o c u m e n t . g e t N a m e d F l o w s ( ) v a r f l o w = f l o w s [ ' m y F l o w ' ] / / { B o o l e a n } i s t h e r e m o r e c o n t e n t t h a n r e g i o n s ? f l o w . o v e r s e t / / A d d m o r e r e g i o n s i f n e c e s a r y f l o w . a d d E v e n t L i s t e n e r ( ' r e g i o n l a y o u t u p d a t e ' , f u n c t i o n ( ) { i f ( f l o w . o v e r s e t ) { / / a d d m o r e r e g i o n s } } )
27. CSS REGIONS STATUS W3C Working Draft - Adobe, Microsoft
28. CSS EXCLUSIONS
30. SHAPE INSIDE / * w r a p t h e t e x t i n s i d e a c i r c l e * / # c o n t e n t { s h a p e - i n s i d e : c i r c l e ( 5 0 p x , 5 0 p x 5 0 p x ) }
31. SHAPE OUTSIDE # c o n t e n t { / * . . . * / } # e x c l u s i o n { s h a p e - o u t s i d e : c i r c l e ( 5 0 p x , 5 0 p x 5 0 p x ) / * t e x t c o n t e n t g o e s a r o u n d b o t h m y s i d e s * / w r a p - f l o w : b o t h ; }
32. POLYGON SHAPES / * n o n - r e c t a n g u l a r s h a p e s * / # c o n t e n t { s h a p e - i n s i d e : p o l y g o n ( x 1 , y 1 x 2 , y 2 . . . ) }
33. SHAPES FROM SVG < s v g . . . > < c i r c l e i d = " c i r c l e _ s h a p e " c x = " 5 0 % " c y = " 5 0 % " r = " 5 0 % " / > < / s v g > # c o n t e n t { s h a p e - i n s i d e : u r l ( # c i r c l e _ s h a p e ) }
34. CSS EXCLUSIONS AND SHAPES W3C Working Draft - Adobe, Microsoft
35. OVERVIEW Packaging: one idea Publishing: from print to digital Platform: open web, HTML & CSS
36. PLACEHOLDER MARKUP < ! - - c o n t e n t : s e m a n t i c m a r k u p - - > < a r t i c l e > < h 1 > T i t l e < / h 1 > < p > . . . < / p > < / a r t i c l e > < ! - - l a y o u t : h e l p e r m a r k u p - - > < d i v c l a s s = " r e g i o n " > < / d i v > < d i v c l a s s = " r e g i o n " > < / d i v > < d i v c l a s s = " r e g i o n " > < / d i v >
37. WEB COMPONEN TS & CSS Regions
38. SHADOW DOM The < v i d e o > element Read What the Heck is Shadow DOM? 9:56
39. COMPONENT < h e a d > < l i n k r e l = " c o m p o n e n t s " h r e f = " m a g a z i n e - c o m p o n e n t . h t m l " > < / h e a d >
40. USING IT < a r t i c l e i s = " m a g a z i n e " > < h 1 > T i t l e < / h 1 > < p > . . . < / p > < / a r t i c e >
41. WEB COMPONENTS Shadow DOM W3C Working Draft - Google Intro to Web Components W3C Working Draft - Google
42. + Web Components
43. END @razvancaliman html.adobe.com
44. CSS Regions CSS Regions Proposal to W3C Adobe Web Platform blog CSS Regions tutorial CSS Regions on html.adobe.com CSS Exclusions and Shapes CSS Exclusions and Shapes Proposal to W3C CSS Exclusions on html.adobe.com Hans Muller's blog Web Components Introduction to Web Components Web Components slides by Eric Bidelman
45. THANK YOU! Reveal.js created by Hakim el Hattab Tablet designed by Samuel Q. Green from The Noun Project