The Future State of


Layout
        Stephen Hay . Fronteers, Amsterdam . 20091105
Stephen Hay
Stephen Hay
Creative Director,
Cinnamon
Stephen Hay
Creative Director,
Cinnamon
Designing for the Web
since 1995
CSS3
CSS3 is




   Awesome.
   media queries, more selectors, font stuff, (...)!
Decoration
backgrounds, shadows, rounded corners, (...)
Many of these things are

trend-driven,
decorative properties
Neccessary, perhaps, but not as important as...
Type &
Layout
Most frustration in web design &
development stems from the lack of a
decent layout mechanism.
Why is this important?




       True separation of presentation and structure
       Source order independence
       Be...
Layout
hasNoLayout
Past




   Tables
   Grid-like, but not a grid in the layout sense.
Present




   Floats & Positioning
   Counter-intuitive and
   not intended for layout on today’s Web.
Past and present




   Serendipitous grids
   “Hey, cool! Everything lines up!”
Present




   CSS Frameworks
   Shouldn’t CSS be the framework?
What is grid
layout?
A grid is not a table
Photo courtesy of Kenn W. Kiser, morgueFile.com
Photo: beglib, morgueFile.com
Photo courtesy of Kenn W. Kiser, morgueFile.com
A grid is the underlying
geometrical framework
which defines the visual
structure of the canvas.
Two types of grids




   Implicit grids
   are created implicitly by the
   placement of elements on a page.
Two types of grids




   Explicit grids
   are created explicitly, before the
   placement of elements on a page.
Units vs Columns
The three
working drafts
CSS3-Grid (Microsoft)
CSS3-Flexbox (Mozilla)
CSS3-Layout (W3C)
Grid Positioning Module
takes a column- and row-based approach to creating
explicit grids.
Grid Positioning: Properties




   grid-columns
   grid-rows
Grid Positioning: Syntax




        div {
            grid-columns: 69px (12px 69px)[11];
            grid-rows: 170px *;...
Grid Positioning
Grid Positioning: combined with multicolumn layout




       div {
           grid-columns: 69px (12px 69px)[11];
       ...
Grid Positioning: combined with multicolumn layout
Grid Positioning: Pros & Cons




    Advantages             Disadvantages
    Simple syntax          Reliance on other mo...
One cool thing about Grid Positioning Module




   The gr unit
   A measurement unit to match your grid units!
   (Well, ...
Grid Positioning: the gr unit




        blockquote.pullquote {
            float: top left column;
            float-off...
Grid Positioning: the gr unit
Cool! Can I try it out?




   Nope.
   No known implementation at this time.
Flexible Box Module
creates an implicit grid using flexible element stacking
“A CSS box model
optimized for
interface design”
A small part of XUL, ported to CSS.
Flexible Box: Properties




   box-align
   box-direction
   box-flex
   box-flex-group
   box-lines
   box-ordinal-group...
Flexible Box: Syntax



   <div id="parent">
       <p id="child1">First child</p>
       <p id="child2">Second child</p>
...
Flexible Box: Pros & Cons




         Advantages                 Disadvantages
         Developed for GUIs         Implic...
One cool thing about Flexible Box Module




   The box-flex property
   Fill available space, or don’t! Your choice!
Cool! Can I try it out?




   Yes!
   In Firefox (use the -moz- prefix.)
   Works now and well (but in no other browsers)
Template Layout Module
Explicit grids on adrenaline.
Basic site layouts are trivial to construct
Template Layout: New Stuff




       New values for the display property
       New values for the position property
     ...
Template Layout: Syntax


   <div   id="header">Header</div>
   <div   id="content">Content</div>
   <div   id="nav">Navig...
Template Layout: Syntax


   <div   id="header">Header</div>
   <div   id="content">Content</div>
   <div   id="nav">Navig...
Template Layout: the ::slot() pseudo-element




   ::slot() allows you
   to style a slot,
   regardless of the
   conten...
Template Layout with Multicolumn Layout
Template Layout with Multicolumn Layout
Template Layout: Pros & Cons




      Advantages               Disadvantages
      Simple syntax            Existing prop...
One cool thing about Template Layout Module




   Speed and ease of use
Cool! Can I try it out?




   Yes!
   Alexis Deveria’s jQuery implementation:
   http://code.google.com/p/css-template-la...
CSS3 Layout in action: Khoi Vinh’s Yeeaahh! Layout
CSS3 Layout in action: Basic Structure
CSS3 Layout in action: Basic Grid (1)
CSS3 Layout in action: Setting up the grid and slots
CSS3 Layout in action: Placing elements in the slots
CSS3 Layout in action: Basic Layout in place
CSS3 Layout in action: Laying out page components
You can nest templates,
and depending on the
component, why not
choose the best layout
mechanism for the job?
CSS3 Layout in action: Component structure
CSS3 Layout in action: nesting boxes
CSS3 Layout in action: Adding more elements
CSS3 Layout in action: Laying out the boxes with flexbox
CSS3 Layout in action: Template playing nice with Flexbox
Remember these important points




       Source order is no longer an issue
       You can still float and position (abso...
Media queries and CSS3 Layout




   div { display: "a a a"
                  "b c c"
                  "d d d"; }

   bec...
What will the future bring?
I have no clue.
Give us some layout,
dammit!
We’re at the point that we don’t care which module it is.
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 ...
There are huge advantages for designers and developers




   CSS is the framework
There are huge advantages for designers and developers




   CSS is the framework
   Maintainability
There are huge advantages for designers and developers




   CSS is the framework
   Maintainability
   How designers thi...
A solid layout mechanism
will change the face
of the Web.
Learn more or get involved




   CSS3-layout
   http://www.w3.org/TR/css3-layout

   CSS3-flexbox
   http://www.w3.org/TR/...
Thank you!
This presentation is available at:
the-haystack.com/presentations/fronteers09/

twitter.com/stephenhay

Special...
The Future State of Layout
The Future State of Layout
The Future State of Layout
The Future State of Layout
The Future State of Layout
The Future State of Layout
Upcoming SlideShare
Loading in...5
×

The Future State of Layout

7,857

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
7,857
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. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×