How New CSS Is Changing Everything A bout Graphic Design on the Web W3C Publishing Summit
@jenSimmons
Slide 1
Slide 2
@jensimmons
Slide 3
Layout & The Web
Slide 4
Stephen Waller at Enhance Conf expressing how BORED he is with web design today.
Slide 5
Slide 6
drawing by Dave Ellis novolume.co.uk
Slide 7
Slide 8
Slide 9
Slide 10
Slide 11
Slide 12
Slide 13
Slide 14
Slide 15
Slide 16
The web wasn’t
always like t his
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
What Happe ned?
Slide 35
Slide 36
Slide 37
Slide 38
Slide 39
Slide 40
CSS F loats
Slide 41
Slide 42
The Official Timeline of Web Page Layout
The
No-Layout
Layout
Table -based
Layouts
Hand -coded
Float Layouts
F ramework
Layouts
Amazing
Future!
Slide 43
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 44
This ne w CSS
changes everything
in web layout.
Slide 45
Slide 46
Slide 47
Slide 48
Hot metal composition: Pasteup :: Floats : CSS Grid
Slide 49
labs.jensimmons.com
Slide 50
Slide 51
Slide 52
Slide 53
Slide 54
Slide 55
Slide 56
Slide 57
Slide 58
Slide 59
photo by Brad Frost, 2012, CC BY 2.0
Slide 60
Slide 61
Slide 62
Slide 63
Slide 64
Slide 65
Slide 66
Slide 67
Slide 68
Slide 69
Slide 70
Slide 71
Slide 72
Slide 73
Slide 74
Slide 75
Slide 76
labs.jensimmons.com/2017/01-008.html
Slide 77
labs.jensimmons.com/2017/01-008.html
Slide 78
labs.jensimmons.com/2017/01-008.html
Slide 79
Tools
Slide 80
CSS Shape s
Slide 81
Slide 82
img {
float: left;
shape-outside: circle();
}
Slide 83
img {
width: 200px;
margin: 0 1.5em 0.5em 0;
float: left; }
Slide 84
img {
width: 200px;
margin: 0 1.5em 0.5em 0;
float: left; shape-outside: circle() ; } There is a prefix: -webkit-shape-outside: circle(); *
Slide 85
img { max-width: 600px; float: left; margin-left: -26%;
shape-outside:polygon(
nonzero, -69.6% 101.25%, -84.35% 24.5%, 1.65% 4%, 23.3% 14.25%, 40.4% 13.5%, 43% 13.25%, 57.1% 16.5%, 62.7% 27%, 74.5% 32.25%, 78.15% 42.5%, 80.1% 49.25%, 77.15% 58.75%, 92.25% 68.25%, 92.9% 82.25%, 75.5% 92.5%, 51.55% 90.75%, -5.6% 101.25%
); }
Slide 86
Slide 87
Initial Let ter
Slide 88
Slide 89
Slide 90
p::first-letter {
color: rgba(255,190,150,0.9);
font-weight: bold;
margin-right: 0.5em; initial-letter: 4;
}
Slide 91
Vie wpor t Units
Slide 92
labs.jensimmons.com/2017/01-008.html
Slide 93
Slide 94
Viewport Units 50vmin 10 0 v h
Slide 95
Viewport Units 50vh 25vh 50vw 25vh 50vw
! at dang “fold ”
Slide 96
Fixed Size
Slide 97
Responsive Web Design
Slide 98
The New CSS Layout
Slide 99
Object Fit
Slide 100
Slide 101
Slide 102
Slide 103
Slide 104
img { width: 50%; height: 400px; object-fit: cover; }
Slide 105
Slide 106
Slide 107
Writing Mode
Slide 108
Slide 109
inline direction When I’m writing or reading this is the way the characters flow
Slide 110
<p
>
<p
>
<p
>
<p
>
block
flow
direction
Slide 111
A character orientation
Slide 112
block
direction
inline direction
A
character orientation
Slide 113
SYSTEMS LIKE LATIN
block
direction
inline direction
A
character
orientation
Slide 114
Slide 115
HAN-BASED SYSTEMS
block
direction
inline direction
*Chinese, Japanese, Korean & more
Slide 116
Slide 117
HAN-BASED SYSTEMS
block
direction
inline direction
block
direction
inline direction
*Chinese, Japanese, Korean & more
Slide 118
THREE OPTIONS FOR WRITING-MODE
writing-mode:
vertical-lr;
writing-mode:
vertical-rl;
toggle w/dir attribute
in HTML +
unicode
writing-mode:
horizontal-tb;
Slide 119
TWO MORE (FUTURE) OPTIONS FOR WRITING-MODE
block
direction
inline direction
writing-mode:
sideways-lr;
block
direction
inline direction
writing-mode:
sideways-rl;
creates a
horizontal
typographic mode only A A
Slide 120
chenhuijing.com/zh-type
Slide 121
Slide 122
h1:nth-child(2) { writing-mode: vertical-rl; }
Slide 123
CSS Grid
Slide 124
Grid
Slide 125
.container {
display: grid;
grid-template-columns:
1fr 1fr 1fr 1fr;
grid-template-rows:
1fr 1fr 1fr 1fr;
}
.item {
grid-row: 1 / 3;
grid-column: 2 / 4;
}
1
2
3
4
1
2
3
4
5
grid-row: 1 / 3;
grid-column: 2 / 4; 5
Slide 126
Row s and Columns
Slide 127
Slide 128
ROWS!!!!!!!!!!!
Slide 129
Slide 130
White S pace
Slide 131
“
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 132
Slide 133
The Vignelli Canon
Slide 134
Slide 135
Slide 136
Overlap
Slide 137
Slide 138
Slide 139
Tracks don’t have to all
be t he same size.
Slide 140
Slide 141
Slide 142
Slide 143
Slide 144
from alistapart.com/article/content-out-layout
Slide 145
The New F lexibility
Slide 146
grid-template-columns: 100px 1fr 1fr minmax(40ch, 65ch) 1fr; 1fr 1fr 10 0 px 1fr minmax(40ch, 65ch)
Slide 147
Slide 148
“pi xel perfect ”
Slide 149
What happe ns whe n par ts of
the content / interface are ‘missing’?
Or are shorter / longer
than ‘ideal’?
Slide 150
Design the flexibility model.
Slide 151
For more…
Slide 152
Slide 153
nightly.mozilla.org
Slide 154
labs.jensimmons.com
Slide 155
jensimmons.com
Slide 156
Modern Layouts: Getting Out of Our Ruts Revolutionize Your Page: Real Art Direction on the Web 2015 2016 available on jensimmons.com
Slide 157
jensimmons.com
@jensimmons layout.land
labs.jensimmons.com Thanks!
