Designing with Grid

A presentation at An Event Apart San Francisco in October 2017 in San Francisco, CA, USA by Jen Simmons

Slide 1

Designing With Grid An Event Apart San F rancisco @jenSimmons

Slide 2

CSS Grid

Slide 3

The Kiss, 1896

Slide 4

Slide 5

Ou r medium is not done

Slide 6

Layout on the web

Slide 7

Slide 8

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

photo by Brad Frost, 2012, CC BY 2.0

Slide 34

Slide 35

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

Slide 36

Slide 37

Slide 38

Slide 39

Slide 40

starter-kit framework

Slide 41

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

Slide 42

BUTTON Headline 1 Headline 2 This is a paragraph of text. Do we like how this works? Yes, please. Ok.
Do all the text like this. BUTTON BUTTON Headline 1 This is a paragraph of text. Do we like how this works? Yes, please. Ok.
Do all the text like this. BUTTON

Slide 43

Headline This is a paragraph of text. Do we like how this works? Yes, please. Ok. Do all the text like this. BUTTON Headline This is a paragraph of text. Do we like how this works? Yes, please. Ok. Do all the text like this. BUTTON Headline This is a paragraph of text. Do we like how this works? Yes, please. Ok. Do all the text like this. BUTTON Headline This is a paragraph of text. Do we Headline This is a paragraph of text. Do we Headline This is a paragraph of text. Do we

Slide 44

c olor palet te typography palet te layout palet te

Slide 45

The Official Timeline of Web Page Layout The
No-Layout
Layout Table -based Layouts Hand -coded Float Layouts F ramework Layouts Amazing
Future!

Slide 46

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 47

This ne w CSS
changes everything
in web layout.

Slide 48

CSS Grid

Slide 49

Nature of
CSS Grid

Slide 50

(Let

s bust some a ssumptions) ’

Slide 51

explicit vs. implicit

Slide 52

You define
" e size and/or
number of rows
and/or
columns Let " e browser
define number or
size of rows or columns

Slide 53

P lace each

em   into a specific   cell or area Let " e browser
place each

em using
auto-placement
a lgor

Slide 54

Row s and Columns

Slide 55

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

Slide 56

Slide 57

Slide 58

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

Slide 59

Slide 60

Slide 61

Conte nt sized by
t he size of a track.

Slide 62

Tracks sized by
t he size of c onte nt.

Slide 63

portion of
available   space —
2 parts set by   content size fixed portion of
available   space —

1 part

Slide 64

Content doesn’t have
to fill a track.

Slide 65

Slide 66

Slide 67

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

Slide 68

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

Slide 69

Slide 70

Slide 71

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

Slide 72

What shall we do
with C SS Grid?

Slide 73

How do we know   where to put things?

Slide 74

Slide 75

visual hierarchy

Slide 76

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

Slide 77

symmetry

Slide 78

asymmetry

Slide 79

symmetry

Slide 80

asymmetry

Slide 81

proxim

Slide 82

proxim

Slide 83

de n s

Slide 84

de n s

Slide 85

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 86

Graphic design for the web

Slide 87

Graphic design of the web

Slide 88

labs.jensimmons.com

Slide 89

What I ’ve Discovered
in Six parts

Slide 90

O v e r l a p

Slide 91

from Designing the Editorial Experience, Sue Apfelbaum and Juliette Cezzar

Slide 92

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

Slide 93

Slide 94

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

Slide 95

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

Slide 96

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

Slide 97

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

Slide 98

Overlap

Slide 99

2, The Vie wpor t

Slide 100

Slide 101

Slide 102

Slide 103

Slide 104

Slide 105

Slide 106

Slide 107

Slide 108

Slide 109

Slide 110

Slide 111

storyboards

Slide 112

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

Storyboards created by Saul Bass .

Slide 113

Slide 114

Slide 115

Slide 116

Grid rows & columns Alignment

Viewport Units

Slide 117

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

Slide 118

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

Slide 119

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

" at dang “fold ”

Slide 120

Viewport Units 50vmin 10 0 v h

Slide 121

Slide 122

Slide 123

Framing

Slide 124

Slide 125

Slide 126

Slide 127

Filmic Language

Slide 128

Webic Language

Slide 129

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

Slide 130

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

Slide 131

Slide 132

The Vie wpor t

Slide 133

W h i t e S p a c e

Slide 134

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

Slide 135

Slide 136

Slide 137

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

Slide 139

Slide 140

Slide 141

Slide 142

Slide 143

Slide 144

Slide 145

Slide 146

Slide 147

Control the size of the page? Nope. 2. Line things up? Yes. Easy. 3. Create white space? Yes, absolutely. 4. Maintain aspect ratios? Nope. Not yet.

Slide 148

Slide 149

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

Slide 150

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

Slide 151

Slide 152

Grid like a Modernist?

Slide 153

White Space

Slide 154

V e r t i c a l i t y

Slide 155

Slide 156

Slide 157

Slide 158

V e r t i c a l i t y

Slide 159

Slide 160

Slide 161

Slide 162

Slide 163

Slide 164

Slide 165

Slide 166

Slide 167

Slide 168

Slide 169

Slide 170

Slide 171

Slide 172

photo by Fan Ho

Slide 173

photo by Fan Ho

Slide 174

photos by Fan Ho

Slide 175

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

Slide 176

Slide 177

Verticality

Slide 178

F l e x i b i l i t y

Slide 179

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

Slide 180

Slide 181

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

Slide 182

min-content max-content fr minmax()

Slide 183

Slide 184

Slide 185

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

Slide 186

Slide 187

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

Slide 188

Slide 189

Slide 190

Slide 191

Slide 192

Slide 193

fr unit = “fraction”

Slide 194

Slide 195

10 0 % 33% 33% 33%

Slide 196

10 0 % 33.33333% 33.33333 % 33.33333 %

Slide 197

10 0 % 33.33333% 33.33333 % 33.33333 %

Slide 198

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

Slide 199

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

Slide 200

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

Slide 201

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 202

.box { width: calc(100-(22em)/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-(1*2em)/2)%;}}

Slide 203

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

Slide 204

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

Slide 205

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

Slide 206

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

Slide 207

2fr 1fr 50px 1fr min-content

Slide 208

6fr 2.4fr 1fr 2.4fr 2fr

Slide 209

Slide 210

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

Slide 211

minmax()

Slide 212

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

Slide 213

Slide 214

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