Designing Layouts: The New Superpowers of CSS at An Event Apart San Francisco

DESIGNING LAYOUTS: THE NEW SUPERPOWERS OF CSS WITH JEN SIMMONS

The Cheongju Early Printing Museum, Korea — lindagoeseast.com/2015/09/14/a-visit-to-the-cheongju-early-printing-museum

CSS Grid Writing Modes

Today’s Plan

9:00 – now Intro now – 10:00 Writing Modes 10:00
– 10:10 Break 10:10 – 11:00 Intro to CSS Grid 11:00 – 11:10 Break 11:10 - 12:00 More CSS Grid 12:00 – 1:00 Lunch 1:00 – 2:00 Using A Grid 2:00 - 2:10 Break 2:10 – 3:00 More 3:00 – 3:10 Break 3:10 - 4:00 Layout and the Medium of the Web

@JENSIMMONS

public.etherpad-mozilla.org/p/AEASF-links

public.etherpad-mozilla.org/p/AEASF-questions

labs.jensimmons.com/workshop

Writing Modes

“ — Bruce Lawson It’ s the World Wide Web,
not the Wealthy Western Web.

drafts.csswg.org/css-writing-modes-3

direction writing-mode text-orientation

inline direction When I’m writing or reading this is the
way the characters flow

<p> <p> <p> <p> block flow direction

LATIN-BASED SYSTEMS block direction inline direction

ARABIC-BASED SYSTEMS block direction inline direction

direction

.foo { direction: rtl; } .foo { direction: ltr; }

<!DOCTYPE html> <html lang="en-US" dir="ltr"> <head> … </head> <body> …
</body> </html>

<p>English words</p> <p class="foo"> ﺔﯿﺑﺮﻌﻟا تﺎﻤﻠﻜﻟا </p> .foo { direction:
rtl; }

<p>English words</p> <p><bdo dir="rtl"> .ﺔﯿﺑﺮﻌﻟا تﺎﻤﻠﻜﻟا </bdo></p>

<p>English words in this paragraph. <bdi dir=“rtl">.تﺎﻤﻠﻜﻟ </bdi> Some more
LTR words, same paragraph.</p>

LATIN-BASED SYSTEMS ARABIC-BASED SYSTEMS block direction inline direction block direction
inline direction .css {direction: rtl;} <html dir="rtl"> .css {direction: ltr;} <html dir="lrt">

MONGOLIAN-BASED SYSTEMS block direction inline direction

HAN-BASED SYSTEMS block direction inline direction *Chinese, Japanese, Korean &
more

HAN-BASED SYSTEMS block direction inline direction block direction inline direction
*Chinese, Japanese, Korean & more

HAN-BASED SYSTEMS block direction inline direction MONGOLIAN-BASED SYSTEMS block direction
inline direction

MONGOLIAN-BASED SYSTEMS block direction inline direction

MONGOLI inline direction

MONGOLIAN-BASED SYSTEMS block direction inline direction direction block inline direction

Top of page Top of characters hello

HAN-BASED SYSTEMS block direction inline direction MONGOLIAN-BASED SYSTEMS direction block
inline direction

SO FAR…

block direction inline direction

LATIN-BASED SYSTEMS block direction inline direction

ARABIC-BASED SYSTEMS block direction inline direction

HAN-BASED SYSTEMS block direction inline direction block direction inline direction
*Chinese, Japanese, Korean & more

MONGOLIAN-BASED SYSTEMS direction block inline direction

writing-mode

THREE OPTIONS FOR WRITING-MODE direction block inline direction writing-mode: vertical-lr;
block direction inline direction writing-mode: vertical-rl; block direction inline direction toggle w/ direction writing-mode: horizontal-tb;

h1:nth-child(2) { writing-mode: vertical-rl; }

block direction inline direction writing-mode: vertical-rl; block direction inline direction toggle w/ direction writing-mode: horizontal-tb;

h1:nth-child(2) { transform: rotate(90deg); }

My Cool Website

WRITING-MODE block direction inline direction writing-mode: vertical-rl;

My Cool Website

OPTIONS FOR VERTICAL WRITING-MODES direction block inline direction writing-mode: vertical-lr;
block direction inline direction writing-mode: vertical-rl; creates a vertical typographic mode

TWO MORE OPTIONS FOR WRITING-MODE block direction inline direction writing-mode:
sideways-lr; block direction inline direction writing-mode: sideways-rl; creates a horizontal typographic mode only

direction block inline direction writing-mode: vertical-lr; block direction inline direction
writing-mode: sideways-lr;

block direction inline direction writing-mode: sideways-rl; block direction inline direction
writing-mode: vertical-rl;

text-orientation

HAN-BASED SYSTEMS block direction inline direction

HAN-BASED SYSTEMS b l o c k d i r
e c t i o i n l i n e d i r e c t i o n

options for vertical writing modes text-orientation: mixed; text-orientation: upright; text-orientation:
sideways; THREE OPTIONS FOR TEXT-ORIENTATION

block direction inline direction writing-mode: sideways-rl; block direction inline direction
writing-mode: vertical-rl; text-orientation: mixed; creates a horizontal typographic mode creates a vertical typographic mode

My Cool Website how?

My Cool Website writing-mode: vertical-rl; transform: rotate(180deg); text-orientation: sideways; (if
needed to fix punctuation / underlining)

SUMMARY

block direction inline direction writing-mode: vertical-rl; block direction inline direction toggle w/ direction writing-mode: horizontal-tb; creates a vertical typographic mode

TWO MORE OPTIONS FOR WRITING-MODE block direction inline direction writing-mode:
sideways-lr; block direction inline direction writing-mode: sideways-rl; creates a horizontal typographic mode only

options for vertical writing modes text-orientation: mixed; text-orientation: upright; text-orientation:
sideways; THREE OPTIONS FOR TEXT-ORIENTATION

CODE IT UP

section { direction: ltr; writing-mode: horizontal-tb; } (These are all
the defaults. No need to specify them.) Example: Writing Mode 1A

section { direction: ltr; } (Actually, do it in your
HTML.) Example: Writing Mode 1A

section { writing-mode: vertical-rl; } (This triggers text-orientation: mixed as
the default.) Example: Writing Mode 1A

section { writing-mode: vertical-lr; } Example: Writing Mode 1A

section { writing-mode: sideways-rl; } Example: Writing Mode 1A

section { writing-mode: sideways-lr; } Example: Writing Mode 1A

section { writing-mode: vertical-rl; text-orientation: upright; } Example: Writing Mode
1A

section { writing-mode: vertical-lr; text-orientation: upright; } Example: Writing Mode
1A

QUESTION TIME COMING SOON

h1 { writing-mode: vertical-rl; } Example: Writing Mode 4A

h1 { writing-mode: vertical-rl; transform: rotate(180deg); text-align: right; } Example:
Writing Mode 4B

h1 { writing-mode: vertical-rl; text-orientation: upright; text-transform: uppercase; } Example:
Writing Mode 4C

h1 { writing-mode: vertical-rl; text-orientation: upright; text-transform: uppercase; transform: rotate(180deg);
} Example: Writing Mode 4D

<main> <h1> <span>Made</span> <span>by</span> <span>Few</span> </h1> </main> Example: Writing Mode
3A

h1 span:nth-child(2) { writing-mode: vertical-rl; text-orientation: upright; font-size: 45%; }
Example: Writing Mode 3A

h1 { display: grid; } h1 span:nth-child(1) { grid-column: 1
/ 3; grid-row: 1 / 2; } h1 span:nth-child(2) { grid-column: 1 / 2; grid-row: 2 / 3; } h1 span:nth-child(3) { grid-column: 2 / 3; grid-row: 2 / 3; } Example: Writing Mode 3A

Writing Modes

QUESTIONS?

Start & End

block inline

block end inline start inline end block start

block start inline start inline end block end

block start inline end inline start block end

end start end start

start start end end

cross axis main axis

flex-start flex-start flex-end flex-end cross axis main axis

Start & End

For the rest of today…

block end inline start inline end block start

LET’S GET TO IT ALREADY CSS GRID

CSS Grid

w3.org/TR/css3-grid

In progress

Behind a ﬂag Just Works On Its Way Chrome Chrome
Canary Opera Opera Developer Firefox Firefox   Dev Edition Safari Technical Preview Firefox   Nightly Edge Safari Old Spec IE10+ -ms-* Stuck in 2012

IE & Edge implementation, by Microsoft IE old spec in
IE10+ -ms-* preﬁx Edge new spec TBA

Preﬁxes

SCSS CSS

main { /* autoprefixer: off */ display: grid; grid-template-columns: repeat(12,
60px); grid-gap: 20px; }

// layout using old-technology @supports (display:grid) { // overrides to
undo old layout // layout using new-technology }

Blink implementation, by Igalia Chrome Chrome Canary Opera Opera Developer
“behind a ﬂag”

chrome://flags

opera://flags

Webkit implementation, by Igalia Safari nope Safari Technical Preview “behind
a ﬂag”

Develop > Experimental Features > CSS Grid

Firefox implementation, by Mozilla “behind a ﬂag” Firefox Firefox  
Dev Edition Firefox   Nightly Just Works

about:config

nightly.mozilla.org

addons.mozilla.org/addon/css-grid-inspector

30-45% without 55-70% with CSS Grid Spring 2017

“ — Johnny Appleseed Why are we talking about this
now? It’s too early.

“ — Johnny Appleseed The ﬁrst browser hasn’t shipped it
yet. It’ll take 3–5 years for other browsers to catch up. So… 2020.

“ — Johnny Appleseed Grid is too buggy to use.
Wait a year or two for it   to get ﬁxed.

“ — Johnny Appleseed Grid is taking too long.  
It took 3 years to get into beta. Will be another 3 before it’s in production.

“ — Jen Simmons These people are wrong.

“ —Rachel Andrew You should try it out now and
complain about what you don’t like. Once it ships, it’s too late to change anything.

“ — Jen Simmons Grid takes time and commitment to
learn. Start now and get ready to use it in 6 months.

“ — Jen Simmons Learn Grid ‘early’ and make yourself
super valuable. Get the $$$.

CSS Grid

labs.jensimmons.com

labs.jensimmons.com/workshop

Grid Container

Grid Items

<main> <div>item</div> <div>item</div> <div>item</div> this is an anonymous grid item
<div>item</div> hello world <section>more stuff</section> <footer>conclusion</footer> </main> <ul> <li> <li> <li> <li> <li> <li> <li> <li> </ul> <body> <header> <main> <article> <h1> <p> <figure> <aside> <footer> </body>

<body> <header>…</header> <main> <article> <h1> <p> <p> <p> <figure> <p>
</article> </main> <aside>…</aside> <footer>…</footer> </body> body { display: grid; }

</article> </main> <aside>…</aside> <footer>…</footer> </body> body { display: grid; } main { display: grid; }

</article> </main> <aside>…</aside> <footer>…</footer> </body> body { display: grid; } main { display: grid; } article { display: grid; }

</article> </main> <aside>…</aside> <footer>…</footer> </body> body { display: grid; } article { display: grid; }

</article> </main> <aside>…</aside> <footer>…</footer> </body> body { display: grid; } main { display: subgrid; } article { display: subgrid; }

Terminology

Grid Container

Grid Items

Grid Area Grid Line Grid Track Grid Track Grid Cell
Grid Line Grid Line Grid Line Grid Line

Grid Area Grid Track Grid Track Grid Cell Grid Line
Grid Line Grid Line Grid Line Grid Line Grid Gap Grid Gap Grid Gap

The Grid vs. The Content

• Exists in HTML • Can be styled,   like
anything in HTML

• Exists in CSS • Can NOT be styled •
It doesn’t exist   in the DOM

1 2 3 4 5 6 Grid Line Numbers Line
Numbers, not track numbers — different than what we are used to! 1 2 3 4 5

main { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(4, 1fr);
} aside { grid-column: 1 / 3; grid-row: 1 / -1; background: yellow; }

EXAMPLES

.grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; } some
other syntax options (each with different results) grid-template-columns: 1fr 5fr 2.5fr; grid-template-columns: 8em 1fr 300px; grid-template-columns: 1fr 1fr 2fr 3fr 5fr 8fr 13fr 21fr 34fr; grid-template-columns: repeat(7, 1fr); grid-template-columns: repeat(3, 200px 1fr 25%); grid-template-columns: repeat(auto-fit, 10em); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

Units for setting Grid Track Sizes ‣ length: px, em,
rem, vw, vh ‣ percent ‣ factor unit: 1fr ‣ auto ‣ measurement of content: min-content / max-content ‣ minmax();

.grid-item { grid-column: 1 / 5; // goes from vertical
line 1 to 5 grid-row: 3 / 5 // goes from horizontal line 3 to 5 } some other syntax options (each with different results) grid-column: 3 / 5; // starts at line 3, goes to line 5 grid-column: 3 / span 2; // starts at line 3, spans 2 cells grid-column: span 2 / 5; // spans 2 cells, ends at line 5 grid-column: span 2; // spans 2 cells, placed by algorithm grid-column: 4; // starts at line 4 grid-column: 1 / -1; // starts at line 1, goes to line -1 grid-column: horse / pig;

1 2 3 4 5 6 grid-column: 1 / 2;
grid-row: 1 / 2; grid-column: 5 / 6; grid-row: 1 / 2; grid-column: 2 / 4; grid-row: 2 / 3; grid-column: 3 / 5; grid-row: 3 / 5; 1 2 3 4 5 grid-column: 1 / 2; grid-row: 4 / 5;

.item { grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3;}
.item { grid-column: 2 / 4; grid-row: 1 / 3; } .item { grid-area: 1 / 2 / 3 / 4; } 1 2 3 4 grid-column: 2 / 4; grid-row: 1 / 3; 1 2 3 4 5

1 6 6 lines 5 tracks 4 gaps 2 3
4 5

Grid Line Numbers 1 2 3 4 5 6 -5
-4 -3 -2 -1 -6 -5 -4 -3 -2 -1 1 2 3 4 5

Explicit Grid vs Implicit Grid

by Manuel Rego Casasnovas http://blogs.igalia.com/mrego/2016/02/01/deep-dive-into-grid-layout-placement/

Place each item into a specific cell/area Let the browser
place everything using autoplacement algorithm

Sparse & Dense

11 8 9 10 7 6 5 1 2 3
4 auto placement algorithm

13 11 8 9 10 7 6 5 1 2
3 4 12 grid-auto-ﬂow: dense;

grid-auto-flow: row; grid-auto-flow: column; grid-auto-flow: dense; grid-auto-flow: row dense; grid-auto-flow:
column dense;

Named Lines

.container { grid-template-rows:[cow] 1fr [horse] 1fr [dog] 1fr [pig] 1fr
[duck]; } .item { grid-column: horse / pig; } 1 2 3 4 1 2 3 4 5 cow horse dog pig duck

grid-template-rows:1fr 1fr 1fr; grid-template-rows:[cow] 1fr [horse] 1fr [dog] 1fr [pig];
grid-template-rows: repeat(auto-fit, 200px 1fr); grid-template-rows: repeat(auto-fit, [dog] 200px [cat] 1fr); grid-template-rows: repeat(4,   [even-start even-end] 80px [odd-start odd-end] 80px);

grid-template-rows: repeat(4,[foo-start] 1fr [foo-end] 300px);

Grid Container

Grid Items

Grid Area Grid Line Grid Track Grid Track Grid Cell
Grid Line Grid Line Grid Line Grid Line header

<body> <header> <main> <article> <h1> <p> <figure> <aside> <footer> </body>
~25% ~75%

header { grid-area: header; } main { grid-area: main; }
aside { grid-area: aside; } footer { grid-area: footer; } body { display: grid; grid-template-columns: 3fr 1fr; grid-gap: 2rem; grid-template-areas: "header header" "main aside" "footer footer”; } ‘header’ 4fr + 2rem ‘aside’ 1fr ‘main’ 3fr ‘footer’ 4fr + 2rem

body { display: grid; grid-template-columns: 3fr 1fr; grid-gap: 2rem; grid-template-areas:
"header" "main" "aside" "footer"; } @media (min-width: 800px) { body { grid-template-areas: "header header" "main aside" "footer footer"; } }

Alignment

block inline

cross axis main axis

justify align

From CSS Box Alignment Module Level 3 — drafts.csswg.org/css-align

align-content justify-content

flex-start flex-end center stretch space-between space-around

start end center stretch space-between space-around space-evenly

align-items justify-items

Specify this on the container.

flex-start flex-end center stretch baseline

start / flex-start end / flex-end center stretch baseline justify-items
align-items

align-self justify-self

Specify this on an item.

flex-start flex-end center stretch baseline

start / flex-start end / flex-end center stretch baseline justify-self
align-self

Multicolumn

article { max-width: 500px; margin: 0 auto; }

article { column-count: 2; column-gap: 2em; }

article { // column-count: 2; column-width: 200px; column-gap: 2em; }

img { width: 100%; } article { column-width: 200px; column-gap:
2em; column-rule:   1px solid #444; }

USING A GRID TO   LINE THINGS UP LIKE A
MODERNIST WITH JEN SIMMONS

Massimo & Lella Vignelli

vignelli.com/canon.pdf

LAYOUT AND THE MEDIUM OF THE WEB

Things to consider. Things to design for.

world wide web

1. The Viewport

Viewport

Filmmaking & Cinematography

Saul Bass

Saul & Elaine Bass

Bass & Associates

25vw 50vh that dang “fold”

Prototype or Storyboard (or both) (full page mock-ups don't get
at this)

Framing

what does it mean to have a   reading experience
with a frame, where things move in and out of that frame?

what does it mean to have a   interaction experience
with a frame, where things move in and out of that frame?

1. Design for   the Viewport

2. The Flow

Where do I go to get more of this thing?

drawing by Dave Ellis novolume.co.uk

We must make sure our audience knows the answer  
to this question:   “Where do I go to get more   of this thing?”

Where do I go to get more of this thing?

We don’t have to vertical scroll.

the link the page

scroll snap

apps v. sites

mental model of offscreen v. onscreen

2. Design the Flow

3. Density

“ — The Vignelli Canon Great designs can be achieved
without the use of the grid, but the grid is a very useful tool to guarantee results. Ultimately the most important tool is the management of the white space in layouts. It is the white space that makes the layout sing. Bad layouts have no space left for breathing — every little space is covered by a cacophony of type sizes, images, and screaming titles.

3. Consider Density Carefully

4. Asymmetry

4. Asymmetry &   Visual Hierarchy

I wonder if we’ve even begun to understand how to
use the space on the page yet.

THE END

Designing Layouts: The New Superpowers of CSS a...

Designing Layouts: The New Superpowers of CSS at An Event Apart San Francisco

More Decks by Jen Simmons

Other Decks in Design

Featured

Transcript