CSS3 Grids and Regions

Presented at The CSS Summit, July 2013

Transcript

1. The CSS Summit, July 2013 Rachel Andrew @rachelandrew CSS3 Grids & Regions
2. We need designed for purpose layout tools! Floats, positioning, display: table, display: inline-block CSS for Layout
3. W3C Working Draft, 2nd April 2013 http://www.w3.org/TR/css3-grid-layout/ CSS Grid Layout
4. http://www.flickr.com/photos/adactio/1799953270
5. 7th April 2011 First public draft History of CSS Grid Layout
6. http://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/
7. 2 April 2013 Current Working Draft CSS Grid Layout
8. http://www.w3.org/TR/css3-grid-layout/
9. Define a grid using the new grid and inline-grid values of the display property. .wrapper { display: grid; } Grid Layout
10. The grid-definition- columns property defines the grid columns; grid- definition-rows the grid rows. .wrapper { display: grid; grid-definition-columns: 200px 20px auto 20px 200px; grid-definition-rows: auto 1fr; } Grid Layout
11. 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
12. grid-start and grid- end set the column position; grid-before and grid-after the row. .content { grid-start: 3; grid-end: 4; grid-before: 2; grid-after: 3; } Grid Layout
13. Columns used as gutters still count as a column, when positioning items. .mainnav { grid-start: 1; grid-end:2; grid-before: 2; grid-after: 3; } .title { grid-start: 3; grid-end: 4; grid-before: 1; grid-after: 2; } .quote { grid-start: 5; grid-end:6; grid-before: 2; grid-after: 3; } Grid Layout
14. When we place an item we declare the grid lines that contain it. .content { grid-start: 3; grid-end: 4; grid-before: 2; grid-after: 3; } Grid Layout
15. When we place an item we declare the grid lines that contain it. .content { grid-start: 3; grid-end: 4; grid-before: 2; grid-after: 3; } Grid Layout
16. When we place an item we declare the grid lines that contain it. .content { grid-start: 3; grid-end: 4; grid-before: 2; grid-after: 3; } Grid Layout
17. When we place an item we declare the grid lines that contain it. .content { grid-start: 3; grid-end: 4; grid-before: 2; grid-after: 3; } Grid Layout
18. When we place an item we declare the grid lines that contain it. .content { grid-start: 3; grid-end: 4; grid-before: 2; grid-after: 3; } Grid Layout
19. We can also declare named grid lines. .wrapper { display: grid; grid-definition-columns: “nav” 200px “gutter” 20px “main” auto “gutter” 20px “sidebar” 200px; grid-definition-rows: “header” auto “content” 1fr “content-end”; } Grid Layout
20. You then use the name rather than the number to place the content. .content { grid-start: "main'; grid-end: span 1; grid-before: "content"; grid-after: span 1; } Grid Layout
21. It will also be possible to declare a Grid template. .wrapper { display: grid; grid-definition-columns: 200px 20px auto 20px 200px; grid-definition-rows: auto 1fr; grid-template: "header header header header header" "nav . content . sidebar" } Grid Layout
22. With a template defined you can more simply target areas of the template. .content { grid-area: content; } Grid Layout
23. New proposals CSS Grid Layout
24. http://lists.w3.org/Archives/Public/www-style/2013May/0077.html
25. Based on the earlier Draft IE10 Implementation CSS Grid Layout
26. 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
27. 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
28. The IE10 implementation specifies the row and column, rather than the lines around. .content { grid-start: 3; grid-end: 4; grid-before: 2; grid-after: 3; } Grid Layout
29. The IE10 implementation specifies the row and column, rather than the lines around. Grid Layout .content { -ms-grid-column: 3; -ms-grid-row: 2; }
30. http://codepen.io/rachelandrew/pen/sFhmx
31. http://caniuse.com/#feat=css-grid
32. 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
33. 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
34. W3C Working Draft, 28th May 2013 http://www.w3.org/TR/css3-regions/ CSS Regions
35. http://html.adobe.com/webplatform/layout/regions/
36. http://blogs.adobe.com/cantrell/archives/2012/07/all-about-chrome-flags.html
37. 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
38. The CSS property flow-into has a value of the name you choose for this content. .main { flow-into: article-thread; } Regions
39. The property flow- from sets where this content thread should flow from. .article-regions { flow-from: article-thread; } Regions
40. 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
41. 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
42. 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
43. 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
44. http://adobe.github.io/web-platform/utilities/css-regions-support-matrix/
45. 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
46. 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
47. The flow-into property on the iframe ID causes the iframe to disappear. #regions-content { -ms-flow-into: article-thread; } Regions
48. We then flow-into the regions as before. .article-regions { -ms-flow-from: article-thread; } Regions
49. 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
50. 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
51. 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
52. W3C Working Draft, 28th May 2013 http://www.w3.org/TR/css3-exclusions/ CSS Exclusions
53. Defines the wrap-flow and wrap-through properties. Allow you to wrap text around elements that are not floated. Exclusions
54. <div class="wrapper"> <article class="main"> ... </article> <div class="exclusion"><img src="img/cabbage1.jpg" alt="A cabbage" /></div> </div> Exclusions
55. Positioning the exclusion can be done with any positioning method. .exclusion { height: 160px; width: 200px; padding: 10px; position: absolute; top: 120px; left: 120px; } Exclusions
56. 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
57. http://adobe.github.io/web-platform/utilities/css-exclusions-support-matrix/
58. 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
59. W3C Working Draft, 20th June 2013 http://www.w3.org/TR/css-shapes/ CSS Shapes
60. Current draft defines shape-outside, and allows shapes only on floats. Wrap content around and inside things that are not rectangles. CSS Shapes
61. http://adobe.github.io/web-platform/samples/css-exclusions/nevermore/index.html
62. http://codepen.io/adobe/pen/KJisf
63. http://betravis.github.io/shape-tools/polygon-drawing/
64. http://betravis.github.io/shape-tools/polygon-drawing/
65. 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
66. 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/
67. http://rachelandrew.co.uk/presentations/new-css-layout @rachelandrew rachelandrew.co.uk edgeofmyseat.com grabaperch.com Thank you!