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