Save 37% off PRO during our Black Friday Sale! »

The New CSS Layout - ConFoo 2014

C96ed27286a51ae9d0951066c1d75579?s=47 Rachel Andrew
February 26, 2014

The New CSS Layout - ConFoo 2014

Updated once again - things change rapidly in this area! My slides as presented at ConFoo in Montreal, Canada.

C96ed27286a51ae9d0951066c1d75579?s=128

Rachel Andrew

February 26, 2014
Tweet

Transcript

  1. ConFoo, February 2014 Rachel Andrew @rachelandrew The New CSS Layout

    Wednesday, 26 February 14
  2. We need designed for purpose layout tools! Floats, positioning, display:

    table, display: inline-block CSS for Layout Wednesday, 26 February 14
  3. Our existing layout methods make creating complex in-browser application layouts

    difficult Layout for applications Wednesday, 26 February 14
  4. W3C Candidate Recommendation, 12th April 2011 http://www.w3.org/TR/css3-multicol/ Multi-column Layout Wednesday,

    26 February 14
  5. http://www.flickr.com/photos/62693815@N03/6277209256/ Wednesday, 26 February 14

  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 Wednesday, 26 February 14
  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 Wednesday, 26 February 14
  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 Wednesday, 26 February 14
  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 Wednesday, 26 February 14
  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 Wednesday, 26 February 14
  11. The column-span property makes an element span columns. .col-wrapper h1

    { column-span: all; padding: 0 0 .5em 0; } Multi-col Wednesday, 26 February 14
  12. Wednesday, 26 February 14

  13. Perch UI Wednesday, 26 February 14

  14. Images are constrained by the columns. img { max-width: 100%;

    } Multi-col Wednesday, 26 February 14
  15. If a browser does not support multiple- column layout it

    will display the content in a single column. Multi-col Wednesday, 26 February 14
  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 Wednesday, 26 February 14
  17. W3C Candidate Recommendation, 18th September 2012 http://www.w3.org/TR/css3-flexbox/ Flexible Box Layout

    Module Wednesday, 26 February 14
  18. http://www.flickr.com/photos/megangoodchild/4603320792 Wednesday, 26 February 14

  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 Wednesday, 26 February 14
  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 Wednesday, 26 February 14
  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 Wednesday, 26 February 14
  22. The default value of flex-direction is row. nav ul{ display:

    flex; flex-direction: row; justify-content: space-between; align-items: stretch; } Flexbox Wednesday, 26 February 14
  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 Wednesday, 26 February 14
  24. Creating equal height boxes using flexbox. <div class="boxes"> <div class="box">

    ... </div> <div class="box"> ... </div> <div class="box"> ... </div> </div> Flexbox Wednesday, 26 February 14
  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 Wednesday, 26 February 14
  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 Wednesday, 26 February 14
  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 Wednesday, 26 February 14
  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 Wednesday, 26 February 14
  29. http://css-tricks.com/old-flexbox-and-new-flexbox/ Wednesday, 26 February 14

  30. Wednesday, 26 February 14

  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. Wednesday, 26 February 14
  32. http://philipwalton.github.io/solved-by-flexbox/ Wednesday, 26 February 14

  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 Playground - http://the-echoplex.net/flexyboxes/ Flexbox Resources Wednesday, 26 February 14
  34. W3C Working Draft, 23rd January 2014 http://www.w3.org/TR/css3-grid-layout/ CSS Grid Layout

    Wednesday, 26 February 14
  35. http://www.flickr.com/photos/adactio/1799953270 Wednesday, 26 February 14

  36. 7th April 2011 First public draft History of CSS Grid

    Layout Wednesday, 26 February 14
  37. http://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/ Wednesday, 26 February 14

  38. 23 January 2014 Current Working Draft CSS Grid Layout Wednesday,

    26 February 14
  39. Define a grid using the new grid and inline-grid values

    of the display property. .wrapper { display: grid; } Grid Layout Wednesday, 26 February 14
  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 Wednesday, 26 February 14
  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 Wednesday, 26 February 14
  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 Wednesday, 26 February 14
  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 Wednesday, 26 February 14
  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 Wednesday, 26 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 Wednesday, 26 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 Wednesday, 26 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 Wednesday, 26 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 Wednesday, 26 February 14
  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 Wednesday, 26 February 14
  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 Wednesday, 26 February 14
  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 Wednesday, 26 February 14
  52. With a template defined you can more simply target areas

    of the template. .content { grid-area: content; } Grid Layout Wednesday, 26 February 14
  53. New proposals CSS Grid Layout Wednesday, 26 February 14

  54. http://lists.w3.org/Archives/Public/www-style/2013May/0077.html Wednesday, 26 February 14

  55. Based on the earlier Draft IE10 Implementation CSS Grid Layout

    Wednesday, 26 February 14
  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 Wednesday, 26 February 14
  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 Wednesday, 26 February 14
  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 Wednesday, 26 February 14
  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; } Wednesday, 26 February 14
  60. http://codepen.io/rachelandrew/pen/sFhmx Wednesday, 26 February 14

  61. Wednesday, 26 February 14

  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? Wednesday, 26 February 14
  63. http://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/ Flexbox performs poorly when used to layout full pages.

    Grid or Flexbox Wednesday, 26 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 Wednesday, 26 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 Wednesday, 26 February 14
  66. http://html.adobe.com/webplatform/enable/ Wednesday, 26 February 14

  67. W3C Working Draft, 18th February 2014 http://www.w3.org/TR/css3-regions/ CSS Regions Wednesday,

    26 February 14
  68. http://html.adobe.com/webplatform/layout/regions/ Wednesday, 26 February 14

  69. http://blogs.adobe.com/webplatform/2013/09/18/ios-7-safari-new-web-platform-features/ Wednesday, 26 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 Wednesday, 26 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 Wednesday, 26 February 14
  72. The property flow- from sets where this content thread should

    flow from. .article-regions { flow-from: article-thread; } Regions Wednesday, 26 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 Wednesday, 26 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 Wednesday, 26 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 Wednesday, 26 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 Wednesday, 26 February 14
  77. Wednesday, 26 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 Wednesday, 26 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 Wednesday, 26 February 14
  80. The flow-into property on the iframe ID causes the iframe

    to disappear. #regions-content { -ms-flow-into: article-thread; } Regions Wednesday, 26 February 14
  81. We then flow-into the regions as before. .article-regions { -ms-flow-from:

    article-thread; } Regions Wednesday, 26 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 Wednesday, 26 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 Wednesday, 26 February 14
  84. http://alistapart.com/blog/post/css-regions-considered-harmful “CSS Regions Considered Harmful” January 2014 Wednesday, 26 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 Wednesday, 26 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 Wednesday, 26 February 14
  87. W3C Working Draft, 28th May 2013 http://www.w3.org/TR/css3-exclusions/ CSS Exclusions Wednesday,

    26 February 14
  88. Defines the wrap-flow and wrap-through properties. Allow you to wrap

    text around elements that are not floated. Exclusions Wednesday, 26 February 14
  89. <div class="wrapper"> <article class="main"> ... </article> <div class="exclusion"><img src="img/cabbage1.jpg" alt="A

    cabbage" /></div> </div> Exclusions Wednesday, 26 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 Wednesday, 26 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 Wednesday, 26 February 14
  92. http://adobe.github.io/web-platform/utilities/css-exclusions-support-matrix/ Wednesday, 26 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 Wednesday, 26 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 Wednesday, 26 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 Wednesday, 26 February 14
  96. http://adobe.github.io/web-platform/samples/css-exclusions/nevermore/index.html Wednesday, 26 February 14

  97. Requires elements to be floated. shape-outside Shapes Level 1 Wednesday,

    26 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 Wednesday, 26 February 14
  99. http://sarasoueidan.com/blog/css-shapes/ Wednesday, 26 February 14

  100. Flow text inside a custom shape shape-inside Shapes Level 2

    Wednesday, 26 February 14
  101. http://betravis.github.io/shape-tools/polygon-drawing/ Wednesday, 26 February 14

  102. http://betravis.github.io/shape-tools/polygon-drawing/ Wednesday, 26 February 14

  103. http://sarasoueidan.com/blog/css-shapes/ Wednesday, 26 February 14

  104. http://blogs.adobe.com/webplatform/2013/10/23/css-shapes-visual-storytelling/ Wednesday, 26 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 Wednesday, 26 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 Wednesday, 26 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/ Wednesday, 26 February 14
  108. http://rachelandrew.co.uk/presentations/new-css-layout @rachelandrew rachelandrew.co.uk edgeofmyseat.com grabaperch.com Thank you! Wednesday, 26 February

    14