Designing with Grid — for UIE's All You Can Learn

DESIGNING WITH GRID JEN SIMMONS 2017

CSS Grid

The Kiss, 1896

our medium is not done

layout design

A C B A C B A C B A
C B

drawing by Dave Ellis novolume.co.uk

The Official Timeline of Web Page Layout

CSS Grid Flexbox Alignment Multicolumn Writing Modes

Object Fit Initial Letter Viewport Units Clip path & Masking
Shape outside Transforms

CSS Grid Basics

labs.jensimmons.com

labs.jensimmons.com/2017/01-003.html

.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); // nothing
about rows } .item { // nothing about item placement }

Container Item Item Item

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

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

1. Vertical White Space

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

The Vignelli Canon

explicit vs. implicit

You deﬁne !e size and/or number of rows and/or columns
Let !e browser deﬁne number or size of rows (or columns)

Place each "em   into a speciﬁc   cell or
area Let !e browser place every!ing using auto-placement algor"hm

ul { display: grid; grid-template-columns: repeat(5, 16vw); grid-template-rows: repeat(12, 16vw);
grid-gap: 2vw; } li:nth-child(1) { grid-row-start: 1; grid-column-start: 2; }

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

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

2. Overlap

li:nth-child(1) { grid-row: 1 / 4; grid-column: 1 / 4;
} li:nth-child(2) { grid-row: 3 / 6; grid-column: 3 / 6; }

From Michael Bierut, How To

3, The Viewport

storyboards

Storyboards for Star Wars, directed by George Lucas. Spartacus, directed
by Stanley Kubrick. Storyboards created by Saul Bass.

Alignment Viewport Units

start center end align-items:

start center end justify-items:

Viewport Units 50vh 25vh 50vw 25vh 50vw

Viewport Units 50vmin 100vh

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?

The Viewport

4. Flexibility

px em % pixels (or rem) percents 60px 10em 20%

min-content max-content 1fr

This is a phrase with several words. This is a
phrase with several words. This is a phrase with several words.

fr unit = “fraction”

100% 33% 33% 33%

100% 33% 33% 33% 2% 2%

100% 32% 32% 32% 2% 2% 100% – 4% =
96% = 32% 3 3

100% 32% 32% 32% 2em 2em @media (min-width: 600px) {
.box { width: calc(100-(2*2em)/3)%;}} @media (min-width: 800px) { .box { width: calc(100-(3*2em)/4)%;}} @media (min-width: 400px) { .box { width: calc(100-(1*2em)/2)%;}}

100% 1fr 1fr 1fr 2em 2em

100px 1fr 1fr 1fr 1fr 100px

2fr 1fr 50px 1fr min-content

3fr 1.2fr 0.5fr 1.2fr 1fr

markboulton.co.uk/journal/five-simple-steps-to- designing-grid-systems-part-1

alistapart.com/article/content-out-layout

Verticality

Density

Asymmetry

Visual Hierarchy

Practical: Card Layouts

FAQ: Flexbox vs. CSS Grid?

Flexbox lines things up  in one direction

Grid lines things up  in two directions

Flexbox

Grid Flexbox

Both superpowers are useful. Which do you want?

FAQ: What about IE?

// simplified layout // for older browsers @supports (display: grid)
{ // code for newer browsers // including overrides }

hacks.mozilla.org/2016/08/using-feature-queries-in-css

rachelandrew.co.uk/archives/2016/11/26/should-i-try- to-use-the-ie-implementation-of-css-grid-layout

developer.microsoft.com/en-us/microsoft-edge/platform/status/gridupdate/?q=grid%20update

wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6514853-update-css-grid

For more…

labs.jensimmons.com

jensimmons.com/post/feb-27-2017/learn-css-grid

Modern Layouts:   Getting Out of Our Ruts Revolutionize Your
Page:   Real Art Direction on the Web 2015 2016 available on jensimmons.com

www.layout.land

jensimmons.com @jensimmons layout.land labs.jensimmons.com

Designing with Grid — for UIE's All You Can Learn

Designing with Grid — for UIE's All You Can Learn

More Decks by Jen Simmons

Other Decks in Design

Featured

Transcript