Designing With Grid An Event Apart San F rancisco @jenSimmons
Slide 1
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
hm
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
y
Slide 82
proxim
y
Slide 83
de n s
y
Slide 84
de n s
y
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
}
Slide 215
labs.jensimmons.com/2017/01-016.html
Slide 216
grid-template-columns: 100px 1fr 1fr minmax(40ch, 65ch) 1fr; 1fr 1fr 10 0 px 1fr minmax(40ch, 65ch)
Slide 217
Slide 218
“pi xel perfect ”
Slide 219
What happe ns whe n par ts of
the content / interface are ‘missing’?
Or are shorter / longer
than ‘ideal’?
Slide 220
Design the flexibility model.
Slide 221
Flexibility
Slide 222
- C r e a t i v i t y
Slide 223
labs.jensimmons.com/2017/01-004.html
Slide 224
Slide 225
- O v e r l a p
- The Vie wpor t
- W h i t e S p a c e
- V e r t i c a l i t y
- F l e x i b i l i t y
- C r e a t i v i t y
Slide 226
Time to play. Time to learn.
Slide 227
nightly.mozilla.org
Slide 228
www.layout.land
Slide 229
labs.jensimmons.com
Slide 230
Modern Layouts: Getting Out of Our Ruts Revolutionize Your Page: Real Art Direction on the Web 2015 2016 available on jensimmons.com
Slide 231
jensimmons.com/post/feb-27-2017/learn-css-grid
Slide 232
developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout
Slide 233
Time to explore.
Slide 234
A
basic design is
functional.
A
great one will
say something.”
— Tinker Hat field,
shoe de signer for Nike
“
Slide 235
jensimmons.com
@jensimmons layout.land
labs.jensimmons.com Thanks!
