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

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.”

Brauser Support

9+* *

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

TYPOGRAPHIE ANGEBEN VON EL LISSITZKY HERAUSGEBER K. SCHWITTERS

BAND 2, NR. 8/9

APRIL JULI 1924



BAND 2, NR. 8/9

APRIL JULI 1924

order: 1; order: 2;



BAND

2, NR. 8/9

APRIL JU

LI

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



BAND

2, NR. 8/9

APRIL JU

LI

position: absolute;



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 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);

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

/* no transform */

transform: perspective(500vw);



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

.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

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


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(); }

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.



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.

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

Documents