Intrinsic Web Design

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; 
}
}