Front Trends 2013 - The New CSS Layout

I presented at Front Trends in Poland in April 2013. Resources for this presentation are on my site: http://www.rachelandrew.co.uk/presentations/new-css-layout

Transcript

1. Front Trends, April 2013 Rachel Andrew @rachelandrew The New CSS Layout Friday, 26 April 13
2. W3C Candidate Recommendation, 12th April 2011 http://www.w3.org/TR/css3-multicol/ Multi-column Layout Friday, 26 April 13
3. http://www.flickr.com/photos/62693815@N03/6277209256/ Friday, 26 April 13
4. 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, 26 April 13
5. 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, 26 April 13
6. 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, 26 April 13
7. 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, 26 April 13
8. 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, 26 April 13
9. The column-span property makes an element span columns. .col-wrapper h1 { column-span: all; padding: 0 0 .5em 0; } Multi-col Friday, 26 April 13
10. http://caniuse.com/#feat=multicolumn Friday, 26 April 13
11. Perch UI Friday, 26 April 13
12. Images are constrained by the columns. img { max-width: 100%; } Multi-col Friday, 26 April 13
13. If a browser does not support multiple- column layout it will display the content in a single column. Multi-col Friday, 26 April 13
14. 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, 26 April 13
15. W3C Candidate Recommendation, 18th September 2012 http://www.w3.org/TR/css3-flexbox/ Flexible Box Layout Module Friday, 26 April 13
16. http://www.flickr.com/photos/megangoodchild/4603320792 Friday, 26 April 13
17. 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, 26 April 13
18. 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, 26 April 13
19. 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, 26 April 13
20. The default value of flex-direction is row. nav ul{ display: flex; flex-direction: row; justify-content: space-between; align-items: stretch; } Flexbox Friday, 26 April 13
21. 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, 26 April 13
22. Creating equal height boxes using flexbox. <div class="boxes"> <div class="box"> ... </div> <div class="box"> ... </div> <div class="box"> ... </div> </div> Flexbox Friday, 26 April 13
23. 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, 26 April 13
24. 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, 26 April 13
25. 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, 26 April 13
26. 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, 26 April 13
27. http://css-tricks.com/old-flexbox-and-new-flexbox/ Friday, 26 April 13
28. http://caniuse.com/#feat=flexbox Friday, 26 April 13
29. 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 Flexbox Resources Friday, 26 April 13
30. W3C Working Draft, 4th April 2013 http://www.w3.org/TR/css3-grid-layout/ CSS Grid Layout Friday, 26 April 13
31. http://www.flickr.com/photos/adactio/1799953270 Friday, 26 April 13
32. Define a grid using the new grid and inline-grid values of the display property. .wrapper { display: grid; } Grid Layout Friday, 26 April 13
33. 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 Friday, 26 April 13
34. 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, 26 April 13
35. 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 Friday, 26 April 13
36. 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 Friday, 26 April 13
37. 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 Friday, 26 April 13
38. 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 Friday, 26 April 13
39. 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 Friday, 26 April 13
40. 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 Friday, 26 April 13
41. 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 Friday, 26 April 13
42. 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, 26 April 13
43. 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, 26 April 13
44. 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 .content { -ms-grid-column: 3; -ms-grid-row: 2; } Friday, 26 April 13
45. http://codepen.io/rachelandrew/pen/sFhmx Friday, 26 April 13
46. http://caniuse.com/#feat=css-grid Friday, 26 April 13
47. http://www.w3.org/TR/css3-grid-layout/ Friday, 26 April 13
48. 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/ 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/ Grid Resources Friday, 26 April 13
49. W3C Working Draft, 23rd August 2012 http://www.w3.org/TR/css3-regions/ CSS Regions Friday, 26 April 13
50. http://html.adobe.com/webplatform/layout/regions/ Friday, 26 April 13
51. 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, 26 April 13
52. The CSS property flow-into has a value of the name you choose for this content. .main { flow-into: article-thread; } Regions Friday, 26 April 13
53. The property flow- from sets where this content thread should flow from. .article-regions { flow-from: article-thread; } Regions Friday, 26 April 13
54. 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, 26 April 13
55. 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, 26 April 13
56. 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, 26 April 13
57. 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, 26 April 13
58. http://adobe.github.io/web-platform/utilities/css-regions-support-matrix/ Friday, 26 April 13
59. 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 Regions Resources Friday, 26 April 13
60. W3C Working Draft, 3rd May 2012 http://www.w3.org/TR/css3-exclusions/ CSS Exclusions and Shapes Friday, 26 April 13
61. http://html.adobe.com/webplatform/layout/exclusions/ Friday, 26 April 13
62. <div class="wrapper"> <article class="main"> ... </article> <div class="exclusion"><img src="img/cabbage1.jpg" alt="A cabbage" /></div> </div> Exclusions Friday, 26 April 13
63. 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, 26 April 13
64. 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, 26 April 13
65. http://adobe.github.io/web-platform/samples/css-exclusions/nevermore/index.html Friday, 26 April 13
66. http://adobe.github.io/web-platform/utilities/css-exclusions-support-matrix/ Friday, 26 April 13
67. Experimenting with CSS Exclusions - http:// blog.digitalbackcountry.com/2012/03/experimenting-with-css-exclusions/ Exclusions and Shapes examples on CodePen from Adobe - http:// codepen.io/collection/qFesk Exclusions Resources Friday, 26 April 13
68. http://rachelandrew.co.uk/presentations/new-css-layout @rachelandrew rachelandrew.co.uk edgeofmyseat.com grabaperch.com Thank you! Friday, 26 April 13