$30 off During Our Annual Pro Sale. View Details »

CSS3 Grids and Regions

CSS3 Grids and Regions

Presented at The CSS Summit, July 2013

Rachel Andrew

July 23, 2013
Tweet

More Decks by Rachel Andrew

Other Decks in Technology

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!