@_kulturbanause

Responsive Design
ohne Media Queries

Jonas Hellwig
kulturbanause.de
@_kulturbanause

Jonas Hellwig

Designer, Developer, Writer @_kulturbanause

Seminare, Workshops, Beratung

Was euch erwartet

Entwicklung bis heute

Inline Block, VH, Typo, Quantity Queries, Multi Columns, Flex, Grid …

100% JavaScript free!

Responsive Design
2010 - 2019

25.05.2010

Flexible Media

Flexible Grid

Media Queries

CSS Layout 2010 - heute

Floats (%)

CSS Frameworks (%)

Flexbox (grow, shrink, basis)

Grid (fr)

Der Weg zum Design System

Responsive Layout Pattern

Responsive UI Pattern

Frameworks

Atomic Design & Co.

Design Systems

Das "Problem" mit Media Queries

Erfunden vor Flexbox und Grid

Abfrage des Viewports

Passen nicht zu modularem Design

Zu viel Code

Erstklassiges RWD ist
nach wie vor komplex!

Media Queries 2019

Überhaupt notwendig?

Abhängig vom Content, nicht vom Device

Pro UI Komponente

Element Queries?

display: inline-block + text-align

Demo

<figure>
    <img src="bild.jpg" alt />
    <figcaption>Text</figcaption>
</figure>


figure {
  text-align: center; 
}

figcaption {
  display: inline-block; 
  text-align: left;
}

Demo, Demo 2

Viewport Units

Demo

h1 {
  font-size: 12vw; 
}

Demo

h1 {
  font-size: 7vw;
}

p {
  font-size: 4vw;
}

a {
  font-size: 4vw;
  padding: 0.5em 1em;
  border: 0.1em solid gold;
  margin-top: 2vw;
}

Demo 2

Viewport Units + Calc

body {
  font-size: calc([min size] + ([max size] - [min size]) * 
  ((100vw - [min viewport]) / ([max viewport] - [min viewport])));
}

body {
  font-size: calc(16px + (28 - 16) * 
  ((100vw - 320px) / (1600 - 320)));
}

Multi Columns

Demo

p {
  column-width: 300px;
  column-gap: 3em;
}

Demo

p {
  columns: 2 300px;
  column-gap: 3em;
}

Demo

Quantity Queries

Demo

ul li:nth-last-child(n+5),
ul li:nth-last-child(n+5) ~ li {
  background: red;
}

Demo, Demo 2, Demo 3

Tool

Flexbox

Demo

<div class="card">
   <div class="media"></div>
   <div class="content">
      <h2>Überschrift</h2>
      <p>Lorem ipsum … </p>
   </div>
</div>

.card {
  display: flex;
  flex-wrap: wrap;
}

.card > * {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 280px;
}

Demo, Demo 2

.container {
  display: flex;
  flex-wrap: wrap;
}

.container > * {
  flex: 1 1 calc(280px + 2em);
}

.card {
  margin: 1em;
}

.media img {
  object-fit: cover;
}

Demo, Demo 2

The Holy Albatross

.flex-item {
  flex-basis: calc(800px * 999 - 100% * 999); /* 800px = Breakpoint */
}

Demo, Demo 2

CSS Grid

.grid {
  display: grid;
  grid-template-columns: 300px 300px 300px;
}

Demo

.grid {
  display: grid;
  grid-template-columns: 
    minmax(300px, 500px) 
    minmax(300px, 500px)
    minmax(300px, 500px)
  ;
}

Demo

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(300px, 500px));
}

Demo

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 500px));
}

Demo

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

Demo

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: 1fr;
}

Demo

Techniken in Kombination

Was wir gelernt haben

Inline Block, VH, Typo, Quantity Queries, Multi Columns, Flex, Grid …

Media Queries sind nicht überflüssig!

Breakpoints nicht auf Geräte setzen!

Vielen Dank!



Jonas Hellwig

kulturbanause.de

blog.kulturbanause.de

@_kulturbanause