How New CSS Is Changing Everything About Graphic Design on the Web

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

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

<p > <p > <p > <p > block flow direction

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!