an event apart seattle - new css layout meets the real world
TRANSCRIPT
![Page 1: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/1.jpg)
New CSS Layout Meets the Real World
Rachel Andrew @ An Event Apart Seattle
![Page 2: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/2.jpg)
“The state of the use of Cascading Style Sheet on the web is really beginning to get boring. Why haven't designers begun exploiting its benefits yet?”
![Page 3: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/3.jpg)
I can remember a time not too long ago when individuals were running amok exploiting the simplest of html tags and creating works of beauty. But now, after browser vendors have stepped it up and given us much of the control we've been asking for, I can't seem to find web designers that are exploiting these new found powers.
![Page 4: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/4.jpg)
I can remember a time not too long ago when individuals were running amok exploiting the simplest of html tags and creating works of beauty. But now, after browser vendors have stepped it up and given us much of the control we've been asking for, I can't seem to find web designers that are exploiting these new found powers.
Chris Casciano
![Page 5: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/5.jpg)
2nd October 2001
Chris Casciano http://www.chunkysoup.net/opinion/boringcss/
![Page 7: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/7.jpg)
www.thenoodleincident.com/tutorials/box_lesson/boxes.html
![Page 8: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/8.jpg)
16 Years.
![Page 9: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/9.jpg)
March 2017
![Page 10: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/10.jpg)
March 2017 March 2017 March 2017 March 2017 March 2017 Soooooon!
![Page 12: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/12.jpg)
But, old browsers!
![Page 13: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/13.jpg)
There will be code
![Page 14: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/14.jpg)
A new system for layout
![Page 15: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/15.jpg)
Featuring
▸ Flexbox
▸ CSS Grid Layout
▸ Box Alignment
▸ CSS Shapes
▸ CSS Feature Queries
![Page 17: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/17.jpg)
![Page 18: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/18.jpg)
The Media Object
New CSS Meets
![Page 19: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/19.jpg)
Media Object
▸ contains an image plus content
▸ is flexible
▸ elements should stack on mobile
▸ box should clear the contents
▸ image can be to the left or the right
▸ can be nested
![Page 20: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/20.jpg)
Avoid pre-empting the need for markup as styling hooks.
![Page 21: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/21.jpg)
<div class="media"> <h2 class="title">This is my title</h2> <div class="img"> <img src="/assets/img/placeholder.jpg" alt="Placeholder"> </div> <div class="content"> </div> <div class="footer"> footer here </div> </div>
Media Object
A parent with a class of ‘media’
Four child elements:
- title
- img
- content
- footer
![Page 22: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/22.jpg)
![Page 23: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/23.jpg)
![Page 24: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/24.jpg)
![Page 25: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/25.jpg)
@media (min-width: 600px) { .media { display: grid; } }
Media Object
To create a grid use a new value of
the display property:
display: grid
![Page 26: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/26.jpg)
@media (min-width: 600px) { .media { display: grid; grid-column-gap: 20px; } }
Media Object
Create gutters between grid cells:
- grid-column-gap
- grid-row-gap
- grid-gap
![Page 27: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/27.jpg)
@media (min-width: 600px) { .media { display: grid; grid-column-gap: 20px; grid-template-columns: 1fr 3fr; } }
Media Object
The grid-template-columns property
creates column tracks on the grid.
The new fr unit represents a fraction
of the available space.
![Page 28: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/28.jpg)
![Page 29: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/29.jpg)
![Page 30: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/30.jpg)
.media > .title { grid-area: title; } .media > .img { grid-area: img; } .media > .content { grid-area: bd; } .media > .footer { grid-area: ft; }
Media Object
Define areas with grid-area
![Page 31: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/31.jpg)
@media (min-width: 600px) { .media { display: grid; grid-column-gap: 20px; grid-template-columns: 1fr 3fr; grid-template-areas: "img title" "img bd" "img ft"; } }
Media Object
Describing layout with the grid-template-areas property
![Page 32: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/32.jpg)
![Page 33: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/33.jpg)
img
img
img
title
bd
ft
![Page 34: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/34.jpg)
![Page 35: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/35.jpg)
auto
![Page 36: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/36.jpg)
<div class="flex-example"> <div class="one">Box one</div> <div class="two">Box two</div> <div class="three"> <div class="inner">Box three</div> </div> </div>
auto as flex-basis
Box one, two and three are nested
inside flex-example.
There is another element nested
inside box three.
![Page 37: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/37.jpg)
.flex-example { display: flex; }
.flex-example > div { flex: 1 1 auto; }
auto as flex-basis
The parent becomes a flex container,
and all direct children are set to grow
and shrink from a flex-basis of auto.
![Page 38: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/38.jpg)
no box has a width, and flex-basis is auto and so resolved from the content
![Page 39: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/39.jpg)
.flex-example { display: flex; }
.flex-example > div { flex: 1 1 auto; }
.two { width: 350px; }
.three .inner { width: 200px; }
auto as flex-basis
Use auto and the flex-basis will be
taken from any width set on the item.
If there is no width, flex-basis will be
taken from the content width.
![Page 40: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/40.jpg)
width 350px nested item width 200pxno width
https://cssgrid.me/flex-auto
![Page 41: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/41.jpg)
@media (min-width: 600px) { .media { display: grid; grid-column-gap: 20px; grid-template-columns: 1fr 3fr; grid-template-rows: auto 1fr; grid-template-areas: "img title" "img bd" "img ft"; } }
Media Object
The grid-template-rows property
defines the rows on the grid.
If we don’t define rows grid will
create them as part of the implicit
grid.
![Page 42: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/42.jpg)
@media (min-width: 600px) { .media { display: grid; grid-column-gap: 20px; grid-template-columns: 150px 1fr; grid-template-rows: auto 1fr; grid-template-areas: "img title" "img bd" "img ft"; } }
Media Object
Mix absolute lengths with fr units to
have flexible containers that have
some fixed width tracks.
![Page 43: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/43.jpg)
Media Object
▸ contains an image plus content ✓
▸ is flexible ✓
▸ elements should stack on mobile ✓
▸ box should clear the contents ✓
▸ image can be to the left or the right
▸ can be nested
![Page 44: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/44.jpg)
@media (min-width: 600px) { .media { display: grid; grid-column-gap: 20px; grid-template-columns: 150px 1fr; grid-template-rows: auto 1fr; grid-template-areas: "img title" "img bd" "img ft"; } .media.media-flip { grid-template-columns: 1fr 150px; grid-template-areas: "title img" "bd img" "ft img"; } }
Media Object
Flipping the display by creating new
rules for the ‘media-flip’ class.
![Page 45: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/45.jpg)
![Page 46: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/46.jpg)
Media Object
▸ contains an image plus content ✓
▸ is flexible ✓
▸ elements should stack on mobile ✓
▸ box should clear the contents ✓
▸ image can be to the left or the right ✓
▸ can be nested
![Page 47: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/47.jpg)
![Page 48: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/48.jpg)
.media > .media { grid-column: 2 / -1 ; }
Media Object
If an item with a class of media is the
direct child of an item with a class of
media, start on column line 2.
Line -1 is the final line of the grid.
![Page 49: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/49.jpg)
![Page 50: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/50.jpg)
![Page 51: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/51.jpg)
Media Object
▸ contains an image plus content ✓
▸ is flexible ✓
▸ elements should stack on mobile ✓
▸ box should clear the contents ✓
▸ image can be to the left or the right ✓
▸ can be nested ✓
![Page 52: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/52.jpg)
Magazine style layout
New CSS Meets
![Page 53: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/53.jpg)
![Page 54: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/54.jpg)
<figure class=“feature-fig">
<figcaption>caption</figcaption>
<img src="placeholder1.jpg" alt="placeholder 1"> <img src="placeholder1.jpg" alt="placeholder 2"> <img src="placeholder1.jpg" alt="placeholder 3">
</figure>
Magazine Style Layout
The block is a figure with three
images and a caption.
![Page 55: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/55.jpg)
![Page 56: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/56.jpg)
<div class="half-border"> <p class="inner">Content here</p> </div>
Half-border Box
Creating the half-border box as a
standalone pattern.
![Page 57: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/57.jpg)
.half-border { display: grid; border-top: 2px solid #000; grid-template-rows: minmax(30px, 1fr) 2fr; }
Half-border Box
I’m using grid layout to create a single
column, 2 row grid.
![Page 58: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/58.jpg)
minmax()
![Page 59: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/59.jpg)
1fr 1fr 1fr
1fr 1frminmax(400px, 1fr)
700px container
![Page 60: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/60.jpg)
300px height
1fr
50px
minmax(50px, 1fr)
https://cssgrid.me/grid-minmax
![Page 61: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/61.jpg)
.half-border { display: grid; border-top: 2px solid #000; grid-template-rows: minmax(30px, 1fr) 2fr; align-self: start; }
Half-border Box
The first row of the grid is a minimum
of 30px tall, a maximum of 1fr.
![Page 62: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/62.jpg)
.half-border::before { content: ""; border-left: 2px solid #000; grid-row: 1; grid-column: 1; }
Half-border Box
A pseudo-element created with
generated content will also become a
grid item.
![Page 63: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/63.jpg)
![Page 64: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/64.jpg)
.half-border .inner { grid-row: 1 / 3; grid-column: 1; margin: 10px; }
Half-border Box
The inner starts at row line 1 and
ends at row line 3, spanning 2 row
tracks.
![Page 65: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/65.jpg)
![Page 66: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/66.jpg)
<figure class="feature-fig">
<figcaption class="half-border"> <p class="inner">caption</p> </figcaption>
<img src="placeholder1.jpg" alt="placeholder 1"> <img src="placeholder1.jpg" alt="placeholder 2"> <img src="placeholder1.jpg" alt="placeholder 3">
</figure>
Magazine Style Layout
Adding the half-border classes.
![Page 67: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/67.jpg)
![Page 68: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/68.jpg)
@media (min-width: 600px) {
.feature-fig { display: grid; grid-template-columns: 2fr 2fr 1fr; }
.feature-fig img { object-fit: cover; } }
Magazine Style Layout
Defining a grid with 3 column tracks.
![Page 69: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/69.jpg)
![Page 70: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/70.jpg)
@media (min-width: 600px) {
.feature-fig { display: grid; grid-template-columns: 2fr 2fr 1fr; grid-template-rows: minmax(200px, auto) minmax(100px, auto) auto minmax(100px,auto); }
.feature-fig img { object-fit: cover; } }
Magazine Style Layout
Creating row tracks. The minmax()
notation means that we can set a
minimum size for the tracks.
![Page 71: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/71.jpg)
.feature-fig figcaption { grid-column: 1; grid-row: 3; margin-top: 10px; }
Magazine Style Layout
Position the figcaption after grid
column line 1, and grid row line 3
![Page 72: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/72.jpg)
![Page 73: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/73.jpg)
.feature-fig .main { grid-row: 1 / 3; grid-column: 1 / 3; z-index: 2; }
.feature-fig .insert { grid-row: 2 / 5; grid-column: 2 / 4; border-top: 10px solid #fff; border-left: 10px solid #fff; z-index: 3; }
.feature-fig .small { grid-row: 4 / 6; grid-column: 1 ; }
Magazine Style Layout
The items are positioned using line-
based positioning.
Grid items respect z-index so we can
layer items that end up in the same
cells.
![Page 74: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/74.jpg)
![Page 75: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/75.jpg)
.photo-circle { border-radius: 50%; }
Magazine Style Layout
Setting border-radius to 50% gives us
a circle.
![Page 76: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/76.jpg)
![Page 77: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/77.jpg)
Fancy headers with circles
New CSS Meets
![Page 78: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/78.jpg)
![Page 79: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/79.jpg)
<header class="run-header"> <h1> 4.5 Miles
in Berlin, Germany</h1>
<div class="intro"> <p> </p> </div> </header>
Fancy Header
The mark-up for the article header
![Page 80: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/80.jpg)
<header class="run-header"> <h1><span class="distance-wrap"> <span class="distance">4.5</span> <span class="miles">Miles</span></span> <span class="location">in Berlin, Germany</span></h1>
<div class="intro"> <p> </p> </div> </header>
Fancy Header
We need to add some mark-up to
identify the parts of the h1 text we
want to style.
![Page 81: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/81.jpg)
![Page 82: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/82.jpg)
.run-header .distance-wrap { border-radius: 50%; width: 5em; height: 5em; padding: 0; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.8)),url(/assets/img/flag-germany.jpg) center center; background-size: cover; margin: 0 auto 1em auto; z-index: 2; }
Fancy Header
I use border-radius set to 50% to
make the distance part of the header
a circle.
![Page 83: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/83.jpg)
![Page 84: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/84.jpg)
.run-header .distance-wrap { display: block; border-radius: 50%; width: 5em; height: 5em; padding: 0; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.8)),url(/assets/img/flag-germany.jpg) center center; background-size: cover; margin: 0 auto 1em auto; z-index: 2; }
Fancy Header
Setting display to block will mean the
span becomes block level.
![Page 85: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/85.jpg)
![Page 86: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/86.jpg)
.run-header .distance-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; width: 5em; height: 5em; padding: 0; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.8)),url(/assets/img/flag-germany.jpg) center center; background-size: cover; margin: 0 auto 1em auto; z-index: 2; }
Fancy Header
I use border-radius set to 50% to
make the distance part of the header
a circle.
![Page 87: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/87.jpg)
![Page 88: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/88.jpg)
@media (min-width: 600px) { .run-header .distance-wrap { float: left; margin: 0 10px 10px 0; } .run-header h1 { text-align: left; width: 100%; } .run-header .location { display: inline-block; padding-left: 1em; margin-left: -1em; } .intro { padding: 0; } }
Fancy Header
Floating the distance-wrap class left
means the location comes up
alongside it.
![Page 89: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/89.jpg)
![Page 90: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/90.jpg)
@media (min-width: 600px) { .run-header .distance-wrap { float: left; margin: 0 10px 10px 0; } .run-header h1 { text-align: left; width: 100%; } .run-header .location { display: inline-block; padding-left: 1em; margin-left: -1em; } .intro { padding: 0; } }
Fancy Header
We can use the shape-outside
property with a value of margin-box
to create the curved text.
![Page 91: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/91.jpg)
@media (min-width: 600px) { .run-header .distance-wrap { float: left; shape-outside: margin-box; margin: 0 10px 10px 0; } .run-header h1 { text-align: left; width: 100%; } .run-header .location { display: inline-block; padding-left: 1em; margin-left: -1em; } .intro { padding: 0; } }
Fancy Header
We can use the shape-outside
property with a value of margin-box
to create the curved text.
![Page 92: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/92.jpg)
![Page 93: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/93.jpg)
![Page 94: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/94.jpg)
![Page 95: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/95.jpg)
Design for the extreme edges of the experience.
![Page 96: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/96.jpg)
The middle is constantly changing.
![Page 98: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/98.jpg)
CSS has backwards compatibility built in.
![Page 99: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/99.jpg)
![Page 100: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/100.jpg)
Feature Queries
![Page 102: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/102.jpg)
![Page 103: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/103.jpg)
@supports (shape-outside: margin-box) {
}
Fancy Header
A Feature Query looks very similar to
Media Queries. Here we test for a
property and value pair.
![Page 104: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/104.jpg)
Using Feature Queries
▸ Write CSS for browsers without support
▸ Override those properties inside the feature queries
▸ See https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/
▸ A component based approach helps to keep this all in check!
![Page 105: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/105.jpg)
.intro { padding: 0; margin-left: 9em; }
@supports (shape-outside: margin-box) { .run-header .distance-wrap { shape-outside: margin-box; margin: 0 10px 10px 0; } .intro { margin-left: 0; } }
Fancy Header
Outside of the feature query I add a
left margin to the intro.
Inside the feature query we add the
shape-outside property and also
remove that margin.
![Page 107: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/107.jpg)
![Page 108: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/108.jpg)
![Page 109: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/109.jpg)
@supports(display: grid) {
}
Half-border Box
Using a Feature Query to check for
Grid Layout support
![Page 110: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/110.jpg)
.half-border { display: inline-block; border: 2px solid #000; padding: 10px; }
@supports(display: grid) {
.half-border { border: 0; padding: 0;
/* the rest of my CSS for grid */ } }
Half-border Box
Outside the Feature Query write CSS
to style the box.
Override that for Grid supporting
browsers inside the query.
![Page 112: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/112.jpg)
@media (min-width: 600px) { .half-border { width: 45%; display: inline-block; vertical-align: top; } .feature-fig img { object-fit: cover; display: inline-block; width: 45%; } .feature-fig .small { vertical-align: bottom; margin: 0 0 20px 5%; } .photo-circle { border-radius: 50%; } @supports(display: grid) { .feature-fig img, .half-border { width: auto; } .feature-fig .small { margin: 0; } /* the rest of my CSS for grid */ } }
Magazine Style Layout
Outside the Feature Query add CSS
for non-grid browsers.
Inside write CSS to override plus the
rules for grid layout.
![Page 113: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/113.jpg)
![Page 114: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/114.jpg)
@media (min-width: 600px) { .half-border { width: 45%; display: inline-block; vertical-align: top; } .feature-fig img { object-fit: cover; display: inline-block; width: 45%; } .feature-fig .small { vertical-align: bottom; margin: 0 0 20px 5%; } .photo-circle { border-radius: 50%; } @supports(display: grid) { .feature-fig img, .half-border { width: auto; } .feature-fig .small { margin: 0; } /* the rest of my CSS for grid */ } }
Magazine Style Layout
Outside the Feature Query add CSS
for non-grid browsers.
Inside write CSS to override plus the
rules for grid layout.
![Page 115: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/115.jpg)
If using display: grid or display: flex
▸ Floated items that become grid or flex items lose their float behaviour
▸ vertical-align has no effect on a grid item
▸ Items set to display: inline-block or display: block become grid items
▸ Your overrides mostly will be concerned with changing widths, margins and padding.
▸ If grid tracks or flex-basis seem to be using a size you didn’t expect, check your item widths!
![Page 116: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/116.jpg)
https://rachelandrew.co.uk/css/cheatsheets/grid-fallbacks
![Page 117: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/117.jpg)
Magazine style layouts three ways - https://cssgrid.me/feature-figure
![Page 118: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/118.jpg)
![Page 119: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/119.jpg)
Media Object
▸ contains an image plus content ✓
▸ is flexible ✓
▸ elements should stack on mobile ✓
▸ box should clear the contents ✓
▸ image can be to the left or the right ✓
▸ can be nested ✓
![Page 120: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/120.jpg)
.media:after { content: ""; display: table; clear: both; }
.media > .media { margin-left: 160px; clear: both; }
Media Object
We need to add a ‘clearfix’ to the
media object outside the Feature
Queries, and also clear nested Media
Objects.
![Page 121: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/121.jpg)
.media .img { float: left; margin: 0 10px 0 0; width: 150px; }
.media.media-flip .img { float: right; margin: 0 0 0 10px; }
.media > * { margin: 0 0 0 160px; }
.media.media-flip > * { margin: 0 160px 0 0; }
Media Object
The image is floated left, or right.
Add a right, or left margin to the
other child elements.
![Page 122: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/122.jpg)
@supports(display: grid ) {
.media > *, .media.media-flip > * { margin: 0; }
.media .img, .media.media-flip .img { width: auto; margin: 0; }
.media:after { content: none; }
/* the rest of my CSS for grid */ }
Media Object
The overrides are to remove margins
and widths and the now redundant
generated content for clearing.
![Page 123: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/123.jpg)
![Page 124: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/124.jpg)
![Page 125: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/125.jpg)
<div class="media"> <div class="img"> <img src="/assets/img/placeholder.jpg" alt="Placeholder"> </div> <h2 class="title">This is my title</h2> <div class="content"> </div> <div class="footer"> footer here </div> </div>
Media Object
Moving the title below the image in
the source.
![Page 126: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/126.jpg)
![Page 127: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/127.jpg)
.media { display: grid; grid-column-gap: 20px; grid-template-areas: "title" "img" "bd" "ft"; }
Media Object
A single column grid to arrange our
elements for narrow widths.
![Page 128: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/128.jpg)
![Page 130: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/130.jpg)
What happened to vendor prefixes?
![Page 131: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/131.jpg)
Vendor Prefixes
▸ Vendor specific extensions to CSS
▸ Used by browsers to expose experimental features
▸ Used by developers to use those experimental features in production
![Page 132: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/132.jpg)
Prefix Removals
▸ The only prefixed Grid is the old IE10 implementation -ms prefix
▸ shape-outside is -webkit prefixed in Safari and iOS Safari 10
▸ The -webkit prefix has been removed from shape-outside, so future Safari shouldn’t need it
▸ Flexbox is now unprefixed in all browsers
![Page 133: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/133.jpg)
For older browsers
▸ Check caniuse.com to see where you still need prefixes
▸ Autoprefixer uses the Can I Use database to add these automatically
▸ Autoprefixer will prefix very simple grids with the -ms version. In simple cases this may work for you.
▸ Autoprefixer may also make a terrible mess if you have used properties not part of the IE implementation. Be sure to test!
![Page 134: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/134.jpg)
Creating Layout
![Page 135: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/135.jpg)
![Page 136: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/136.jpg)
<div class="post"> <article class="main"> <!— fancy header —>
<div class=“body"> <!— article content —> </div> </article>
<div class="comments"> <h3>Comments</h3> <!— media objects —> </div>
<aside class="extras"> <!— feature figure —> </aside> </div>
Article Layout
The skeleton layout mark-up
![Page 137: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/137.jpg)
.post { margin: 1em auto; padding: 0 20px; max-width: 960px; }
.post .body { margin: 0 0 2em 0; }
Article Layout
Basic CSS for a single column article
layout.
![Page 138: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/138.jpg)
![Page 139: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/139.jpg)
@supports(display: grid) {
@media(min-width: 900px) { .post > .main { grid-area: article;} .post > .comments { grid-area: side;} .post > .extras { grid-area: secondary;}
.post { display: grid; grid-template-columns: 3fr 2fr; grid-template-areas: "article side" "secondary side”;
grid-column-gap: 80px; max-width: 1600px; } } }
Article Layout
If we have grid and a wide screen, I’m
going to take advantage of that.
![Page 140: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/140.jpg)
![Page 141: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/141.jpg)
Your component is already a reduced test case.
![Page 142: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/142.jpg)
This is not twice the work
![Page 143: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/143.jpg)
This is not about fallback support
![Page 144: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/144.jpg)
This is evergreen design
![Page 145: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/145.jpg)
Design that enhances itself as the platform it lives on improves.
![Page 146: An Event Apart Seattle - New CSS Layout Meets the Real World](https://reader031.vdocuments.mx/reader031/viewer/2022022412/58f27eb41a28ab2f4b8b4575/html5/thumbnails/146.jpg)
@rachelandrew
Thank you #aeasea