The New CSS Layout

updated and extended for Future of Web Apps, London 2013

Transcript

1. Future of Web Apps, October 2013 Rachel Andrew @rachelandrew The New CSS Layout Thursday, 24 October 13
2. We need designed for purpose layout tools! Floats, positioning, display: table, display: inline-block CSS for Layout Thursday, 24 October 13
3. Our existing layout methods make creating complex in-browser application layouts difficult Layout for applications Thursday, 24 October 13
4. W3C Candidate Recommendation, 12th April 2011 http://www.w3.org/TR/css3-multicol/ Multi-column Layout Thursday, 24 October 13
5. http://www.flickr.com/photos/62693815@N03/6277209256/ Thursday, 24 October 13
6. We specify our columns on the container element. .col-wrapper { background-color: rgb(234,237,228); color: rgb(68,68,68); padding: 20px; border-radius: 5px; } Multi-col Thursday, 24 October 13
7. Specifying the width and allowing the browser to calculate number of columns. .col-wrapper { background-color: rgb(234,237,228); color: rgb(68,68,68); padding: 20px; border-radius: 5px; column-width: 220px; } Multi-col Thursday, 24 October 13
8. Specifying the number of columns means the browser calculates the width. .col-wrapper { background-color: rgb(234,237,228); color: rgb(68,68,68); padding: 20px; border-radius: 5px; column-count: 4; } Multi-col Thursday, 24 October 13
9. The column-gap property controls the width of the gutters between our columns. .col-wrapper { background-color: rgb(234,237,228); color: rgb(68,68,68); padding: 20px; border-radius: 5px; column-width: 220px; column-gap: 1.5em; } Multi-col Thursday, 24 October 13
10. The column-rule property sets a rule between columns. It takes no space of it’s own and overlays the column-gap. .col-wrapper { background-color: rgb(234,237,228); color: rgb(68,68,68); padding: 20px; border-radius: 5px; column-width: 220px; column-gap: 2em; column-rule: 2px dotted rgb(170,179,171); } Multi-col Thursday, 24 October 13
11. The column-span property makes an element span columns. .col-wrapper h1 { column-span: all; padding: 0 0 .5em 0; } Multi-col Thursday, 24 October 13
12. Thursday, 24 October 13
13. Perch UI Thursday, 24 October 13
14. Images are constrained by the columns. img { max-width: 100%; } Multi-col Thursday, 24 October 13
15. If a browser does not support multiple- column layout it will display the content in a single column. Multi-col Thursday, 24 October 13
16. Using CSS multi-column layouts - https://developer.mozilla.org/en-US/ docs/CSS/Using_CSS_multi-column_layouts CSS3 Multi-column layout - http://dev.opera.com/articles/view/css3- multi-column-layout/ Detailed browser information - http://www.quirksmode.org/css/ columns/ Multi-col Resources Thursday, 24 October 13
17. W3C Candidate Recommendation, 18th September 2012 http://www.w3.org/TR/css3-flexbox/ Flexible Box Layout Module Thursday, 24 October 13
18. http://www.flickr.com/photos/megangoodchild/4603320792 Thursday, 24 October 13
19. Navigation marked up as a list. I want to space these items evenly. <ul> <li><a href="">What a Cabbage Is</a></li> <li><a href="">Selecting the Soil</a></li> <li class="cur"><a href="">Preparing the Soil</a></li> <li><a href="">The Manure</a></li> </ul> Flexbox Thursday, 24 October 13
20. A value of flex for the display elements means we are using flexbox. nav ul{ display: flex; flex-direction: row; justify-content: space-around; align-items: stretch; } Flexbox Thursday, 24 October 13
21. Setting justify- content to space- between means that items justify against the left and right sides of the box. nav ul{ display: flex; flex-direction: row; justify-content: space-between; align-items: stretch; } Flexbox Thursday, 24 October 13
22. The default value of flex-direction is row. nav ul{ display: flex; flex-direction: row; justify-content: space-between; align-items: stretch; } Flexbox Thursday, 24 October 13
23. Set flex-direction to row-reverse and the order the items display in reverses. nav ul{ display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: stretch; } Flexbox Thursday, 24 October 13
24. Creating equal height boxes using flexbox. <div class="boxes"> <div class="box"> ... </div> <div class="box"> ... </div> <div class="box"> ... </div> </div> Flexbox Thursday, 24 October 13
25. With align-items given a value of stretch the items will take the height of the tallest. .boxes { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: space-between; } Flexbox Thursday, 24 October 13
26. With align-items given a value of center. .boxes { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; } Flexbox Thursday, 24 October 13
27. With align-items given a value of flex- end. .boxes { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; } Flexbox Thursday, 24 October 13
28. The order property means we can order our flex items independently of source order. .boxes .box:nth-child(1) { order:3; } .boxes .box:nth-child(2) { order:1; } .boxes .box:nth-child(3) { order:2; } Flexbox Thursday, 24 October 13
29. http://css-tricks.com/old-flexbox-and-new-flexbox/ Thursday, 24 October 13
30. Thursday, 24 October 13
31. you CAN use these techniques even where there is limited browser support Use new CSS sparingly, as an enhancement for small UI elements - rather than thinking in terms of full layouts. Thursday, 24 October 13
32. http://philipwalton.github.io/solved-by-flexbox/ Thursday, 24 October 13
33. Using CSS Flexible Boxes - https://developer.mozilla.org/en-US/docs/ CSS/Tutorials/Using_CSS_flexible_boxes Advanced Cross Browser Flexbox - http://dev.opera.com/articles/view/ advanced-cross-browser-flexbox/ Working with Flexbox - http://www.adobe.com/devnet/html5/articles/ working-with-flexbox-the-new-spec.html Solved by Flexbox - http://philipwalton.github.io/solved-by-flexbox/ Flexbox Resources Thursday, 24 October 13
34. W3C Working Draft, 10th September 2013 http://www.w3.org/TR/css3-grid-layout/ CSS Grid Layout Thursday, 24 October 13
35. http://www.flickr.com/photos/adactio/1799953270 Thursday, 24 October 13
36. 7th April 2011 First public draft History of CSS Grid Layout Thursday, 24 October 13
37. http://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/ Thursday, 24 October 13
38. 10 September 2013 Current Working Draft CSS Grid Layout Thursday, 24 October 13
39. Define a grid using the new grid and inline-grid values of the display property. .wrapper { display: grid; } Grid Layout Thursday, 24 October 13
40. The grid-template- columns property defines the grid columns; grid- template-rows the grid rows. .wrapper { display: grid; grid-template-columns: 200px 20px auto 20px 200px; grid-template-rows: auto 1fr; } Grid Layout Thursday, 24 October 13
41. I have declared a grid on the wrapper so the children need to be positioned. <div class=”wrapper”> <h1 class="title"></h1> <article class=”content”></div> <nav class=”mainnav”></nav> <blockquote class=”quote”></blockquote> </div> Grid Layout Thursday, 24 October 13
42. grid-column-start and grid-column-end set the column position; grid-row- start and grid-row- end the row. .content { grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; } Grid Layout Thursday, 24 October 13
43. Columns used as gutters still count as a column, when positioning items. .mainnav { grid-column-start: 1; grid-column-end:2; grid-row-start: 2; grid-row-end: 3; } .title { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; } .quote { grid-column-start: 5; grid-column-end:6; grid-row-start: 2; grid-row-end: 3; } Grid Layout Thursday, 24 October 13
44. When we place an item we declare the grid lines that contain it. .content { grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; } Grid Layout Thursday, 24 October 13
45. When we place an item we declare the grid lines that contain it. .content { grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; } Grid Layout Thursday, 24 October 13
46. When we place an item we declare the grid lines that contain it. .content { grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; } Grid Layout Thursday, 24 October 13
47. When we place an item we declare the grid lines that contain it. .content { grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; } Grid Layout Thursday, 24 October 13
48. When we place an item we declare the grid lines that contain it. .content { grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; } Grid Layout Thursday, 24 October 13
49. We can also declare named grid lines. .wrapper { display: grid; grid-template-columns: (nav) 200px (gutter) 20px (main) auto (gutter) 20px (sidebar) 200px; grid-template-rows: (header) auto (content) 1fr (content- end); } Grid Layout Thursday, 24 October 13
50. You then use the name rather than the number to place the content. .content { grid-column-start: main; grid-column-end: span 1; grid-row-start: content; grid-row-end: span 1; } Grid Layout Thursday, 24 October 13
51. It will also be possible to declare grid template areas .wrapper { display: grid; grid-template-columns: 200px 20px auto 20px 200px; grid-template-rows: auto 1fr; grid-template-areas: "header header header header header" "nav . content . sidebar" } Grid Layout Thursday, 24 October 13
52. With a template defined you can more simply target areas of the template. .content { grid-area: content; } Grid Layout Thursday, 24 October 13
53. New proposals CSS Grid Layout Thursday, 24 October 13
54. http://lists.w3.org/Archives/Public/www-style/2013May/0077.html Thursday, 24 October 13
55. Based on the earlier Draft IE10 Implementation CSS Grid Layout Thursday, 24 October 13
56. Defining a grid in the IE10 implementation. .wrapper { display: -ms-grid; -ms-grid-columns: 200px 20px auto 20px 200px; -ms-grid-rows: auto 1fr; } Grid Layout Thursday, 24 October 13
57. The grid-column and grid-row properties are used differently in the new Working Draft. This is how to position grid items in IE10. .mainnav { -ms-grid-column: 1; -ms-grid-row: 2; } .title { -ms-grid-row: 1; -ms-grid-column:3; } .content { -ms-grid-column: 3; -ms-grid-row: 2; } .quote { -ms-grid-column: 5; -ms-grid-row: 2; } Grid Layout Thursday, 24 October 13
58. The IE10 implementation specifies the row and column, rather than the lines around. .content { grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; } Grid Layout Thursday, 24 October 13
59. The IE10 implementation specifies the row and column, rather than the lines around. Grid Layout .content { -ms-grid-column: 3; -ms-grid-row: 2; } Thursday, 24 October 13
60. http://codepen.io/rachelandrew/pen/sFhmx Thursday, 24 October 13
61. Thursday, 24 October 13
62. http://lists.w3.org/Archives/Public/www-style/2013May/0114.html Flexbox is for one-dimensional layouts Grid is for two-dimensional layouts Grid or Flexbox? Thursday, 24 October 13
63. Giving Content Priority with CSS Grid Layout - http://24ways.org/2012/ css3-grid-layout/ My Grid examples on CodePen - http://codepen.io/rachelandrew/tag/ 24%20ways CSS Grid Layout - what has changed? - http://www.rachelandrew.co.uk/ archives/2013/04/10/css-grid-layout---what-has-changed/ Named Lines and Grid areas - http://www.rachelandrew.co.uk/archives/ 2013/04/29/css-grid-layout-named-grid-lines-and-areas/ My Grid Resources Thursday, 24 October 13
64. Test Drive Grid (IE10 implementation) - http://ie.microsoft.com/ testdrive/graphics/hands-on-css3/hands-on_grid.htm Using CSS Grid Layout to build a game - http://www.sitepoint.com/ using-css-grid-layout-and-blend-5-to-build-a-game/ CSS Grid Layout Overhaul, comments needed! - http://www.css3.info/ css-grid-layout-overhaul-comments-needed/ IE10 implementation Polyfill - https://github.com/codler/Grid-Layout- Polyfill More resources Thursday, 24 October 13
65. W3C Working Draft, 28th May 2013 http://www.w3.org/TR/css3-regions/ CSS Regions Thursday, 24 October 13
66. http://html.adobe.com/webplatform/layout/regions/ Thursday, 24 October 13
67. http://html.adobe.com/webplatform/enable/ Thursday, 24 October 13
68. http://blogs.adobe.com/webplatform/2013/09/18/ios-7-safari-new-web-platform-features/ Thursday, 24 October 13
69. My content is inside the article element. <div class="wrapper"> <article class="main"> ... </div> <div class="region1 article-regions"></div> <div class="regionwrapper"> <div class="region2 article-regions"></div> <div class="region3 article-regions"></div> <div class="region4 article-regions"></div> </div> <div class="region5 article-regions"></div> </div> Regions Thursday, 24 October 13
70. The CSS property flow-into has a value of the name you choose for this content. .main { flow-into: article-thread; } Regions Thursday, 24 October 13
71. The property flow- from sets where this content thread should flow from. .article-regions { flow-from: article-thread; } Regions Thursday, 24 October 13
72. Once the content reaches a height of 6em it will have to flow into the next region. .region1 { height: 6em; margin: 0 0 1em 0; } Regions Thursday, 24 October 13
73. The positioning of the regions can use any CSS layout method you like. .regionwrapper { display: flex; flex-direction: row; } .region2 { flex: 1; padding: 0.8em; height: 10em; border-right: 1px dotted #ccc; } .region3 { flex: 1; padding: 0.8em; height: 10em; border-right: 1px dotted #ccc; background-color: rgb(255,255,255); } .region4 { flex: 1; padding: 0.8em; height: 10em; } Regions Thursday, 24 October 13
74. A height of auto on a region means it will expand to take whatever content is there. A fixed height means once that height is reached the content moves onto the next region. .region5 { padding: 1em 0 0 0; margin: 1em 0 0 0; border-top: 1px dotted #ccc; height: auto; } Regions Thursday, 24 October 13
75. Regions do not have to be adjacent. <div class="regionwrapper"> <div class="region2 article-regions"></div> <div class="region3"><img src="img/cabbage1.jpg" alt="a cabbage" /></div> <div class="region4 article-regions"></div> </div> Regions Thursday, 24 October 13
76. Thursday, 24 October 13
77. I have created a separate HTML document to store my content. <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>Regions content</title> <link rel="stylesheet" type="text/css" href="common.css" /> </head> <body class="framed"> <article class="main">...</article> </body> </html> Regions Thursday, 24 October 13
78. On the page that will display the content, I have an iframe with an ID, and also the empty regions into which content will flow. <iframe id="regions-content" src="regions_content.html"></ iframe> <div class="regionwrapper"> <div class="region1 article-regions"></div> <div class="region2 article-regions"></div> <div class="region3 article-regions"></div> <div class="region4 article-regions"></div> <div class="region5 article-regions"></div> </div> Regions Thursday, 24 October 13
79. The flow-into property on the iframe ID causes the iframe to disappear. #regions-content { -ms-flow-into: article-thread; } Regions Thursday, 24 October 13
80. We then flow-into the regions as before. .article-regions { -ms-flow-from: article-thread; } Regions Thursday, 24 October 13
81. Regions can be positioned using any method - here I am using the IE10 Grid Layout implementation. .regionwrapper { display: -ms-grid; -ms-grid-columns: 1fr 1fr 1fr; -ms-grid-rows: 10em 10em auto; } .region1 { margin: 0 0 1em 0; -ms-grid-column: 1; -ms-grid-row: 1; -ms-grid-column-span: 3; } Regions Thursday, 24 October 13
82. Edit the grid definition to change height of rows to adjust content flow. .regionwrapper { display: -ms-grid; -ms-grid-columns: 1fr 1fr 1fr; -ms-grid-rows: 10em 6em auto; } Regions Thursday, 24 October 13
83. Using CSS Regions to flow content through a layout - http:// docs.webplatform.org/wiki/css/tutorials/css-regions Say hello to CSS Regions Polyfill - http://corlan.org/2013/02/08/say- hello-to-css-regions-polyfill/ CSS Regions examples on CodePen from Adobe - http://codepen.io/ collection/jabto An Introduction to CSS Regions - http://dev.opera.com/articles/view/an- introduction-to-css-regions/ WebPlatform.org CSS Regions - http://docs.webplatform.org/wiki/ tutorials/css-regions Regions Resources Thursday, 24 October 13
84. W3C Working Draft, 28th May 2013 http://www.w3.org/TR/css3-exclusions/ CSS Exclusions Thursday, 24 October 13
85. Defines the wrap-flow and wrap-through properties. Allow you to wrap text around elements that are not floated. Exclusions Thursday, 24 October 13
86. <div class="wrapper"> <article class="main"> ... </article> <div class="exclusion"><img src="img/cabbage1.jpg" alt="A cabbage" /></div> </div> Exclusions Thursday, 24 October 13
87. Positioning the exclusion can be done with any positioning method. .exclusion { height: 160px; width: 200px; padding: 10px; position: absolute; top: 120px; left: 120px; } Exclusions Thursday, 24 October 13
88. The wrap-flow property makes the text flow round the exclusion. .exclusion { height: 160px; width: 200px; padding: 10px; position: absolute; top: 120px; left: 120px; wrap-flow:both; } Exclusions Thursday, 24 October 13
89. http://adobe.github.io/web-platform/utilities/css-exclusions-support-matrix/ Thursday, 24 October 13
90. Wrap-flow and CSS Exclusions - http://advent2012.digitpaint.nl/21/ Adobe post on separation of the Shapes and Exclusions specs - http:// blogs.adobe.com/webplatform/2013/06/04/how-to-make-a-chocolate- peanut-butter-cup/ -ms-wrap-flow information on using wrap-flow in IE10 - http:// msdn.microsoft.com/en-us/library/windows/apps/hh767314.aspx Exclusions Resources Thursday, 24 October 13
91. W3C Working Draft, 20th June 2013 Level 1 Editors Draft, 18th October 2013 Level 2 Editors Draft, 1st October 2013 http://www.w3.org/TR/css-shapes/ CSS Shapes Thursday, 24 October 13
92. Current level 1 working draft defines shape-outside, and allows shapes only on floats. A Level 2 draft is currently at Editors Draft stage and reimplements these things. Wrap content around and inside things that are not rectangles. CSS Shapes Thursday, 24 October 13
93. http://adobe.github.io/web-platform/samples/css-exclusions/nevermore/index.html Thursday, 24 October 13
94. The shape-outside property allows text to be wrapped around a shape such as a circle. .float { width: 100px; height: 100px; float: left; shape-outside: circle(50%, 50%, 50%); } CSS Shapes See: http://codepen.io/adobe/pen/HEGna Thursday, 24 October 13
95. http://betravis.github.io/shape-tools/polygon-drawing/ Thursday, 24 October 13
96. http://betravis.github.io/shape-tools/polygon-drawing/ Thursday, 24 October 13
97. http://blogs.adobe.com/webplatform/2013/10/23/css-shapes-visual-storytelling/ Thursday, 24 October 13
98. Adobe Web Platform: Shapes - http://html.adobe.com/webplatform/ layout/shapes/ Experimenting with CSS Exclusions (actually covers Shapes) - http:// blog.digitalbackcountry.com/2012/03/experimenting-with-css-exclusions/ Shapes examples on CodePen from Adobe - http://codepen.io/ collection/qFesk CSS Shape Tools - http://betravis.github.io/shape-tools CSS Shapes “Alice in Wonderland” example - http://blogs.adobe.com/ webplatform/2013/10/23/css-shapes-visual-storytelling/ Shapes Resources Thursday, 24 October 13
99. While specs are at an early stage your opinion can change things. Get involved with new specs! http://lists.w3.org/Archives/Public/www-style/ Thursday, 24 October 13
100. http://rachelandrew.co.uk/presentations/new-css-layout @rachelandrew rachelandrew.co.uk edgeofmyseat.com grabaperch.com Thank you! Thursday, 24 October 13