Proposal to CSSWG, Sept 2016

Slides for a presentation to the CSS & digipub Working Groups at TPAC.

Minutes from the meeting: https://logs.csswg.org/irc.w3.org/css/2016-09-19/#e721567

Related specs:

CSS Grid Layout Module Level 1,
2016: https://drafts.csswg.org/css-grid/

CSS Regions Module Level 1,
2014: https://www.w3.org/TR/2014/WD-css-regions-1-20141009/
2012: https://www.w3.org/TR/2012/WD-css3-regions-20120823/

CSS Pagination Templates Module Level 3,
2014: https://drafts.csswg.org/css-page-template-1/

CSS Template Layout Module,
2010: https://www.w3.org/TR/2010/WD-css3-layout-20100429/
2015: https://www.w3.org/TR/css3-layout/

Frame-based layout via Style Sheets,
1996: https://www.w3.org/TR/NOTE-layout

CSS Line Grid Module,
2016: https://drafts.csswg.org/css-line-grid/

CSS Overflow Module Level 4,
2016: https://drafts.csswg.org/css-overflow-4/

CSS Paged Media Module Level 3,
2013: https://www.w3.org/TR/css3-page/

CSSOM View Module,
2016: https://drafts.csswg.org/cssom-view/

Transcript

1. A Proposal for a New Region Spec Jen Simmons CSSWG Meeting SePt 2016 Lisbon Portugal
2. Jen Simmons Designer Advocate at Mozilla web master since 1996 print & theater design for 20 years presenting on Layout & CSS at conferences, 30+ in 2016 alone host and executive producer of The Web Ahead podcast
3. CSS Grid is awesome
5. main { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
15. We need This
16. 1 3 4 5 6 7 2
17. 2 1 3 viewport
19. <article> [the whole article] </a> <div class=“empty”></div> <div class=“empty”></div> <div class=“empty”></div> <div class=“empty”></div> <div class=“empty”></div> <div class=“empty”></div> article { flow-into: foobar; } div.empty { flow-from: foobar; }
21. Can we do this 
 in CSS alone?
22. article { flow-into: foobar; }
23. 1 3 4 5 6 7 2 Grid!
24. Another Problem
31. “ ” I demonstrate Grid to authors in my layout workshops. Every time someone will ask how to apply backgrounds and borders to Grid cells. — Rachel Andrew
35. EMPTY DIV EMPTY DIV
36. #returnofthespacergif
37. The Trick of 
 the Thing
38. figure { grid: 2 / 1 / 3 / 2; } figure { background: #6DB1FC; }
39. grid: 3 / 1 / 4 / 2; { background: #6DB1FC; }
40. @keyframes foobar { 0% {top:0; left: 0;} 50% {top: 50%;} 100% {left: 100%;} } .box { animation-name: foobar; }
41. @region foobar { grid: 3 / 1 / 4 / 2; } foobar { background: #6DB1FC; }
42. @region #grid-container foobar { grid: 3 / 1 / 4 / 2; } foobar { background:#6DB1FC; }
43. @region foobar { grid: 3 / 1 / 4 / 2; } #grid-container::region(foobar) { background:#6DB1FC; }
44. @region #grid-container foobar { grid: 3 / 1 / 4 / 2; } foobar { background:#6DB1FC; }
45. Apply CSS to Cells and areas
46. h1 { grid: 2 / 1 / 3 / 3; } .text { grid: 3 / 2 / 4 / 5; } aside { grid: 4 / 4 / 5 / 5; border: 10px solid red; } @region #main colorblock { grid: 1 / 1 / 2 / 3; } colorblock { background: red; }
47. .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(1fr, 150px); } @region .container tilt { grid-row: 3; grid-column: 2; } tilt { transform: rotate(-5deg); background: #76D6FF; } Always rotate the box in 3rd row, 2nd column — no matter how the content responsively flows through, no how many columns there are
48. Skipping a cell
49. .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(1fr, 100px); } h1 { grid-column: 2 / span 2; grid-row: -3; background: orange; } Title
50. .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(1fr, 100px); } h1 { grid-column: 2 / span 2; grid-row: -3; background: orange; } Title
51. @region .container gap1 { grid: 2 / 2; } @region .container gap2 { grid: 3 / 3; } @region .container gap3 { grid: 4 / 4; } @region .container gap4 { grid: 5 / 5; } gap1, gap2, gap3, gap4, { grid-auto-flow-self: skip; } Title or: none; empty; nope;
52. @region .container foobar { grid: 2 / 2; } foobar { grid-auto-flow-self: skip; }
53. Flowing through Regions
54. @region-chain .mygrid foobarchain { 1 { grid: 1 / 1 / 2 / -1; } 2 { grid: 2 / 1 / 4 / 3; } 3 { grid: 3 / 4 / 4 / 5; } 4 { grid: 4 / 1 / -2 / -3; } } article { flow-into: foobarchain; }
55. @region-chain #grid-container foochain { 1 { grid: 2 / 2 / 3 / -2;} 2 { grid: 3 / 3 / 4 / 5;} 3 { grid-area: namedarea;} 4 { region: foobar;} } article { flow-into: foochain; }
56. @region-chain #mygrid foobarchain1 { 1 { … } 2 { … } 3 { … } 4 { … }} @region-chain #mygrid foobarchain2 { 1 { … } 2 { … } 3 { … } 4 { … }} @media (min-width:500px) { article {flow-into: foobarchain1; }} @media (min-width:1000px) { article {flow-into: foobarchain2; }}
57. Examples
58. <main> <article> <p><p><p><p><p><p> <p><p><p><p><p><p> <p><p><p><p><p><p> </article> </main> main { display: grid; grid-template-rows: 20vh 20vh 20vh auto; }
59. @region-chain main layoutflow { 1 { grid: 1 / 1 / 2 / 3; } 2 { grid: 2 / 1 / 4 / 2; } 3 { grid: 3 / 2 / -1 / 3; } } article { flow-into: layoutflow; }
60. <main> <article> <p><p><p><p><p><p> <p><p><p><p><p><p> <p><p><p><p><p><p> </article> </main> main { display: grid; grid-template-rows: 20vh 20vh 20vh auto; } @region-chain main layoutflow { 1 { grid: 1 / 1 / 2 / 3; } 2 { grid: 2 / 1 / 4 / 2; } 3 { grid: 3 / 2 / -1 / 3; } } article { flow-into: layoutflow; }
61. <main id=“main”> <h1>…</h1> <div class=“body-text”>…</div> </main> <div class=“adverts"> <div class=“ad1”>…</div> <div class=“ad2”>…</div> </div> #main { grid-template-rows: 
 auto 80vh 150px 80vh 150px 80vh; } 2 1 3 H1 Headline
62. @region-chain #main maincontent { 1 { grid: 2; } 2 { grid: 4; } 3 { grid: 6; } } @region-chain #main adchain { 1 { grid: 3; } 2 { grid: 5; } } .body-text { flow-into: maincontent; } .adverts { flow-into: adchain; } 2 1 3 H1 Headline
63. @region #main round-one { grid: 2 / 1 / 3 / -1; } round-one { shape-inside: circle(); } @region-chain #main maincontent { 1 { grid: 1; } 2 { region: round-one; } 3 { grid: 3; } } .body-text { flow-into: maincontent; } 2 1 3
64. Solves Multiple Problems •Provides ways to solve usecases that would otherwise need Exclusions. •Provides a way to handle complex HTML and put content from one place in the outline into a grid container in another place. Solves usecases that might work with Subgrid, but that would likely be hard & fragile. •Solves the problems that must be solved in order to do shape-inside.
65. h1 { grid: 1; } @region-chain article maincontent { 1 { grid: 2; } 2 { grid: 3; } 3 { grid: 4; } 4 { grid: 5; } 5 { grid: 6; } 6 { grid: 7; } } .body-text { flow-into: maincontent; columns: 200px; } 2 1 3 H1 Headline 100vh
66. Summary
67. Regions, Redux •Requires Grid. •Grid does all the heavy lifting to accomplish layout, sizing, targeting a place, etc. •Proposes three new things…
68. @region #grid-container foobar { grid: 3 / 1 / 4 / 2; } foobar { background:#6DB1FC; }
69. @region #grid-container foobar { grid: 2 / 2; } foobar { grid-auto-flow-self: none; }
70. @region-chain #mygrid foobarchain { 1 { grid: 1 / 1 / 2 / -1; } 2 { grid: 2 / 1 / 4 / 3; } 3 { grid: 3 / 4 / 4 / 5; } 4 { grid: 4 / 1 / -2 / -3; } } article { flow-into: foobarchain; }
71. Yes? Jen Simmons @jensimmons labs.jensimmons.com
72. Additional Thinking 
 (not presented for time)
73. Javascript Can Get at it •JavaScript can be used to change HTML just like normal, as if layout was not applied. •Any content in a particular Region can be styled. JavaScript can override these styles by injecting a body class & overriding, or injecting inline styles on the grid container (or any parent element above that). •Content inside a particular Region can be targeted with JavaScript by using a Selector Query.
74. Differences Between Region Specs •A region chain gets it’s order from placement in the document order
 •CSS Region is a block container that has flow-from applied, associating a named flow •The rearrange order of regions at different breakpoints: use layout to move empty elements to new locations •Region chain gets it’s order from the numbered list declared in the @region-chain rule •CSS Region is a CSS construct, a way to target a grid cell or area in order to apply CSSS •Define multiple region chains, and trigger the use of one at one breakpoint, and another at another breakpoint Current Region Spec This Proposal
75. Similarities Between Region Specs •A region chain is a chain of regions in a particular order •Content that is placed in a region chain is removed from the ‘normal’ page layout with the `flow-into` property •break-before, break-after, break-inside applies just the same
76. Slots vs Regions
77. Slots vs Regions •These Regions are not Slots. Slots exist in a parallel reality where Grid is very different. Slots mash together ideas for cells with this idea for regions. •Most of the concepts defined by Slots have morphed into Grid Cells and Named Areas. •The overlap between Slots in the Template Layout Module and this proposal for Regions comes with:
 1) the use of the ’slot()’ pseudo-element to allow styling; 
 2) the use of `chains: * a b c ` to define a chain for flow;
 but the mechanism for which things happen are very different.
 With Template Layout Slots, both purposes require using what’s now known as Named Areas. Slots make handling flexibility in RWD hard.
78. Slots vs Regions •In both the Template Layout and Page Template specs, Slots define spaces in which to put stuff, provide a mechanism in which to place it, and a mechanism for styling. •This Regions proposal relies on Grid to define those spaces (and size them); to target those spaces; and to place content in those spaces. •Regions assists Grid by providing a mechanism for targeting empty cells and for chaining cells together and flowing content into more than one of them. Regions do far less than Slots.
79. Syntax from Slots: #article { grid: "A A c" "A A c" "* * c" "a b c"; chains: * a b c } #article img { flow: A } And all the rest of the content in `article` flows automatically from * to a to b to c, without being specified. Our version of Grid is a long way from this mental model.
80. How Slots style a thing: body::slot(namedfooarea) { background: yellow; } or perhaps, with a nod to our reality… #grid-container::slot(namedfooarea) { background: yellow; } But this requires defining everything that you might want to style as 
 a named area. And redefining the Grid (in order to change the area names) at any breakpoint where author wishes to change styling, even when the Grid otherwise doesn’t change.