A presentation at W3C Publishing Summit in in San Francisco, CA, USA by Jen Simmons
How New CSS Is Changing Everything A bout Graphic Design on the Web W3C Publishing Summit
@jenSimmons
@jensimmons
Layout & The Web
Stephen Waller at Enhance Conf expressing how BORED he is with web design today.
drawing by Dave Ellis novolume.co.uk
The web wasn’t
always like t his
What Happe ned?
CSS F loats
The Official Timeline of Web Page Layout
The
No-Layout
Layout
Table -based
Layouts
Hand -coded
Float Layouts
F ramework
Layouts
Amazing
Future!
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
This ne w CSS
changes everything
in web layout.
Hot metal composition: Pasteup :: Floats : CSS Grid
labs.jensimmons.com
photo by Brad Frost, 2012, CC BY 2.0
labs.jensimmons.com/2017/01-008.html
labs.jensimmons.com/2017/01-008.html
labs.jensimmons.com/2017/01-008.html
Tools
CSS Shape s
img {
float: left;
shape-outside: circle();
}
img {
width: 200px;
margin: 0 1.5em 0.5em 0;
float: left; }
img {
width: 200px;
margin: 0 1.5em 0.5em 0;
float: left; shape-outside: circle() ; } There is a prefix: -webkit-shape-outside: circle(); *
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%
); }
Initial Let ter
p::first-letter {
color: rgba(255,190,150,0.9);
font-weight: bold;
margin-right: 0.5em; initial-letter: 4;
}
Vie wpor t Units
labs.jensimmons.com/2017/01-008.html
Viewport Units 50vmin 10 0 v h
Viewport Units 50vh 25vh 50vw 25vh 50vw
! at dang “fold ”
Fixed Size
Responsive Web Design
The New CSS Layout
Object Fit
img { width: 50%; height: 400px; object-fit: cover; }
Writing Mode
inline direction When I’m writing or reading this is the way the characters flow
A character orientation
block
direction
inline direction
A
character orientation
SYSTEMS LIKE LATIN
block
direction
inline direction
A
character
orientation
HAN-BASED SYSTEMS
block
direction
inline direction
*Chinese, Japanese, Korean & more
HAN-BASED SYSTEMS
block
direction
inline direction
block
direction
inline direction
*Chinese, Japanese, Korean & more
THREE OPTIONS FOR WRITING-MODE
writing-mode:
vertical-lr;
writing-mode:
vertical-rl;
toggle w/dir attribute
in HTML +
unicode
writing-mode:
horizontal-tb;
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
chenhuijing.com/zh-type
h1:nth-child(2) { writing-mode: vertical-rl; }
CSS Grid
Grid
.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
Row s and Columns
ROWS!!!!!!!!!!!
White S pace
“
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.
The Vignelli Canon
Overlap
Tracks don’t have to all
be t he same size.
from alistapart.com/article/content-out-layout
The New F lexibility
grid-template-columns: 100px 1fr 1fr minmax(40ch, 65ch) 1fr; 1fr 1fr 10 0 px 1fr minmax(40ch, 65ch)
“pi xel perfect ”
What happe ns whe n par ts of
the content / interface are ‘missing’?
Or are shorter / longer
than ‘ideal’?
Design the flexibility model.
For more…
nightly.mozilla.org
labs.jensimmons.com
jensimmons.com
Modern Layouts: Getting Out of Our Ruts Revolutionize Your Page: Real Art Direction on the Web 2015 2016 available on jensimmons.com
jensimmons.com
@jensimmons layout.land
labs.jensimmons.com Thanks!
for free. You
can too.