Designing with Grid

Designing With Grid Ge nerate NYC

@jenSimmons

CSS Grid

Ou r medium is not done

CSS Gr id re volutionize s web de sign — page layout on the web.

Layout on the web

6

photo by Brad Frost, 2012, CC BY 2.0

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

starter-kit

Nicole Sullivan 2008 Ana Debenham 2011 Brad Frost 2013 D " igning Systems of Component s

c olor palet te typography palet te layout palet te

The Official Timeline of Web Page Layout

CSS Grid Flexbox Alignment Writing Modes Multicolumn Viewport Units Transforms Object Fit Clip-path
Masking Shape-outside Initial-letter

CSS Grid Flexbox Alignment Writing Modes Multicolumn Viewport Units Transforms Object Fit Clip-path
Masking Shape-outside Initial-letter Flow

Floats Block Inline Inline-block Display:table Margin Negative margins Padding everything else
in CSS

This ne w CSS re volutionize s
web page layout.

CSS Grid

labs.jensimmons.com

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

Grid Container

Grid Items

<body> <header>…</header> <main> <article> <h1> <p> <p> <p> <figure> <p> </article> </main> <aside>…</aside> <footer>…</footer> </body> body { display: grid; grid-template-columns: // some sort of code; }

<body> <header>…</header> <main> <article> <h1> <p> <p> <p> <figure> <p> </article> </main> <aside>…</aside> <footer>…</footer> </body> body { display: grid; grid-template-columns: // some sort of code; } article { display: grid; grid-template-columns: // some sort of code; }

.container { display: grid; grid-template-columns:
repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); } .item { grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } 1 2 3 4 2 3 4 1 5

Nature of C S S Grid

explicit vs. implicit

You define

e size and/or
number of rows
and/or
columns Let

e browser
define number or
size of rows (or columns)

P lace each $ em   into a specific   cell or area Let

e browser
place every

ing
using
auto-placement
a lgor $ hm

Row s and Columns

ROWS!!!!!!!!!!!

Tracks don’t have to all
be t he same size.

Conte nt sized by
t he size of a track.

Tracks sized by
t he size of c onte nt.

2 portions
of
available   space set by   content size fixed 1 portion of available   space

Content doesn’t have
to fill a track.

start center end justify -items: s t r e t c
h

start center end align-items: s t r e t c h

Y ou can use Grid
to line t hings up.
Or not.

What shall we do
with C SS Grid?

How do we know   where to put things?

visual hierarchy

visual hierarchy Lorem ipsum dolor sit amet FUSCE UT TURPIS SIT AMET

symmetry

asymmetry

symmetry

asymmetry

proxim $ y

de n s $ y

My dee p r espect for form and positive and negative space comes from studying Frank Lloyd Wright ’s idea of com pr ession and ex pansion. You walk into a F.L.W. building and the entrance way is so sm all it makes you almost dip your head. And then as soon as you walk into the m ain r oom, he blows up the space, and it m akes you fee l ‘oh, that ’s so good’. — P laton, photographer “

Graphic design for the web

Graphic design of the web

labs.jensimmons.com

What I ’ve Discovered
in 6 parts

O v e r l a p

from Designing the Editorial Experience, Sue Apfelbaum and Juliette Cezzar

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

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

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

labs.jensimmons.com/2017/02-001 .html

Overlap

2, The Vie wpor t

storyboards

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

Storyboards created by Saul Bass .

Grid rows & columns Alignment

Viewport Units

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

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

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

Viewport Units 50vmin 10 0 v h

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 Vie wpor t

W h i t e S p a c e

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

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

White Space

V e r t i c a l i t y

photo by Fan Ho

photos by Fan Ho

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

Verticality

F l e x i b i l i t y

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

min-content max-content fr minmax()

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

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

fr unit = “fraction”

10 0 % 33% 33% 33%

10 0 % 33.33333% 33.33333 % 33.33333 %

10 0 % 33% 33% 33% 2% 2%

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

10 0 % 31. 3 3 3 % 31. 3 3 3 % 31. 3 3 3 % 3% 3% 100% – 6% = 94% = 31.333% 3 3

10 0 % 31. 6 6 6 % 31. 6 6 6 % 31. 6 6 6% 2.5% 2.5% 100% – 5% = 95% = 31.666666666666666% 3 3

10 0 % x x x 2em 2em @media (min-width: 600px) { .box { width: calc(100-(22em)/3)%;}} @media (min-width: 800px) { .box { width: calc(100-(32em)/4)%;}} @media (min-width: 1000px) { .box { width: calc(100-(42em)/5)%;}} @media (min-width: 400px) { .box { width: calc(100-(12em)/2)%;}}

10 0 % 1fr 1fr 1fr 2em 2em

1fr 1fr 1fr 2em 2em 1fr + 1fr + 1fr = 3fr total therefore, 1fr = 1/3 of the space

1fr 1fr 1fr 2em 2em 1fr + 1fr + 1fr + 1fr = 4fr total therefore, now 1fr = 1/4 of the space 1fr 2em

10 0 p x 1fr 1fr 1fr 1fr 10 0 p x

2fr 1fr 50px 1fr min-content

6fr 2.4fr 1fr 2.4fr 2fr

from alistapart.com/article/content-out-layout

minmax()

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

grid-template-columns: 100px 1fr 1fr minmax(40ch, 65ch) 1fr; 1fr 1fr 10 0 px 1fr minmax(40ch, 65ch)

“pi xel perfect ”

What happe ns whe n par ts of
the content / interface are ‘missing’? Or are shorter / longer
than ‘ideal’?

Design the flexibility model.

Flexibility

C r e a t i v i t y

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

Time to play.   Time to learn.

www.layout.land

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

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

labs.jensimmons.com

Time to explore.

A basic design is
functional.   A great one will   say something.” — Tinker Hat field,
shoe de signer for Nike “

jensimmons.com

@jensimmons layout.land

labs.jensimmons.com