New CSS Layout Meets the Real World

New CSS Layout Meets the Real World
Rachel Andrew @ An Event Apart Chicago

“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 beneﬁts yet?”

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 ﬁnd web designers that are exploiting these new
found powers.

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 ﬁnd web designers that are exploiting these new
found powers.
Chris Casciano

2nd October 2001
Chris Casciano
http://www.chunkysoup.net/opinion/boringcss/

www.thenoodleincident.com/tutorials/box_lesson/boxes.html

March 2017 March 2017 March 2017 March 2017 March 2017 In Insider 
Preview!

Featuring
▸ Flexbox
▸ CSS Grid Layout
▸ Box Alignment
▸ CSS Shapes
▸ CSS Feature Queries

The Media
Object
New CSS Meets

Media Object
▸ contains an image plus content
▸ is ﬂexible
▸ elements should stack on mobile
▸ box should clear the contents
▸ image can be to the left or the right
▸ can be nested

Avoid pre-empting the
need for markup as
styling hooks.

<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

@media (min-width: 600px) {
.media {
display: grid;
}
}
Media Object
To create a grid use a new value of
the display property:
display: grid

.media {
display: grid;
grid-column-gap: 20px;
}
}
Media Object
Create gutters between grid cells:
- grid-column-gap
- grid-row-gap
- grid-gap
X

.media {
display: grid;
column-gap: 20px;
}
}
Media Object
- column-gap
- row-gap
- gap

.media {
display: grid;
}
}
Media Object
- grid-column-gap
- grid-row-gap
- grid-gap

.media {
display: grid;
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.

.media > .title {
grid-area: title;
}
.media > .img {
grid-area: img;
}
.media > .content {
grid-area: bd;
}
.media > .footer {
grid-area: ft;
}
Media Object
Deﬁne areas with grid-area

.media {
display: grid;
grid-template-areas:
"img title"
"img bd"
"img ft";
}
}
Media Object
Describing layout with the  
grid-template-areas property

<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 ﬂex-example.
There is another element nested
inside box three.

.flex-example {
display: flex;
}
.flex-example > div {
flex: 1 1 auto;
}
auto as flex-basis
The parent becomes a ﬂex container,
and all direct children are set to grow
and shrink from a ﬂex-basis of auto.

no box has a width, and ﬂex-basis is auto and so resolved from the content

.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 ﬂex-basis will be
taken from any width set on the item.
If there is no width, ﬂex-basis will be
taken from the content width.

width 350px nested item width 200pxno width
https://cssgrid.me/ﬂex-auto

.media {
display: grid;
grid-template-rows: auto 1fr;
"img title"
"img bd"
"img ft";
}
}
Media Object
The grid-template-rows property
deﬁnes the rows on the grid.
If we don’t deﬁne rows grid will
create them as part of the implicit
grid.

.media {
display: grid;
grid-template-columns: 150px 1fr;
"img title"
"img bd"
"img ft";
}
}
Media Object
Mix absolute lengths with fr units to
have ﬂexible containers that have
some ﬁxed width tracks.

Media Object
▸ contains an image plus content ✓
▸ is ﬂexible ✓
▸ elements should stack on mobile ✓
▸ box should clear the contents ✓
▸ image can be to the left or the right
▸ can be nested

.media {
display: grid;
grid-template-columns: 150px 1fr;
"img title"
"img bd"
"img ft";
}
.media.media-flip {
grid-template-columns: 1fr 150px;
"title img"
"bd img"
"ft img";
}
}
Media Object
Flipping the display by creating new
rules for the ‘media-ﬂip’ class.

Media Object
▸ image can be to the left or the right ✓
▸ can be nested

.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 ﬁnal line of the grid.

Media Object
▸ image can be to the left or the right ✓
▸ can be nested ✓

Magazine
style layout
New CSS Meets

<figure class=“feature-fig">
<figcaption>caption</figcaption>
<img src="placeholder1.jpg" alt="placeholder 1">
</figure>
Magazine Style Layout
The block is a ﬁgure with three
images and a caption.

<div class="half-border">
<p class="inner">Content here</p>
</div>
Half-border Box
Creating the half-border box as a
standalone pattern.

.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.

1fr 1fr 1fr
1fr 1frminmax(400px, 1fr)
700px container

300px height
1fr
50px
minmax(50px, 1fr)
https://cssgrid.me/grid-minmax

.half-border {
display: grid;
border-top: 2px solid #000;
grid-template-rows:
minmax(30px, 1fr) 2fr;
align-self: start;
}
Half-border Box
The ﬁrst row of the grid is a minimum
of 30px tall, a maximum of 1fr.

.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.

.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.

<figure class="feature-fig">
<figcaption class="half-border">
<p class="inner">caption</p>
</figcaption>
</figure>
Adding the half-border classes.

.feature-fig {
display: grid;
grid-template-columns: 2fr 2fr 1fr;
}
.feature-fig img {
object-fit: cover;
}
}
Deﬁning a grid with 3 column tracks.

.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;
}
}
Creating row tracks. The minmax()
notation means that we can set a
minimum size for the tracks.

.feature-fig figcaption {
grid-column: 1;
grid-row: 3;
margin-top: 10px;
}
Position the ﬁgcaption after grid
column line 1, and grid row line 3

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

.photo-circle {
border-radius: 50%;
}
Setting border-radius to 50% gives us
a circle.

Fancy headers
with circles
New CSS Meets

<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

<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.

.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.

display: block;
border-radius: 50%;
width: 5em;
height: 5em;
padding: 0;
background: linear-
z-index: 2;
}
Fancy Header
Setting display to block will mean the
span becomes block level.

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 50%;
width: 5em;
height: 5em;
padding: 0;
background: linear-
z-index: 2;
}
Fancy Header
I use border-radius set to 50% to
make the distance part of the header
a circle.

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.

float: left;
}
.run-header h1 {
text-align: left;
width: 100%;
}
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.

float: left;
shape-outside: margin-box;
}
.run-header h1 {
text-align: left;
width: 100%;
}
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.

Design for the extreme
edges of the experience.

The middle is
constantly changing.

CSS has backwards
compatibility built in.

caniuse.com/#feat=css-featurequeries

@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.

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!

.intro {
padding: 0;
margin-left: 9em;
}
@supports (shape-outside: margin-box) {
shape-outside: margin-box;
}
.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.

Fancy Header three ways - https://cssgrid.me/fancy-headers

@supports(display: grid) {
}
Half-border Box
Using a Feature Query to check for
Grid Layout support

.half-border {
border: 2px solid #000;
padding: 10px;
}
.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.

https://cssgrid.me/half-border-box

.half-border {
width: 45%;
vertical-align: top;
}
.feature-fig img {
object-fit: cover;
width: 45%;
}
vertical-align: bottom;
margin: 0 0 20px 5%;
}
.photo-circle {
border-radius: 50%;
}
.feature-fig img,
.half-border {
width: auto;
}
margin: 0;
}
}
}
Outside the Feature Query add CSS
for non-grid browsers.
Inside write CSS to override plus the
rules for grid layout.

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!

https://rachelandrew.co.uk/css/cheatsheets/grid-fallbacks

Magazine style layouts three ways 
- https://cssgrid.me/feature-figure

.media:after {
content: "";
display: table;
clear: both;
}
.media > .media {
margin-left: 160px;
clear: both;
}
Media Object
We need to add a ‘clearﬁx’ to the
media object outside the Feature
Queries, and also clear nested Media
Objects.

.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 ﬂoated left, or right.
Add a right, or left margin to the
other child elements.

@supports(display: grid ) {
.media > *,
.media.media-flip > * {
margin: 0;
}
.media .img,
.media.media-flip .img {
width: auto;
margin: 0;
}
.media:after {
content: none;
}
}
Media Object
The overrides are to remove margins
and widths and the now redundant
generated content for clearing.

<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.

.media {
display: grid;
"title"
"img"
"bd"
"ft";
}
Media Object
A single column grid to arrange our
elements for narrow widths.

A variety of Media Objects - https://cssgrid.me/media-objects

What happened to
vendor prefixes?

Vendor Prefixes
▸ Vendor speciﬁc extensions to CSS
▸ Used by browsers to expose experimental features
▸ Used by developers to use those experimental features in production

Prefix Removals
▸ The only prefixed Grid is the old IE10 implementation -ms prefix
▸ shape-outside is -webkit prefixed in Safari and iOS Safari 10, later Safari
does not need it.
▸ Flexbox is now unprefixed in all browsers

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, if you enable
this.
▸ Autoprefixer may also make a terrible mess if you have used properties not
part of the IE implementation. Be sure to test!

<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

.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.

@media(min-width: 900px) {
.post > .main { grid-area: article;}
.post > .comments { grid-area: side;}
.post > .extras { grid-area: secondary;}
.post {
display: grid;
"article side"
"secondary side”;
max-width: 1600px;
}
}
}
Article Layout
If we have grid and a wide screen, I’m
going to take advantage of that.

Your component is
already a reduced test
case.

This is not about
fallback support

Design that enhances
itself as the platform it
lives on improves.

The New CSS
Layout
October 10th 2017

@rachelandrew
Thank you #aeachi

New CSS Layout Meets the Real World

More Related Content

Similar to New CSS Layout Meets the Real World

More from Rachel Andrew

Recently uploaded

New CSS Layout Meets the Real World