Grid to the future

Modern CSS layout – flexbox, grid

Codepens:
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

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

Jen Simmons, Layout Land:
https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag
http://labs.jensimmons.com/2017/01-011C.html
http://labs.jensimmons.com/2017/03-008.html
https://speakerdeck.com/jensimmons/designing-with-grid-ux-burlington

Music video:
Chuck Berry With Bruce Springsteen & The E Street Band - Johnny B. Goode https://www.youtube.com/watch?v=6swgiM9vSEE

Transcript

3. 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
4. Grid page layout https://codepen.io/gunnarbittersmann/pen/gjwedW Bootstrap page layout https://codepen.io/gunnarbittersmann/pen/WKGzYz
5. Can I use? .com
6. Do websites need to look exactly the same in every browser? .com
7. “Where we’re going, we don’t need rows.”
8. <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> <
9. <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>
10. <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>
11. Bootstrap CSS Grid Präsentation im Markup (Inline-Styles) Strikte Trennung von Inhalt und Darstellung (separation of concerns) Wartbarkeit Änderungen im Programmcode > aufwändig Änderungen nur an einer Stelle > 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!
13. “Better get used to these bars, kid.”
14. “Better get used to these grids, kid.”
15. Flex menu https:!//codepen.io/gunnarbittersmann/pen/VBaQBY CSS Grid: text width limited, image full-width https:!//codepen.io/gunnarbittersmann/pen/xrRmQe
16. Periodic table https:!//codepen.io/gunnarbittersmann/pen/MVezXq
17. tiles, outer grid https://codepen.io/gunnarbittersmann/pen/RJYqNb tiles, inner grid https://codepen.io/gunnarbittersmann/pen/bKxQdB
18. Mondrian art by Jen Simmons http:!//labs.jensimmons.com/2017/01-011C.html http:!//labs.jensimmons.com/2017/03-008.html
19. Layout Land https:!//!!www.youtube.com/channel/UC7TizprGknbDalbHplROtag
20. The Official Timeline of Web Page Layout The No-Layout Layout Table-based Layouts Hand-coded Float Layouts Framework Layouts Amazing Future! by Jen Simmons 1855 1955 1985 2015
22. 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)
23. Marvin Berry’s cousin with rock and roll’s future https://www.youtube.com/watch?v=6swgiM9vSEE