Grid to the future

Grid to the future

051dbe29a972707cde167602b38c9778?s=128

Gunnar Bittersmann

July 19, 2018
Tweet

Transcript

  1. None
  2. None
  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!
  12. None
  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
  21. None
  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