Designing with Grid

A presentation at Generate Conf in April 2017 in New York, NY, USA by Jen Simmons

Slide 1

Designing With Grid Ge nerate NYC

@jenSimmons

Slide 2

CSS Grid

Slide 3

Slide 4

Slide 5

Slide 6

Ou r medium is not done

Slide 7

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

Slide 8

Layout on the web

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

Slide 16

Slide 17

Slide 18

Slide 19

Slide 20

Slide 21

Slide 22

Slide 23

Slide 24

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29

Slide 30

Slide 31

Slide 32

Slide 33

Slide 34

Slide 35

Slide 36

photo by Brad Frost, 2012, CC BY 2.0

Slide 37

Slide 38

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

Slide 39

Slide 40

Slide 41

Slide 42

Slide 43

starter-kit

Slide 44

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

Slide 45

c olor palet te typography palet te layout palet te

Slide 46

Slide 47

The Official Timeline of Web Page Layout

Slide 48

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

Slide 49

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

Slide 50

This ne w CSS re volutionize s
web page layout.

Slide 51

Slide 52

CSS Grid

Slide 53

Slide 54

Slide 55

labs.jensimmons.com

Slide 56

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

Slide 57

Grid Container

Slide 58

Grid Items

Slide 59

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

Slide 60

Slide 61

.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

Slide 62

Nature of C S S Grid

Slide 63

explicit vs. implicit

Slide 64

You define

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

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

Slide 65

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

e browser
place every

ing
using
auto-placement
a lgor $ hm

Slide 66

Row s and Columns

Slide 67

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

Slide 68

Slide 69

Slide 70

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

Slide 71

Slide 72

Slide 73

Conte nt sized by
t he size of a track.

Slide 74

Tracks sized by
t he size of c onte nt.

Slide 75

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

Slide 76

Content doesn’t have
to fill a track.

Slide 77

Slide 78

Slide 79

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

Slide 80

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

Slide 81

Slide 82

Slide 83

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

Slide 84

What shall we do
with C SS Grid?

Slide 85

How do we know   where to put things?

Slide 86

Slide 87

visual hierarchy

Slide 88

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

Slide 89

symmetry

Slide 90

asymmetry

Slide 91

symmetry

Slide 92

asymmetry

Slide 93

proxim $ y

Slide 94

proxim $ y

Slide 95

de n s $ y

Slide 96

de n s $ y

Slide 97

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 “

Slide 98

Graphic design for the web

Slide 99

Graphic design of the web

Slide 100

labs.jensimmons.com

Slide 101

What I ’ve Discovered
in 6 parts

Slide 102

O v e r l a p

Slide 103

from Designing the Editorial Experience, Sue Apfelbaum and Juliette Cezzar

Slide 104

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

Slide 105

Slide 106

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

Slide 107

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

Slide 108

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

Slide 109

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

Slide 110

Overlap

Slide 111

2, The Vie wpor t

Slide 112

Slide 113

Slide 114

Slide 115

Slide 116

Slide 117

Slide 118

Slide 119

Slide 120

Slide 121

Slide 122

storyboards

Slide 123

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

Storyboards created by Saul Bass .

Slide 124

Slide 125

Slide 126

Slide 127

Grid rows & columns Alignment

Viewport Units

Slide 128

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

Slide 129

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

Slide 130

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

Slide 131

Viewport Units 50vmin 10 0 v h

Slide 132

Slide 133

Slide 134

Slide 135

Framing

Slide 136

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

Slide 137

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

Slide 138

The Vie wpor t

Slide 139

W h i t e S p a c e

Slide 140

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

Slide 141

Slide 142

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

Slide 143

Slide 144

White Space

Slide 145

V e r t i c a l i t y

Slide 146

Slide 147

Slide 148

Slide 149

photo by Fan Ho

Slide 150

photos by Fan Ho

Slide 151

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

Slide 152

Slide 153

Verticality

Slide 154

F l e x i b i l i t y

Slide 155

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

Slide 156

min-content max-content fr minmax()

Slide 157

Slide 158

Slide 159

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

Slide 160

Slide 161

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

Slide 162

Slide 163

Slide 164

Slide 165

fr unit = “fraction”

Slide 166

Slide 167

10 0 % 33% 33% 33%

Slide 168

10 0 % 33.33333% 33.33333 % 33.33333 %

Slide 169

10 0 % 33.33333% 33.33333 % 33.33333 %

Slide 170

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

Slide 171

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

Slide 172

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

Slide 173

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

Slide 174

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)%;}}