Umbruch mit bootstrap

[marctrix]

Hej at,

Ein echtes Problem sehen ja nur die, die Presentational Markup um seiner selbst willen ablehnen

Das mache ich nicht, sondern weil es mir schon des öfteren Probleme bereitet hat.

Nichtsdestotrotz bin ich an Alternativen interessiert.

Ja, inzwischen habe ich das begriffen 😉

Aber auch das kann ja ein Weg sein. Von @Gunnar Bittersmann gibt es einen schönen Vortrag, wie man mit Sass presentational markup vermeiden kann und trotzdem leicht verständliche Bezeichner wie "großer Button" oder "rot" in seinem Code verwenden kann.

Das verschiebt das Problem meines Erachtens nur um eine Ebene.

Jein - es findet tatsächlich eine Verschiebung um eine Ebene statt. Dabei wird die Darstellung nochmals aufgesplittet.

Man erzeugt Style-Päckchen die immer wieder gemeinsam verwendet werden, z.B. Dunkelgrüner Rahmen und hellgrüner Hintergrund oder roter Rahmen und rosa Hintergrund.

Die nennt man dann box-red und box-green.

Außerdem Kisten über 4 Rasterspalten und Kisten über 8 Rasterspalten.

Jetzt kann man im html Klassen wie info-success oder info-warning und info-fail verwenden.

Abhängig davon ob die breit oder schmal sein sollen (kann beispielsweise von Vorfahren wie main, aside, contact-form aber auch beliebigen anderen Bedingungen abhängen) zieht man sich die diversen (ich nenne die jetzt mal) Templates oder Atome zu Regeln zusammen. Das schöne: sie lassen sich leicht merken (box-red und box-small ergeben zusammen eine kleine rote Box) und man kann seinen Code wiederverwenden.

Fast so ähnlich wie einfache Funktionen in der Programmierung (ich nehme mal an, daher stammt auch die Idee)…

Ich habe den nicht gefunden, aber den Webkraut-Beitrag von @molily zu demselben Thema und habe ein Codepen-Beispiel erstellt.

Ich sehe mir das mal an, vielen Dank!

Gerne, viel Spaß dabei!

Vielleicht mag @Gunnar Bittersmann seinen Vortrag noch verlinken. Die meisten Entwickler lesen zwar lieber, um Texte überfliegen zu können, aber er hat dort prima die Verschiebung um eine Ebene visualisiert - oder er verlinkt die betreffenden Folien…

Marc