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
   

   View Slide

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
   

   View Slide

3. CSS Grid
   is awesome
   

   View Slide

4. View Slide

5. main {
   display: grid;
   grid-template-columns:
   repeat(auto-fit, minmax(280px, 1fr));
   }
   

   View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. We need This
    

    View Slide

16. View Slide

17. 2
    1
    3
    viewport
    

    View Slide

18. View Slide

19. 
    [the whole article]
    
    
    
    
    
    
    
    article {
    flow-into: foobar;
    }
    div.empty {
    flow-from: foobar;
    }
    

    View Slide

20. View Slide

21. Can we do this 

    in CSS alone?
    

    View Slide

22. article {
    flow-into: foobar;
    }
    

    View Slide

23. 1
    3
    4
    5
    6
    7
    2
    Grid!
    

    View Slide

24. Another Problem
    

    View Slide

25. View Slide

26. View Slide

27. View Slide

28. View Slide

29. View Slide

30. View Slide

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
    

    View Slide

32. View Slide

33. View Slide

34. View Slide

35. EMPTY DIV
    EMPTY DIV
    

    View Slide

36. #returnofthespacergif
    

    View Slide

37. The Trick of 

    the Thing
    

    View Slide

38. figure {
    grid: 2 / 1 / 3 / 2;
    }
    figure {
    background: #6DB1FC;
    }
    

    View Slide

39. grid: 3 / 1 / 4 / 2; {
    background: #6DB1FC;
    }
    

    View Slide

40. @keyframes foobar {
    0% {top:0; left: 0;}
    50% {top: 50%;}
    100% {left: 100%;}
    }
    .box {
    animation-name: foobar;
    }
    

    View Slide

41. @region foobar {
    grid: 3 / 1 / 4 / 2; }
    foobar {
    background: #6DB1FC; }
    

    View Slide

42. @region #grid-container foobar {
    grid: 3 / 1 / 4 / 2;
    }
    foobar {
    background:#6DB1FC;
    }
    

    View Slide

43. @region foobar {
    grid: 3 / 1 / 4 / 2;
    }
    #grid-container::region(foobar) {
    background:#6DB1FC;
    }
    

    View Slide

44. @region #grid-container foobar {
    grid: 3 / 1 / 4 / 2;
    }
    foobar {
    background:#6DB1FC;
    }
    

    View Slide

45. Apply CSS
    to Cells and areas
    

    View Slide

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; }
    

    View Slide

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
    

    View Slide

48. Skipping a cell
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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;
    

    View Slide

52. @region .container foobar {
    grid: 2 / 2;
    }
    foobar {
    grid-auto-flow-self: skip;
    }
    

    View Slide

53. Flowing through
    Regions
    

    View Slide

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;
    }
    

    View Slide

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;
    }
    

    View Slide

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; }}
    

    View Slide

57. Examples
    

    View Slide

58. 
    
    
    
    
    
    
    main {
    display: grid;
    grid-template-rows:
    20vh 20vh 20vh auto;
    }
    

    View Slide

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;
    }
    

    View Slide

60. 
    
    
    
    
    
    
    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;
    }
    

    View Slide

61. 
    …
    …
    
    
    …
    …
    
    #main {
    grid-template-rows: 

    auto 80vh 150px 80vh 150px 80vh;
    }
    2
    1
    3
    H1 Headline
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

66. Summary
    

    View Slide

67. Regions, Redux
    •Requires Grid.
    •Grid does all the heavy lifting to accomplish layout, sizing, targeting a
    place, etc.
    •Proposes three new things…
    

    View Slide

68. @region #grid-container foobar {
    grid: 3 / 1 / 4 / 2;
    }
    foobar {
    background:#6DB1FC;
    }
    

    View Slide

69. @region #grid-container foobar {
    grid: 2 / 2;
    }
    foobar {
    grid-auto-flow-self: none;
    }
    

    View Slide

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;
    }
    

    View Slide

71. Yes?
    Jen Simmons
    @jensimmons
    labs.jensimmons.com
    

    View Slide

72. Additional
    Thinking 

    (not presented for time)
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

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
    

    View Slide

76. Slots vs Regions
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide