Designing With Grid An Event Apart Denver 2017 @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
Designing custom layout palet tes
is t he ke y to t he nex t
major phase of web design.
Slide 46
The Official Timeline of Web Page Layout
The
No-Layout
Layout
Table -based
Layouts
Hand -coded
Float Layouts
F ramework
Layouts
Amazing
Future!
Slide 47
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 48
This ne w CSS
changes everything
in web layout.
Slide 49
CSS Grid
Slide 50
Nature of
CSS Grid
Slide 51
(Let
s bust some a ssumptions) ’
Slide 52
explicit vs. implicit
Slide 53
You define
"
e size and/or
number of rows
and/or
columns
Let
"
e browser
define number or
size of rows
or columns
Slide 54
P lace each
em
into a specific
cell or area
Let
"
e browser
place each
em using
auto-placement
a
lgor
hm
Slide 55
Row s and Columns
Slide 56
ROWS!!!!!!!!!!!
Slide 57
Slide 58
Slide 59
Tracks don’t have to all
be t he same size.
Slide 60
Slide 61
Slide 62
Conte nt sized by
t he size of a track.
Slide 63
Tracks sized by
t he size of c onte nt.
Slide 64
portion of
available
space —
2 parts
set by
content
size
fixed
portion of
available
space —
1 part
Slide 65
Content doesn’t have
to fill a track.
Slide 66
Slide 67
Slide 68
start
center
end
justify
-items:
s t r e t c
h
Slide 69
start center end align-items: s t r e t c h
Slide 70
Slide 71
Slide 72
Y
ou can use Grid
to line t hings up.
Or not.
Slide 73
What shall we do
with C
SS
Grid?
Slide 74
How do we know where to put things?
Slide 75
Slide 76
visual hierarchy
Slide 77
visual hierarchy Lorem ipsum dolor sit amet FUSCE UT TURPIS SIT AMET
Slide 78
symmetry
Slide 79
asymmetry
Slide 80
symmetry
Slide 81
asymmetry
Slide 82
proxim
y
Slide 83
proxim
y
Slide 84
de n s
y
Slide 85
de n s
y
Slide 86
My dee p r espect for form and positive and negative space comes fr om 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 m akes 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 makes you feel ‘oh, that ’s so good’. — P laton, photographer “ Abstract, Art of Design, season 1 episode 7
Slide 87
Graphic design principles
to
the web
Slide 88
Graphic design principles of the web
Slide 89
labs.jensimmons.com
Slide 90
What I ’ve Discovered
in
Six
parts
Slide 91
- O v e r l a p
Slide 92
from Designing the Editorial Experience, Sue Apfelbaum and Juliette Cezzar
Slide 93
labs.jensimmons.com/2017/01-003.html
Slide 94
Slide 95
labs.jensimmons.com/2017/01-002 .html
Slide 96
labs.jensimmons.com/2017/01-002 .html
Slide 97
labs.jensimmons.com/2017/01-018.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
storyboards
Slide 111
Storyboards for
Star Wars,
directed by George Lucas.
Spartacus,
directed by Stanley Kubrick.
Storyboards created by Saul Bass .
Slide 112
Slide 113
Slide 114
Fixed Size
Slide 115
Responsive Web Design
Slide 116
The New Flexibility
Slide 117
labs.jensimmons.com/2017/01-008.html
Slide 118
labs.jensimmons.com/2017/01-008.html
Slide 119
labs.jensimmons.com/2017/01-008.html
Slide 120
Grid rows & columns Alignment
Viewport Units
Slide 121
labs.jensimmons.com/2017/01-010.html
Slide 122
Viewport Units 50vh 25vh 50vw 25vh 50vw
" at dang “fold ”
Slide 123
Viewport Units 50vmin 10 0 v h
Slide 124
Slide 125
Slide 126
Framing
Slide 127
Slide 128
Slide 129
Slide 130
Filmic Language
Slide 131
Webic Language
Slide 132
What does it mean to have a
reading ex per ie nce wit h a frame ,
where things move in and out
of that frame?
Slide 133
What does it mean to have an interaction ex per ie nce wit h a frame , where things move in and out of that frame?
Slide 134
The Vie wpor t
Slide 135
- W h i t e S p a c e
Slide 136
labs.jensimmons.com/2017/01-003.html
Slide 137
Slide 138
Slide 139
“
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 140
Slide 141
Slide 142
Slide 143
Slide 144
Slide 145
Slide 146
Slide 147
Slide 148
Slide 149
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 150
Slide 151
labs.jensimmons.com/2017/01-021.html
Slide 152
labs.jensimmons.com/2017/01-021.html
Slide 153
Slide 154
Grid like a Modernist?
Slide 155
White Space
Slide 156
- V e r t i c a l i t y
Slide 157
Slide 158
Slide 159
Slide 160
- V e r t i c a l i t y
Slide 161
Slide 162
Slide 163
Slide 164
Slide 165
Slide 166
Slide 167
Slide 168
Slide 169
Slide 170
Slide 171
Slide 172
Slide 173
Slide 174
photo by Fan Ho
Slide 175
photo by Fan Ho
Slide 176
photos by Fan Ho
Slide 177
labs.jensimmons.com/2017/01-020.html
Slide 178
Slide 179
Verticality
Slide 180
- F l e x i b i l i t y
Slide 181
labs.jensimmons.com/2017/02-004.html
Slide 182
Slide 183
px em % pixels (or rem) percents 60px 10em 20%
Slide 184
min-content max-content fr minmax()
Slide 185
Slide 186
Slide 187
labs.jensimmons.com/2017/01-007 .html
Slide 188
Slide 189
This is a phrase with
several words.
This is
a
phrase
with
several
words.
This is a phrase with several words.
Slide 190
Slide 191
Slide 192
Slide 193
Slide 194
Slide 195
fr unit = “fraction”
Slide 196
Slide 197
10 0 % 33% 33% 33%
Slide 198
10 0 % 33.33333% 33.33333 % 33.33333 %
Slide 199
10 0 % 33.33333% 33.33333 % 33.33333 %
Slide 200
33.33333% 33.33333 % 33.33333 % 10 0 % 2% 2%
Slide 201
10 0 % 32% 32% 32% 2% 2% 100% – 4% = 96% = 32% 3 3
Slide 202
10 0 % 31. 3 3 3 % 31. 3 3 3 % 31. 3 3 3 % 3% 3% 100% – 6% = 94% = 31.333% 3 3
Slide 203
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 204
.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 205
.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 206
10 0 % 1fr 1fr 1fr 2em 2em
Slide 207
1fr 1fr 1fr 2em 2em 1fr + 1fr + 1fr = 3fr total therefore, 1fr = 1/3 of the space
Slide 208
1fr 1fr 1fr 2em 2em 1fr + 1fr + 1fr + 1fr = 4fr total therefore, now 1fr = 1/4 of the space 1fr 2em
Slide 209
10 0 p x 1fr 1fr 1fr 1fr 10 0 p x
Slide 210
2fr 1fr 50px 1fr min-content
Slide 211
6fr 2.4fr 1fr 2.4fr 2fr
Slide 212
Slide 213
from alistapart.com/article/content-out-layout
Slide 214
minmax()
Slide 215
labs.jensimmons.com/2017/01-003.html
Slide 216
Slide 217
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
// nothing about rows
}
.item {
// nothing about item placement
}
Slide 218
labs.jensimmons.com/2017/01-016.html
Slide 219
grid-template-columns: 100px 1fr 1fr minmax(40ch, 65ch) 1fr; 1fr 1fr 10 0 px 1fr minmax(40ch, 65ch)
Slide 220
Slide 221
“pi xel perfect ”
Slide 222
Not Your Father ’s Web Design Ethan’s Responsive
Slide 223
%
Slide 224
Program the flexibility model.
Slide 225
What happe ns whe n par ts of
the content / interface are ‘missing’?
Or are shorter / longer
than ‘ideal’?
Slide 226
Flexibility
Slide 227
- C r e a t i v i t y
Slide 228
labs.jensimmons.com/2017/01-004.html
Slide 229
Slide 230
- 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 231
Time to play. Time to learn.
Slide 232
Slide 233
nightly.mozilla.org
Slide 234
www.layout.land
Slide 235
labs.jensimmons.com
Slide 236
Modern Layouts: Getting Out of Our Ruts Revolutionize Your Page: Real Art Direction on the Web 2015 2016 available on jensimmons.com
Slide 237
jensimmons.com/post/feb-27-2017/learn-css-grid
Slide 238
developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout
Slide 239
Time to explore.
Slide 240
A
basic design is
functional.
A
great one will
say something.”
— Tinker Hat field,
shoe de signer for Nike
“
Slide 241
jensimmons.com
@jensimmons layout.land
labs.jensimmons.com Thanks!
