Grundlagen des Intrinsic Web Design

Intrinsic Web Design? Ein neues Buzzword? Nein, der Begriff steht für eine neue Herangehensweise des Responsive Web Design. Intrinsisch: von innen her, aus eigenem Antrieb; durch in der Sache liegende Anreize bedingt.

Der Begriff wurde bereits 2018 von Jen Simmons (der eine oder andere kennt sie vielleicht noch aus der Drupal Community) eingeführt und beschreibt Layout Möglichkeiten mit aktuellen CSS Standards, die es in den Jahren als Responsive Web Design bekannt wurde noch nicht gab.
Hierzu gehören:

  • CSS-Grids
  • Flexbox
  • CSS-Container
  • Automatisch skalierende Rows und Columns
  • Gleich hohe Spalten ohne extra Code
  • Automatische Anzahl von Columns je nach Viewport Breite ohne Breakpoints
  • Dynamische Typografien

Dieses Beispiel von Jen Simmons zeigt sehr schön wie sich ein Grid automatisch skaliert. Auf einem sehr großen Bildschirm werden 6 oder mehr Spalten angezeigt, auf kleineren Bildschirmen je nach Breite immer weniger. Ohne mit Breakpoints rumhantieren zu müssen und mit extrem wenig Code.

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

Das ist erfreulich wenig Code für ein flexibles, skalierbares Grid. Natürlich ist das nicht für jeden Zweck geeignet. Wenn ich einfach ein dreispaltiges Grid mit Teasern benötige, erstelle ich ein klassisches Grid.

Warum ist das jetzt intrinsisch? Nun ja, das Grid baut sich von innen heraus oder aus eigenem Antrieb auf.  Es gibt von außen keine Vorgaben wie
bei einem klassischem Grid. Dort schreibt man ja explizit wie viele Spalten auf einem Desktop oder auf einem kleinerem Device angezeigt werden sollen. Sprich extrensisch von außen her [bestimmt, gesteuert, angeregt]

Ich habe ein kleines Scrivito Widget entwickelt mit dem ein solches Grid ohne technisches Wissen angelegt werden kann. Der Benutzer fügt einfach beliebig viele Blöcke hinzu und der Rest ist CSS-Magic.

So ein Grid ist nur ein kleiner Teil der Möglichkeiten des Intrinsic Web Design. Ich werde hier immer mal wieder etwas darüber schreiben und natürlich entwickeln.

Nachtrag: Grid Items können in der Größe verändert werden (s.u.) Dann allerdings benötigt man eine Media Query.

@media (min-width: 667px) {
  .first-item { 
  grid-column: 1/3; 
}
}

Aliqua aute ad

Amet proident ipsum cillum anim quis pariatur ea ut labore ea.
Fugiat amet fugiat eiusmod qui laboris pariatur est aliqua enim.

Amet nisi cillum

Nulla velit ipsum mollit dolore minim duis sunt non ullamco duis.

Magna consequat eu excepteur sit. Sit minim laboris incididunt quis. Magna commodo

Lorem laboris est sit ad ipsum tempor ipsum sit eiusmod officia.

Mollit et quis

Magna consequat eu excepteur sit. Sit minim laboris incididunt quis. Magna commodo Lorem laboris est sit ad ipsum tempor ipsum sit eiusmod officia.

Consequat ullamco

Ut tempor Lorem pariatur occaecat amet aute veniam aliquip. Quis proident eiusmod sit irure sunt quis sunt officia sint cupidatat.

Quis velit voluptate

Quis proident eiusmod sit irure sunt quis sunt officia sint cupidatat.

 

Velit in elit ullamco

Anim incididunt cillum qui Lorem consectetur occaecat sint aliquip cillum cupidatat.

Sint enim do id velit

Eiusmod ad aute aliqua adipisicing sint excepteur nostrud. Mollit adipisicing eu eiusmod ea sunt anim.

Ex enim laborum

Proident laboris proident consectetur elit ea ea consectetur excepteur id exercitation velit.

Kommentare