Grid to the future

A presentation at Kreativer Austausch @ AgenturWebfox in July 2018 in Berlin, Germany by Gunnar Bittersmann

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

Gunnar Bittersmann
@gunnarbittersmann

1 / 23

Modern CSS layout – flexbox, grid

Code

The following code examples from the presentation can be tried out live.

https://codepen.io/gunnarbittersmann/pen/LBNNbv

1855: table layout
https://codepen.io/gunnarbittersmann/pen/gjrRwG

1955: floats
https://codepen.io/gunnarbittersmann/pen/djMMdy

1985: Bootstrap
https://codepen.io/gunnarbittersmann/pen/RBaZxE

2015: flexbox
https://codepen.io/gunnarbittersmann/pen/bjEXPe

2018: grid
https://codepen.io/gunnarbittersmann/pen/gjwedW

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

Bootstrap page layout
https://codepen.io/gunnarbittersmann/pen/VBaQBY

Flex menu
https://codepen.io/gunnarbittersmann/pen/xrRmQe

CSS Grid: text width limited, image full-width
https://codepen.io/gunnarbittersmann/pen/MVezXq

Periodic table
https://codepen.io/gunnarbittersmann/pen/RJYqNb

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

tiles, inner grid

Resources

The following resources were mentioned during the presentation or are useful additional information.