Wie gehe ich ein Layout an (englisch)

[marctrix]

Hej alle,

es ist leider auf englisch, aber es ist live coding und wer den Code versteht, versteht vermutlich das Video, daher schaut doch einmal rein.

Interessant ist das Interview nach dem Coding (und ich habe an diese Stelle verlinkt). Chris Coyier fragt Jen Simmons, ob sie ihr HTML ändert, damit CSS Grid funktioniert und manchmal geht es nicht ohne ein bisschen extra Code (was sich mit CSS subgrid bessern wird, schon jetzt sichtbar im FF nightly (yeah)).

Aber im Grunde genommen ist das schon heute die Ausnahme und wann immer ich Code hinzufügen muss, damit eine Komponente mit Grid funktioniert, tue ich das so, dass es mir den Weg in die Zukunft nicht versperrt, was glücklicherweise fast immer möglich ist.

Davon abgesehen war es immer nötig, HTML (über das rein für die Semantik benötigte HTML) mit divs und/ oder spans anzureichern. Mit CSS Grid ist das nur sehr viel weniger nötig!

Langer Rede kurzer Sinn: wer sich das Video anschaut, wird feststellen, wie mächtig CSS Grid ist und dass insbesondere die Responsivität des Layouts mit anderen Techniken nicht erreichbar ist.

Es ist also keine Frage, ob man Bootstrap oder ein anderes Framework, das floats und/ oder flexbox als Basis verwenden sollte für Layouts oder eben CSS Grid.

Die Sache ist entschieden, denn die alten Techniken (float und flexbox) für ein Layout-Grid zu nutzen waren schlicht Hacks aus der Not geboren, dass es nichts anderes gab. Sie sind nicht geeignet für Webdesign (was bedeutet mit Kästen zu hantieren, deren Abmessungen wir nicht kennen auf einer Fläche, deren Abmessung wir nicht kennen).

Jen Simmons zeigt hier 1:1 meine Herangehensweise an so ein Layout. Es kommt nur auf drei Dinge an:

1. An welchen Stellen müssen Dinge zueinander bündig sein
2. Welche Größe müssen Dinge mindestens haben, damit sich Inhalt sinnvoll darin unterbringen lässt
3. Wie verhält sich das konstruierte bei Änderungen der Größe (Schriftgrößen, Abstände zwischen Worten/ Buchstaben, Zoomen, Veränderung des Viewports)

Dann vielleicht noch ein kleines 4. was die Arbeit sehr erleichtert, vor allem die Pflege: lässt sich das ganze ohne media-queries sinnvoll realisieren.

Meistens benötige ich eine einzige Media-Querie, denn hier hat Jen Simmons nur Dinge, die untereinander stehen (jedenfalls hat sie sich um die anderen in der kurzen Zeit nicht gekümmert).

Und diese media-querie wechselt von einem einspaltigen Layout in ein Mehrspaltiges. Mit minmax() ist auch das mitunter nicht nötig, aber im echten Leben dann doch immer wieder mal.

So mit dem langen Text vorab sollte das Video wirklich verständlich sein. Ich hoffe ihr habt viel Spaß damit!

Jen Simmons on Thinking With Grids at SmashingConf SF 2019

Marc

[marctrix]

Hej alle,

Nachtrag zum Firefox Nightly. Rachel Andrew ist auch vollkommen YEAH!

Ihr Twitter-Beitrag kurz vor ihrem Smashing-Conference-Talk

Marc

[Felix Riesterer]

Lieber marctrix,

Die Sache ist entschieden, denn die alten Techniken (float und flexbox) für ein Layout-Grid zu nutzen waren schlicht Hacks aus der Not geboren, dass es nichts anderes gab. Sie sind nicht geeignet für Webdesign (was bedeutet mit Kästen zu hantieren, deren Abmessungen wir nicht kennen auf einer Fläche, deren Abmessung wir nicht kennen).

in anderen Worten: Beerdigt Flexbox Froggy und macht hübsch weiter mit Grid Garden.

Liebe Grüße,

Felix Riesterer.

[Matthias Apsel]

Hallo Felix Riesterer,

in anderen Worten: Beerdigt Flexbox Froggy und macht hübsch weiter mit Grid Garden.

Flex und Grid decken unterschiedliche Anwendungsbereiche ab.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

in anderen Worten: Beerdigt Flexbox Froggy und macht hübsch weiter mit Grid Garden.

Flex und Grid decken unterschiedliche Anwendungsbereiche ab.

Genau. Der Frosch hüpft munter durch den Garten.

LLAP 🖖