Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS3 Grids and Regions

CSS3 Grids and Regions

Presented at The CSS Summit, July 2013

C96ed27286a51ae9d0951066c1d75579?s=128

Rachel Andrew

July 23, 2013
Tweet

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!