Slide 1
Slide 1 text
A Proposal for a
New Region Spec
Jen Simmons
CSSWG Meeting SePt 2016
Lisbon Portugal
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
CSS Grid
is awesome
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
main {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(280px, 1fr));
}
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
We need This
Slide 16
Slide 16 text
1
3
4
5
6
7
2
Slide 17
Slide 17 text
2
1
3
viewport
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
[the whole article]
article {
flow-into: foobar;
}
div.empty {
flow-from: foobar;
}
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
Can we do this
in CSS alone?
Slide 22
Slide 22 text
article {
flow-into: foobar;
}
Slide 23
Slide 23 text
1
3
4
5
6
7
2
Grid!
Slide 24
Slide 24 text
Another Problem
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
“ ”
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
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
EMPTY DIV
EMPTY DIV
Slide 36
Slide 36 text
#returnofthespacergif
Slide 37
Slide 37 text
The Trick of
the Thing
Slide 38
Slide 38 text
figure {
grid: 2 / 1 / 3 / 2;
}
figure {
background: #6DB1FC;
}
Slide 39
Slide 39 text
grid: 3 / 1 / 4 / 2; {
background: #6DB1FC;
}
Slide 40
Slide 40 text
@keyframes foobar {
0% {top:0; left: 0;}
50% {top: 50%;}
100% {left: 100%;}
}
.box {
animation-name: foobar;
}
Slide 41
Slide 41 text
@region foobar {
grid: 3 / 1 / 4 / 2; }
foobar {
background: #6DB1FC; }
Slide 42
Slide 42 text
@region #grid-container foobar {
grid: 3 / 1 / 4 / 2;
}
foobar {
background:#6DB1FC;
}
Slide 43
Slide 43 text
@region foobar {
grid: 3 / 1 / 4 / 2;
}
#grid-container::region(foobar) {
background:#6DB1FC;
}
Slide 44
Slide 44 text
@region #grid-container foobar {
grid: 3 / 1 / 4 / 2;
}
foobar {
background:#6DB1FC;
}
Slide 45
Slide 45 text
Apply CSS
to Cells and areas
Slide 46
Slide 46 text
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; }
Slide 47
Slide 47 text
.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
Slide 48
Slide 48 text
Skipping a cell
Slide 49
Slide 49 text
.container {
display: grid;
grid-template-columns:
repeat(auto-fit,
minmax(1fr, 100px); }
h1 {
grid-column: 2 / span 2;
grid-row: -3;
background: orange;
}
Title
Slide 50
Slide 50 text
.container {
display: grid;
grid-template-columns:
repeat(auto-fit,
minmax(1fr, 100px); }
h1 {
grid-column: 2 / span 2;
grid-row: -3;
background: orange;
}
Title
Slide 51
Slide 51 text
@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;
Slide 52
Slide 52 text
@region .container foobar {
grid: 2 / 2;
}
foobar {
grid-auto-flow-self: skip;
}
Slide 53
Slide 53 text
Flowing through
Regions
Slide 54
Slide 54 text
@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;
}
Slide 55
Slide 55 text
@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;
}
Slide 56
Slide 56 text
@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; }}
Slide 57
Slide 57 text
Examples
Slide 58
Slide 58 text
main { display: grid; grid-template-rows: 20vh 20vh 20vh auto; }
Slide 59
Slide 59 text
@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;
}
Slide 60
Slide 60 text
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; }
Slide 61
Slide 61 text
…
…
…
…
Slide 62
Slide 62 text
@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
Slide 63
Slide 63 text
@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
Slide 64
Slide 64 text
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.
Slide 65
Slide 65 text
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
Slide 66
Slide 66 text
Summary
Slide 67
Slide 67 text
Regions, Redux
•Requires Grid.
•Grid does all the heavy lifting to accomplish layout, sizing, targeting a
place, etc.
•Proposes three new things…
Slide 68
Slide 68 text
@region #grid-container foobar {
grid: 3 / 1 / 4 / 2;
}
foobar {
background:#6DB1FC;
}
Slide 69
Slide 69 text
@region #grid-container foobar {
grid: 2 / 2;
}
foobar {
grid-auto-flow-self: none;
}
Slide 70
Slide 70 text
@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;
}
Slide 71
Slide 71 text
Yes?
Jen Simmons
@jensimmons
labs.jensimmons.com
Slide 72
Slide 72 text
Additional
Thinking
(not presented for time)
Slide 73
Slide 73 text
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.
Slide 74
Slide 74 text
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
Slide 75
Slide 75 text
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
Slide 76
Slide 76 text
Slots vs Regions
Slide 77
Slide 77 text
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.
Slide 78
Slide 78 text
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.
Slide 79
Slide 79 text
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.
Slide 80
Slide 80 text
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.