Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Grid to the future

Grid to the future

Gunnar Bittersmann

July 19, 2018
Tweet

More Decks by Gunnar Bittersmann

Other Decks in Programming

Transcript

  1. <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> <
  2. <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>
  3. <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>
  4. 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!
  5. 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
  6. 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)