bauhaus in the browser v2 - polishingrevoltpuppy.com/files/bauhaus.pdf · paul klee. lászló...
Post on 12-Jun-2020
3 Views
Preview:
TRANSCRIPT
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.
top related