The Future State of Layout

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    12 Favorites

    The Future State of Layout - Presentation Transcript

    1. The Future State of Layout Stephen Hay . Fronteers, Amsterdam . 20091105
    2. Stephen Hay
    3. Stephen Hay Creative Director, Cinnamon
    4. Stephen Hay Creative Director, Cinnamon Designing for the Web since 1995
    5. CSS3
    6. CSS3 is Awesome. media queries, more selectors, font stuff, (...)!
    7. Decoration backgrounds, shadows, rounded corners, (...)
    8. Many of these things are trend-driven, decorative properties Neccessary, perhaps, but not as important as...
    9. Type & Layout
    10. Most frustration in web design & development stems from the lack of a decent layout mechanism.
    11. Why is this important? True separation of presentation and structure Source order independence Better data portability
    12. Layout
    13. hasNoLayout
    14. Past Tables Grid-like, but not a grid in the layout sense.
    15. Present Floats & Positioning Counter-intuitive and not intended for layout on today’s Web.
    16. Past and present Serendipitous grids “Hey, cool! Everything lines up!”
    17. Present CSS Frameworks Shouldn’t CSS be the framework?
    18. What is grid layout?
    19. A grid is not a table
    20. Photo courtesy of Kenn W. Kiser, morgueFile.com
    21. Photo: beglib, morgueFile.com
    22. Photo courtesy of Kenn W. Kiser, morgueFile.com
    23. A grid is the underlying geometrical framework which defines the visual structure of the canvas.
    24. Two types of grids Implicit grids are created implicitly by the placement of elements on a page.
    25. Two types of grids Explicit grids are created explicitly, before the placement of elements on a page.
    26. Units vs Columns
    27. The three working drafts
    28. CSS3-Grid (Microsoft) CSS3-Flexbox (Mozilla) CSS3-Layout (W3C)
    29. Grid Positioning Module takes a column- and row-based approach to creating explicit grids.
    30. Grid Positioning: Properties grid-columns grid-rows
    31. Grid Positioning: Syntax div { grid-columns: 69px (12px 69px)[11]; grid-rows: 170px *; }
    32. Grid Positioning
    33. Grid Positioning: combined with multicolumn layout div { grid-columns: 69px (12px 69px)[11]; grid-rows: 170px *; columns: 3; column-gap: 12px; }
    34. Grid Positioning: combined with multicolumn layout
    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. One cool thing about Grid Positioning Module The gr unit A measurement unit to match your grid units! (Well, not exactly.)
    37. Grid Positioning: the gr unit blockquote.pullquote { float: top left column; float-offset: 1gr 4gr; width: 7gr; }
    38. Grid Positioning: the gr unit
    39. Cool! Can I try it out? Nope. No known implementation at this time.
    40. Flexible Box Module creates an implicit grid using flexible element stacking
    41. “A CSS box model optimized for interface design” A small part of XUL, ported to CSS.
    42. Flexible Box: Properties box-align box-direction box-flex box-flex-group box-lines box-ordinal-group box-orient box-pack
    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. Flexible Box: Pros & Cons Advantages Disadvantages Developed for GUIs Implicit grid Simple syntax Nesting Source order independent Lots of thinking Browser calculation
    45. One cool thing about Flexible Box Module The box-flex property Fill available space, or don’t! Your choice!
    46. Cool! Can I try it out? Yes! In Firefox (use the -moz- prefix.) Works now and well (but in no other browsers)
    47. Template Layout Module Explicit grids on adrenaline.
    48. Basic site layouts are trivial to construct
    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. 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. 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. Template Layout: the ::slot() pseudo-element ::slot() allows you to style a slot, regardless of the content. body::slot(a) { background-color: silver; }
    53. Template Layout with Multicolumn Layout
    54. Template Layout with Multicolumn Layout
    55. Template Layout: Pros & Cons Advantages Disadvantages Simple syntax Existing properties Visual, to-the-point Hard to implement(?) Explicit grid Source order independent
    56. One cool thing about Template Layout Module Speed and ease of use
    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. CSS3 Layout in action: Khoi Vinh’s Yeeaahh! Layout
    59. CSS3 Layout in action: Basic Structure
    60. CSS3 Layout in action: Basic Grid (1)
    61. CSS3 Layout in action: Setting up the grid and slots
    62. CSS3 Layout in action: Placing elements in the slots
    63. CSS3 Layout in action: Basic Layout in place
    64. CSS3 Layout in action: Laying out page components
    65. You can nest templates, and depending on the component, why not choose the best layout mechanism for the job?
    66. CSS3 Layout in action: Component structure
    67. CSS3 Layout in action: nesting boxes
    68. CSS3 Layout in action: Adding more elements
    69. CSS3 Layout in action: Laying out the boxes with flexbox
    70. CSS3 Layout in action: Template playing nice with Flexbox
    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. Media queries and CSS3 Layout div { display: "a a a" "b c c" "d d d"; } becomes div { display: "a" "c" "b" "d"; }
    73. What will the future bring?
    74. I have no clue.
    75. Give us some layout, dammit! We’re at the point that we don’t care which module it is.
    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. There are huge advantages for designers and developers CSS is the framework
    78. There are huge advantages for designers and developers CSS is the framework Maintainability
    79. There are huge advantages for designers and developers CSS is the framework Maintainability How designers think
    80. A solid layout mechanism will change the face of the Web.
    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. 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.

    + Stephen HayStephen Hay, 3 weeks ago

    custom

    1148 views, 12 favs, 7 embeds more stats

    A presentation for the Fronteers 2009 Conference in more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 1148
      • 881 on SlideShare
      • 267 from embeds
    • Comments 0
    • Favorites 12
    • Downloads 42
    Most viewed embeds
    • 184 views on http://www.the-haystack.com
    • 55 views on http://xss.yandex.net
    • 17 views on http://addyosmani.com
    • 4 views on http://blarnee.com
    • 4 views on http://www.siggyvolgt.nl

    more

    All embeds
    • 184 views on http://www.the-haystack.com
    • 55 views on http://xss.yandex.net
    • 17 views on http://addyosmani.com
    • 4 views on http://blarnee.com
    • 4 views on http://www.siggyvolgt.nl
    • 2 views on http://www.iweb34.com
    • 1 views on http://nonio.ese.ipsantarem.pt

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories