The New CSS Layout - Awwwards 2014

An updated version of this talk for the Awwwards Conference in Paris.

Resources are at: http://rachelandrew.co.uk/presentations/new-css-layout

Transcript

1. Friday, 14 February 14
2. Awwwards, Paris, February 2014 Rachel Andrew @rachelandrew The New CSS Layout Friday, 14 February 14
3. We need designed for purpose layout tools! Floats, positioning, display: table, display: inline-block CSS for Layout Friday, 14 February 14
4. Our existing layout methods make creating complex in-browser application layouts difficult Layout for applications Friday, 14 February 14
5. W3C Candidate Recommendation, 12th April 2011 http://www.w3.org/TR/css3-multicol/ Multi-column Layout Friday, 14 February 14
6. http://www.flickr.com/photos/62693815@N03/6277209256/ Friday, 14 February 14
7. 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 Friday, 14 February 14
8. 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 Friday, 14 February 14
9. 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 Friday, 14 February 14
10. 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 Friday, 14 February 14
11. 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 Friday, 14 February 14
12. The column-span property makes an element span columns. .col-wrapper h1 { column-span: all; padding: 0 0 .5em 0; } Multi-col Friday, 14 February 14
13. Friday, 14 February 14
14. Perch UI Friday, 14 February 14
15. Images are constrained by the columns. img { max-width: 100%; } Multi-col Friday, 14 February 14
16. If a browser does not support multiple- column layout it will display the content in a single column. Multi-col Friday, 14 February 14
17. 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 Friday, 14 February 14
18. W3C Candidate Recommendation, 18th September 2012 http://www.w3.org/TR/css3-flexbox/ Flexible Box Layout Module Friday, 14 February 14
19. http://www.flickr.com/photos/megangoodchild/4603320792 Friday, 14 February 14
20. 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 Friday, 14 February 14
21. 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 Friday, 14 February 14
22. 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 Friday, 14 February 14
23. The default value of flex-direction is row. nav ul{ display: flex; flex-direction: row; justify-content: space-between; align-items: stretch; } Flexbox Friday, 14 February 14
24. 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 Friday, 14 February 14
25. Creating equal height boxes using flexbox. <div class="boxes"> <div class="box"> ... </div> <div class="box"> ... </div> <div class="box"> ... </div> </div> Flexbox Friday, 14 February 14
26. 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 Friday, 14 February 14
27. 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 Friday, 14 February 14
28. 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 Friday, 14 February 14
29. 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 Friday, 14 February 14
30. http://css-tricks.com/old-flexbox-and-new-flexbox/ Friday, 14 February 14
31. Friday, 14 February 14
32. 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. Friday, 14 February 14
33. http://philipwalton.github.io/solved-by-flexbox/ Friday, 14 February 14
34. 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 Friday, 14 February 14
35. W3C Working Draft, 23rd January 2014 http://www.w3.org/TR/css3-grid-layout/ CSS Grid Layout Friday, 14 February 14
36. http://www.flickr.com/photos/adactio/1799953270 Friday, 14 February 14
37. 7th April 2011 First public draft History of CSS Grid Layout Friday, 14 February 14
38. http://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/ Friday, 14 February 14
39. 23 January 2014 Current Working Draft CSS Grid Layout Friday, 14 February 14
40. Define a grid using the new grid and inline-grid values of the display property. .wrapper { display: grid; } Grid Layout Friday, 14 February 14
41. 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 Friday, 14 February 14
42. 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 Friday, 14 February 14
43. 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 Friday, 14 February 14
44. 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 Friday, 14 February 14
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 Friday, 14 February 14
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 Friday, 14 February 14
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 Friday, 14 February 14
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 Friday, 14 February 14
49. 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 Friday, 14 February 14
50. 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 Friday, 14 February 14
51. 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 Friday, 14 February 14
52. 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 Friday, 14 February 14
53. With a template defined you can more simply target areas of the template. .content { grid-area: content; } Grid Layout Friday, 14 February 14
54. New proposals CSS Grid Layout Friday, 14 February 14
55. http://lists.w3.org/Archives/Public/www-style/2013May/0077.html Friday, 14 February 14
56. Based on the earlier Draft IE10 Implementation CSS Grid Layout Friday, 14 February 14
57. 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 Friday, 14 February 14
58. 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 Friday, 14 February 14
59. 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 Friday, 14 February 14
60. The IE10 implementation specifies the row and column, rather than the lines around. Grid Layout .content { -ms-grid-column: 3; -ms-grid-row: 2; } Friday, 14 February 14
61. http://codepen.io/rachelandrew/pen/sFhmx Friday, 14 February 14
62. Friday, 14 February 14
63. 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? Friday, 14 February 14
64. 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 Friday, 14 February 14
65. 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 Friday, 14 February 14
66. http://html.adobe.com/webplatform/enable/ Friday, 14 February 14
67. W3C Working Draft, 28th May 2013 http://www.w3.org/TR/css3-regions/ CSS Regions Friday, 14 February 14
68. http://html.adobe.com/webplatform/layout/regions/ Friday, 14 February 14
69. http://blogs.adobe.com/webplatform/2013/09/18/ios-7-safari-new-web-platform-features/ Friday, 14 February 14
70. 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 Friday, 14 February 14
71. The CSS property flow-into has a value of the name you choose for this content. .main { flow-into: article-thread; } Regions Friday, 14 February 14
72. The property flow- from sets where this content thread should flow from. .article-regions { flow-from: article-thread; } Regions Friday, 14 February 14
73. 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 Friday, 14 February 14
74. 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 Friday, 14 February 14
75. 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 Friday, 14 February 14
76. 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 Friday, 14 February 14
77. Friday, 14 February 14
78. 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 Friday, 14 February 14
79. 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 Friday, 14 February 14
80. The flow-into property on the iframe ID causes the iframe to disappear. #regions-content { -ms-flow-into: article-thread; } Regions Friday, 14 February 14
81. We then flow-into the regions as before. .article-regions { -ms-flow-from: article-thread; } Regions Friday, 14 February 14
82. 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 Friday, 14 February 14
83. 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 Friday, 14 February 14
84. http://alistapart.com/blog/post/css-regions-considered-harmful “CSS Regions Considered Harmful” January 2014 Friday, 14 February 14
85. https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/kTktlHPJn4Q/ YrnfLxeMO7IJ CSS Regions to be removed from the Blink rendering engine January 2014 Friday, 14 February 14
86. 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 Friday, 14 February 14
87. W3C Working Draft, 28th May 2013 http://www.w3.org/TR/css3-exclusions/ CSS Exclusions Friday, 14 February 14
88. Defines the wrap-flow and wrap-through properties. Allow you to wrap text around elements that are not floated. Exclusions Friday, 14 February 14
89. <div class="wrapper"> <article class="main"> ... </article> <div class="exclusion"><img src="img/cabbage1.jpg" alt="A cabbage" /></div> </div> Exclusions Friday, 14 February 14
90. Positioning the exclusion can be done with any positioning method. .exclusion { height: 160px; width: 200px; padding: 10px; position: absolute; top: 120px; left: 120px; } Exclusions Friday, 14 February 14
91. 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 Friday, 14 February 14
92. http://adobe.github.io/web-platform/utilities/css-exclusions-support-matrix/ Friday, 14 February 14
93. 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 The CSS Exclusions Module - Vanseo Design - http:// www.vanseodesign.com/css/exclusions/ Exclusions Resources Friday, 14 February 14
94. Level 1 Last Call Working Draft, 3rd December 2013 Level 2 Editor’s Draft, 15th November 2013 http://www.w3.org/TR/css-shapes/ CSS Shapes Friday, 14 February 14
95. Current level 1 working draft defines shape-outside, and allows shapes only on floats. The Level 2 editor’s draft reimplements shape-inside. Wrap content around and inside things that are not rectangles. CSS Shapes Friday, 14 February 14
96. http://adobe.github.io/web-platform/samples/css-exclusions/nevermore/index.html Friday, 14 February 14
97. Requires elements to be floated. shape-outside Shapes Level 1 Friday, 14 February 14
98. The shape-outside property allows text to be wrapped around a shape such as a circle. .float { width: 250px; height: 250px; float: left; shape-outside: circle(50%); } CSS Shapes Friday, 14 February 14
99. http://sarasoueidan.com/blog/css-shapes/ Friday, 14 February 14
100. Flow text inside a custom shape shape-inside Shapes Level 2 Friday, 14 February 14
101. http://betravis.github.io/shape-tools/polygon-drawing/ Friday, 14 February 14
102. http://betravis.github.io/shape-tools/polygon-drawing/ Friday, 14 February 14
103. http://sarasoueidan.com/blog/css-shapes/ Friday, 14 February 14
104. http://blogs.adobe.com/webplatform/2013/10/23/css-shapes-visual-storytelling/ Friday, 14 February 14
105. 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 Shapes Resources Friday, 14 February 14
106. CSS Shapes “Alice in Wonderland” example - http://blogs.adobe.com/ webplatform/2013/10/23/css-shapes-visual-storytelling/ Creating Non-Rectangular Layouts with CSS Shapes - http:// sarasoueidan.com/blog/css-shapes/ CSS Shapes from Images - http://hansmuller-webkit.blogspot.co.uk/ 2013/11/css-shapes-from-images.html Shapes Resources Friday, 14 February 14
107. 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/ Friday, 14 February 14
108. http://rachelandrew.co.uk/presentations/new-css-layout @rachelandrew rachelandrew.co.uk edgeofmyseat.com grabaperch.com Thank you! Friday, 14 February 14
109. Friday, 14 February 14