The Future State of Layout

8,100
-1

Published on

A presentation for the Fronteers 2009 Conference in Amsterdam on CSS3 layout.

Published in: Technology
2 Comments
26 Likes
Statistics
Notes
  • The Future Layout
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 未来CSS3排版
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
8,100
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
229
Comments
2
Likes
26
Embeds 0
No embeds

No notes for slide

The Future State of Layout

  1. 1. The Future State of Layout Stephen Hay . Fronteers, Amsterdam . 20091105
  2. 2. Stephen Hay
  3. 3. Stephen Hay Creative Director, Cinnamon
  4. 4. Stephen Hay Creative Director, Cinnamon Designing for the Web since 1995
  5. 5. CSS3
  6. 6. CSS3 is Awesome. media queries, more selectors, font stuff, (...)!
  7. 7. Decoration backgrounds, shadows, rounded corners, (...)
  8. 8. Many of these things are trend-driven, decorative properties Neccessary, perhaps, but not as important as...
  9. 9. Type & Layout
  10. 10. Most frustration in web design & development stems from the lack of a decent layout mechanism.
  11. 11. Why is this important? True separation of presentation and structure Source order independence Better data portability
  12. 12. Layout
  13. 13. hasNoLayout
  14. 14. Past Tables Grid-like, but not a grid in the layout sense.
  15. 15. Present Floats & Positioning Counter-intuitive and not intended for layout on today’s Web.
  16. 16. Past and present Serendipitous grids “Hey, cool! Everything lines up!”
  17. 17. Present CSS Frameworks Shouldn’t CSS be the framework?
  18. 18. What is grid layout?
  19. 19. A grid is not a table
  20. 20. Photo courtesy of Kenn W. Kiser, morgueFile.com
  21. 21. Photo: beglib, morgueFile.com
  22. 22. Photo courtesy of Kenn W. Kiser, morgueFile.com
  23. 23. A grid is the underlying geometrical framework which defines the visual structure of the canvas.
  24. 24. Two types of grids Implicit grids are created implicitly by the placement of elements on a page.
  25. 25. Two types of grids Explicit grids are created explicitly, before the placement of elements on a page.
  26. 26. Units vs Columns
  27. 27. The three working drafts
  28. 28. CSS3-Grid (Microsoft) CSS3-Flexbox (Mozilla) CSS3-Layout (W3C)
  29. 29. Grid Positioning Module takes a column- and row-based approach to creating explicit grids.
  30. 30. Grid Positioning: Properties grid-columns grid-rows
  31. 31. Grid Positioning: Syntax div { grid-columns: 69px (12px 69px)[11]; grid-rows: 170px *; }
  32. 32. Grid Positioning
  33. 33. Grid Positioning: combined with multicolumn layout div { grid-columns: 69px (12px 69px)[11]; grid-rows: 170px *; columns: 3; column-gap: 12px; }
  34. 34. Grid Positioning: combined with multicolumn layout
  35. 35. Grid Positioning: Pros & Cons Advantages Disadvantages Simple syntax Reliance on other modules *-syntax (multilength) Somewhat restrictive gr unit Thinking is involved Explicit grid No new placement mechanism
  36. 36. One cool thing about Grid Positioning Module The gr unit A measurement unit to match your grid units! (Well, not exactly.)
  37. 37. Grid Positioning: the gr unit blockquote.pullquote { float: top left column; float-offset: 1gr 4gr; width: 7gr; }
  38. 38. Grid Positioning: the gr unit
  39. 39. Cool! Can I try it out? Nope. No known implementation at this time.
  40. 40. Flexible Box Module creates an implicit grid using flexible element stacking
  41. 41. “A CSS box model optimized for interface design” A small part of XUL, ported to CSS.
  42. 42. Flexible Box: Properties box-align box-direction box-flex box-flex-group box-lines box-ordinal-group box-orient box-pack
  43. 43. Flexible Box: Syntax <div id="parent"> <p id="child1">First child</p> <p id="child2">Second child</p> <p id="child3">Third child</p> </div> #parent { display: box; box-orient: horizontal; #child3 { box-flex: 1; }
  44. 44. Flexible Box: Pros & Cons Advantages Disadvantages Developed for GUIs Implicit grid Simple syntax Nesting Source order independent Lots of thinking Browser calculation
  45. 45. One cool thing about Flexible Box Module The box-flex property Fill available space, or don’t! Your choice!
  46. 46. Cool! Can I try it out? Yes! In Firefox (use the -moz- prefix.) Works now and well (but in no other browsers)
  47. 47. Template Layout Module Explicit grids on adrenaline.
  48. 48. Basic site layouts are trivial to construct
  49. 49. Template Layout: New Stuff New values for the display property New values for the position property The ::slot() pseudo-element The gr unit
  50. 50. Template Layout: Syntax <div id="header">Header</div> <div id="content">Content</div> <div id="nav">Navigation</div> <div id="footer">Footer</div> body { display: "a a a" "b c c" "d d d"; } #header { position: a; } #nav { position: b; } #content { position: c; } #footer { position: d; }
  51. 51. Template Layout: Syntax <div id="header">Header</div> <div id="content">Content</div> <div id="nav">Navigation</div> <div id="footer">Footer</div> body { display: "a a a" / 150px "b c @" / * "d d d" / 80px 200px * * ; } #header { position: a; } #nav { position: b; } #content { position: c; } #footer { position: d; }
  52. 52. Template Layout: the ::slot() pseudo-element ::slot() allows you to style a slot, regardless of the content. body::slot(a) { background-color: silver; }
  53. 53. Template Layout with Multicolumn Layout
  54. 54. Template Layout with Multicolumn Layout
  55. 55. Template Layout: Pros & Cons Advantages Disadvantages Simple syntax Existing properties Visual, to-the-point Hard to implement(?) Explicit grid Source order independent
  56. 56. One cool thing about Template Layout Module Speed and ease of use
  57. 57. Cool! Can I try it out? Yes! Alexis Deveria’s jQuery implementation: http://code.google.com/p/css-template-layout/ Older implementations: http://transcendingcss.com/support/almcss.zip http://www.terrainformatica.com/w3/flex-layout/flex-layout.htm
  58. 58. CSS3 Layout in action: Khoi Vinh’s Yeeaahh! Layout
  59. 59. CSS3 Layout in action: Basic Structure
  60. 60. CSS3 Layout in action: Basic Grid (1)
  61. 61. CSS3 Layout in action: Setting up the grid and slots
  62. 62. CSS3 Layout in action: Placing elements in the slots
  63. 63. CSS3 Layout in action: Basic Layout in place
  64. 64. CSS3 Layout in action: Laying out page components
  65. 65. You can nest templates, and depending on the component, why not choose the best layout mechanism for the job?
  66. 66. CSS3 Layout in action: Component structure
  67. 67. CSS3 Layout in action: nesting boxes
  68. 68. CSS3 Layout in action: Adding more elements
  69. 69. CSS3 Layout in action: Laying out the boxes with flexbox
  70. 70. CSS3 Layout in action: Template playing nice with Flexbox
  71. 71. Remember these important points Source order is no longer an issue You can still float and position (absolute on gr!) There may be power in two modules Use media queries for alternative layouts!
  72. 72. Media queries and CSS3 Layout div { display: "a a a" "b c c" "d d d"; } becomes div { display: "a" "c" "b" "d"; }
  73. 73. What will the future bring?
  74. 74. I have no clue.
  75. 75. Give us some layout, dammit! We’re at the point that we don’t care which module it is.
  76. 76. Give us some layout, dammit! We’re at the point that we don’t care which module it is. (As long as it’s at least Template Layout. Thank you.)
  77. 77. There are huge advantages for designers and developers CSS is the framework
  78. 78. There are huge advantages for designers and developers CSS is the framework Maintainability
  79. 79. There are huge advantages for designers and developers CSS is the framework Maintainability How designers think
  80. 80. A solid layout mechanism will change the face of the Web.
  81. 81. Learn more or get involved CSS3-layout http://www.w3.org/TR/css3-layout CSS3-flexbox http://www.w3.org/TR/css3-flexbox CSS3-grid http://www.w3.org/TR/css3-grid CSS WG Mailing list www-style@w3.org
  82. 82. Thank you! This presentation is available at: the-haystack.com/presentations/fronteers09/ twitter.com/stephenhay Special thanks to Bert Bos for his input, and to Khoi Vinh for allowing me to use his wonderful example.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×