Grid to the future

1855: table layout https://codepen.io/gunnarbittersmann/pen/LBNNbv 1955: floats https://codepen.io/gunnarbittersmann/pen/gjrRwG 1985: Bootstrap https://codepen.io/gunnarbittersmann/pen/djMMdy 2015: flexbox https://codepen.io/gunnarbittersmann/pen/RBaZxE 2018: grid https://codepen.io/gunnarbittersmann/pen/bjEXPe

Grid page layout https://codepen.io/gunnarbittersmann/pen/gjwedW Bootstrap page layout https://codepen.io/gunnarbittersmann/pen/WKGzYz

Can I use? .com

Do websites need to look exactly the same in every browser? .com

“Where we’re going, we don’t need rows.”

<main class=”container-fluid”> < <ul id=”gallery” class=”row list-unstyled”> <li class=”col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 d-flex flex-column pb-5”> <img class=”img-fluid” src=”…” alt=”“/> <p>…</p> <button class=”align-self-end mt-auto”>Back to the future</button> </li> <li class=”col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 d-flex flex-column pb-5”> <img class=”img-fluid” src=”…” alt=”“/> <p>…</p> <button class=”align-self-end mt-auto”>Back to the future</button> </li> ⋮ </ul> </main>

<main class=”container-fluid”> <ul id=”gallery” class=”row list-unstyled”> <li class=”col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 d-flex flex-column pb-5”> <img class=”img-fluid” src=”…” alt=”“/> <p>…</p> <button class=”align-self-end mt-auto”>Back to the future</button> </li> <li class=”col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 d-flex flex-column pb-5”> <img class=”img-fluid” src=”…” alt=”“/> <p>…</p> <button class=”align-self-end mt-auto”>Back to the future</button> </li> ⋮ </ul> </main>

<main> <ul id=”gallery”> <li> <img src=”…” alt=”“/> <p>…</p> <button>Back to the future</button> </li> <li> <img src=”…” alt=”“/> <p>…</p> <button>Back to the future</button> </li> ⋮ </ul> </main>

Wartbarkeit Bootstrap CSS Grid Präsentation im Markup (Inline-Styles) Strikte Trennung von Inhalt und Darstellung (separation of concerns) Änderungen im Programmcode Änderungen nur an einer Stelle

aufwändig einfach Dateigrößen: HTML 5.1 kB 3.1 kB CSS 0.6 kB 0.9 kB bootstrap.min.css 141 kB This is heavy!

“Better get used to these bars, kid.”

“Better get used to these grids, kid.”

Flex menu https:!//codepen.io/gunnarbittersmann/pen/VBaQBY CSS Grid: text width limited, image full-width https:!//codepen.io/gunnarbittersmann/pen/xrRmQe

Periodic table https:!//codepen.io/gunnarbittersmann/pen/MVezXq

tiles, outer grid https://codepen.io/gunnarbittersmann/pen/RJYqNb tiles, inner grid https://codepen.io/gunnarbittersmann/pen/bKxQdB

Mondrian art by Jen Simmons http:!//labs.jensimmons.com/2017/03-008.html http:!//labs.jensimmons.com/2017/01-011C.html

Layout Land https:!//!!www.youtube.com/channel/UC7TizprGknbDalbHplROtag

The Official Timeline of Web Page Layout by Jen Simmons The No-Layout Layout d e s a b e l b a T Layouts d e d o c d Han s t u o y a L t F loa k r o w e m a r F Layouts g n i z a Am ! e r u t Fu 1855 1955 1985 2015

BACK TO THE FUTURE 2002 Futura (Paul Renner, 1927) Fira Mono, Fira Code (Erik Spiekermann u.a., 2013) Comic Sans MS (Vincent Connare, 1994) Palatino (Hermann Zapf, 1949) Calibri (Lucas de Groot, 2004, 2007) LiebeGerda (Ulrike Rausch, 2016) LiebedOriS (Ulrike RAusch, 2014)

Marvin Berry’s cousin with rock and roll’s future https://www.youtube.com/watch?v=6swgiM9vSEE

Grid to the future

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

Slide 16

Slide 17

Slide 18

Slide 19

Slide 20

Slide 21

Slide 22

Slide 23