bauhaus in the browser v2 - polishingrevoltpuppy.com/files/bauhaus.pdf · paul klee. lászló...

BAUHAUs

IN

THE

ROWSERB

Wassily Kandinsky

Laszlo Moloy-Nagy

Chess Set by Josef Hartwig

Typeface by Herbert Bayer

BauhausBOW-HOWSS

Wikimedia Commons

Photo by Erich Consemöller. Chair by Marcel Breuer. Mask by Oskar Schlemmer. Dress fabric by Herbert Beyer.

Paul Klee

László Mololy-Nagy

Joost Schmidt

Bauhaus-Archiv

Justin McDowell

Viewport unitsMerz issue #8–9 by Kurt Schwitters

TransformsDie Frau Ohne Namen poster by Jan Tschichold

gridComposition II In Red, Blue, & Yellow by Piet Mondrian

ShapesMT 49 Tea Infuser by Marianne Brandt

MERZ

MERZMERZ

KURT SHVIT-ERS

Wikimedia Commons

Kurt Schwitters MER

Z

Kurt Schwitters

Viewport unitsMerz issue #8–9 by Kurt Schwitters

TransformsDie Frau Ohne Namen poster by Jan Tschichold

gridComposition II In Red, Blue, & Yellow by Piet Mondrian

ShapesMT 49 Tea Infuser by Marianne Brandt

vw1/100th of the width of the viewport

vmin1/100th of the smallest side of the viewport

vmax1/100th of the biggest side of the viewport

vh1/100th of the height of the viewport

vw1/100th of the width of the viewport

vmin1/100th of the smallest side of the viewport

vmax1/100th of the biggest side of the viewport

vh1/100th of the height of the viewport

Viewport-based Typography

The Old Way

—Sara Soueidan

“I’ve gotten some constructive, highly appreciated accessibility feedback from my blog readers about using vw for font sizes. Basically, don’t.”

20vw

20vw

Brauser Support

9+* *

Viewport unitsMerz issue #8–9 by Kurt Schwitters

TransformsDie Frau Ohne Namen poster by Jan Tschichold

gridComposition II In Red, Blue, & Yellow by Piet Mondrian

ShapesMT 49 Tea Infuser by Marianne Brandt

REDAKTION DES MERZVERLAGES KURT SCHWITTERS, HANNOVER, WALDHASENTSTR. 5"

TYPOGRAPHIE ANGEBEN VON EL LISSITZKY HERAUSGEBER K. SCHWITTERS

BAND 2, NR. 8/9

APRIL JULI 1924

REDAKTION DES MERZVERLAGES KURT SCHWITTERS, HANNOVER, WALDHASENTSTR. 5"

TYPOGRAPHIE ANGEBEN VON EL LISSITZKY HERAUSGEBER K. SCHWITTERS

BAND 2, NR. 8/9

APRIL JULI 1924

order: 1; order: 2;

REDAKTION DES MERZVERLAGES KURT SCHWITTERS, HANNOVER, WALDHASENTSTR. 5"

TYPOGRAPHIE ANGEBEN VON EL LISSITZKY HERAUSGEBER K. SCHWITTERS

BAND

2, NR. 8/9

APRIL JU

LI

position: absolute; transform: rotate(90deg); transform-origin: top left;

REDAKTION DES MERZVERLAGES KURT SCHWITTERS, HANNOVER, WALDHASENTSTR. 5"

TYPOGRAPHIE ANGEBEN VON EL LISSITZKY HERAUSGEBER K. SCHWITTERS

BAND

2, NR. 8/9

APRIL JU

LI

position: absolute;

REDAKTION DES MERZVERLAGES KURT SCHWITTERS, HANNOVER, WALDHASENTSTR. 5"

TYPOGRAPHIE ANGEBEN VON EL LISSITZKY HERAUSGEBER K. SCHWITTERS

BAND

2, NR. 8/9

APRIL JU

LI

top: 0;

REDAKTION DES MERZVERLAGES KURT SCHWITTERS, HANNOVER, WALDHASENTSTR. 5"

TYPOGRAPHIE ANGEBEN VON EL LISSITZKY HERAUSGEBER K. SCHWITTERS

BAND

2, NR. 8/9

APRIL JU

LI

top: 0;

RED

AKTI

ON

DES

MER

ZVER

LAG

ES

KURT

SC

HW

ITTE

RS, H

ANN

OVE

R, W

ALD

HAS

ENTS

TR. 5

"

BAND 2, NR. 8/9

APRIL JULI 1924

transform: rotate(-90deg); transform-origin: top left;

RED

AKTI

ON

DES

MER

ZVER

LAG

ES

KURT

SC

HW

ITTE

RS, H

ANN

OVE

R, W

ALD

HAS

ENTS

TR. 5

"

TYPO

GRA

PHIE

AN

GEB

EN V

ON

EL

LISS

ITZK

Y H

ERAU

SGEB

ER K

. SCH

WIT

TERS

BAND 2, NR. 8/9

APRIL JULI

transform: rotate(-90deg) translateX(-100%); transform-origin: top left;

RED

AKTI

ON

DES

MER

ZVER

LAG

ES

KURT

SC

HW

ITTE

RS, H

ANN

OVE

R, W

ALD

HAS

ENTS

TR. 5

"

TYPO

GRA

PHIE

AN

GEB

EN V

ON

EL

LISS

ITZK

Y H

ERAU

SGEB

ER K

. SCH

WIT

TERS

BAND 2, NR. 8/9

APRIL JULI

transform: rotate(-90deg) translateX(-100%); transform-origin: top left;

RED

AKTI

ON

DES

MER

ZVER

LAG

ES

KURT

SC

HW

ITTE

RS, H

ANN

OVE

R, W

ALD

HAS

ENTS

TR. 5

"

TYPO

GRA

PHIE

AN

GEB

EN V

ON

EL

LISS

ITZK

Y H

ERAU

SGEB

ER K

. SCH

WIT

TERS

BAND 2, NR. 8/9

APRIL margin-top: 4em;

Jan TschicholdYANN CHIK-OLD

Photo: Kurt Schwitters/Thames and Hudson

Design: Jan Tschichold

Perspective

Ratatouille

Child Perspective

transform: perspective(10em);

Parent PerspectiveChild Perspective

perspective: 10em;transform: perspective(10em);

Design: Jan Tschichold

header{ perspective: 100vw; perspective-origin: right top; }

/* no transform */

transform: perspective(500vw);

transform: perspective(150vw);

transform: perspective(100vw);

perspective

Distance from the 3D plane.

translateZ()

Distance along the z-axis of a 3D space.

zoom—perspective

Distance the lens zooms to capture the subject.

dolly—translateZ()

Physical distance from the subject.

Malcolm In The Middle

header{ perspective: 100vw; }

.title-box{ transform: rotateY(45deg) translate(2.6vw, 1.3em); }

10+*

Brauser Support

Piet MondrianPETE MON-DREE-AN

Thanks to Wikimedia Commons

Piet Mondrian

Viewport unitsMerz issue #8–9 by Kurt Schwitters

TransformsDie Frau Ohne Namen poster by Jan Tschichold

gridComposition II In Red, Blue, & Yellow by Piet Mondrian

ShapesMT 49 Tea Infuser by Marianne Brandt

<div class="mondrian"> <div class="a"></div> <div class="b"></div> <div class="c"></div> <div class="d"></div> <div class="e"></div> <div class="f"></div> <div class="g"></div> </div> <!-- We are now ready to make a Mondrian! -->

.mondrian{ display: grid; }

Piet Mondrian

22vw 65vw 7vw

Piet Mondrian

36vh

36vh

9.5vh

9.5vhPiet Mondrian

.grid{ display: grid; grid-template-columns: 22vw 65vw 7vw; grid-template-rows: 36vh 36vh 9.5vh 9.5vh; }

.grid{ display: grid; grid-gap: 3vh 3vw; grid-template-columns: 22vw 65vw 7vw; grid-template-rows: 36vh 36vh 9.5vh 9.5vh; }

.a{ /* Do nothing! */ }

.a

Piet Mondrian

.e{ /* Nothing for columns! */ grid-row-start: 3; grid-row-end: 5; }

.e

Row 3

Row 4

Row 2

Row 1

Piet Mondrian

.b{ /* 1 grid area, just need starting points. */ grid-column-start: 1; grid-row-start: 2; }

.c{ grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; }

.d,

.e{ /* Just need the row span! */ grid-row-start: 3; grid-row-end: 5; }

.b{ grid-column-start: 1; grid-row-start: 2; }

.c{ grid-column: 2 / 4; grid-row: 1 / 3; }

.d,

.e{ grid-row: 3 / 5; }

11* *

10

Brauser Support

—Hannes Meyer, Bauhaus Director

“Are you looking for truly equal opportunity as a student?”

Marianne Brandt

Photo: Pamono

MARY-ANN BRANT

Marianne Brandt

Viewport unitsMerz issue #8–9 by Kurt Schwitters

TransformsDie Frau Ohne Namen poster by Jan Tschichold

gridComposition II In Red, Blue, & Yellow by Piet Mondrian

ShapesMT 49 Tea Infuser by Marianne Brandt

shape-outsideHow text flows around the outside of a floated shape.

shape-insideHow text flows inside of a shape.

exclusionsHow text wraps around both sides of a shape.

Shapes Module Level 1

Shapes Module Level 2

Exclusions Module Level 1

shape-outsideHow text flows around the outside of a floated shape.

shape-insideHow text flows inside of a shape.

exclusionsHow text wraps around both sides of a shape.

Shapes Module Level 1

Shapes Module Level 2

Exclusions Module Level 1

.teapot{ float: right; shape-outside: content-box ellipse(); }

.teapot{ border-radius: 50%; float: right; shape-outside: content-box; }

ellipse()

circle()

inset()

polygon()

.teapot{ float: right; margin: 1em; shape-margin: 1em; shape-outside: ellipse(); }

Design: Jan Tschichold

shape-outsideHow text flows around the outside of a floated shape.

shape-insideHow text flows inside of a shape.

exclusionsHow text wraps around both sides of a shape.

Shapes Module Level 1

Shapes Module Level 2

Exclusions Module Level 1

Brauser Support

For Lauren Dimond

Photo: Lauren Dimond

1988–2016

Justin McDowell

revoltpuppy.com @revoltpuppy

Whoops! You’ve gone one slide too far.

Oh, now you’ve really done it.