Subcolumns in YAML
Anlass dieses Beitrags ist Lothar „BlogPimp“ Baier’s GridEasy. Schön, daß Lothar etwas für die breite Masse tut, das hat er auch durch zahlreiche Themes bewiesen. Eine Sache ist bei mir jedoch auf Unverständnis gestoßen:
Ich habe viele dieser Frameworks ausprobiert, z. Bsp. Yahoo! Grids, BluePrint, 960gs, YAML, logicss, Elements und andere. Aber nichts gefunden, was mir auf Dauer die Arbeit wirklich erleichtert hätte. Entweder die Frameworks waren zu komplex, dass man viel Zeit in die Einarbeitung investieren muss, um hinterher wenig Zeit zu sparen. Oder sie waren zu starr, um im Alltag wirklich viele Situationen abzudecken. Mit am Besten gefiel mir noch 960gs, da es sowohl klein als auch einfach ist. Aber es scheiterte schon beim ersten Projekt allein daran, dass ich dafür fünf gleich breite Spalten brauchte, was mit 960gs nicht geht.
Da ich sehr viel mit YAML arbeite, habe ich mich mal hingesetzt, und in genau 3 Minuten ein 5-spaltiges Layout auf der Grundlage der Subtemplates gebaut. Der Vorteil von YAML ist dabei, das es sich um ein vollkommen flexibles Layout handelt, im Gegensatz zu GridEasy.
Hier ein Screenshot:
Hier der HTML Code:
<div class="subcolumns">
<div class="c20l">
<div class="subcl">
<h2>Blog</h2>
<p>blabla</p>
</div>
</div>
<div class="c20l">
<div class="subcl">
<h2>Blog</h2>
<p>blabla</p>
</div>
</div>
<div class="c20l">
<div class="subcl">
<h2>Blog</h2>
<p>blabla</p>
</div>
</div>
<div class="c20l">
<div class="subcl">
<h2>Blog</h2>
<p>blabla</p>
</div>
</div>
<div class="c20r">
<div class="subcr">
<h2>Blog</h2>
<p>blabla</p>
</div>
</div>
</div>
CSS:
/**kommt in die basemod.css**/
.c20l {float: left; width: 20% }
.c20r {float: right; margin-left: -5px; width: 20% }
/**IE Patch**/
* html .c20l, * html .c20r {display:inline};
/**Printstylesheet**/
.c20r, .c20l {
width: 100%; margin:0; float:none; overflow:visible; display:table;
}
Nach diesem Prinzip kann man sich auch einen 20-Spalter bauen 
. Man sollte nur
a) die CSS Anweisungen nicht in die YAML Coredateien schreiben,
b) immer darauf achten, das die Container nach links floaten und der letzte rechts floatet,
c) die Summe der Containerbreiten 100% ergibt.
Logischerweise sind in YAML nur ein paar Subtemplates vordefiniert. Alle Anwendungsfälle zu berücksichtigen würde extrem aufgeblasene CSS-Dateien bedeuten.
Eine Kritik an Dirk Jesse muß ich hier loswerden: Die Möglichkeit, sich selber Subtemplates zu definieren sollte vielleicht dokumentiert werden.
Ich hoffe, der Lothar ist mir jetzt nicht böse.
- Kategorie: Webdesign
- Tags: grids, Webdesign, yaml
- Kommentar-Feed | Trackback URL
- Gelesen: 5546 | Heute: 4
- einen Kommentar schreiben
8 Kommentare
Nö, der Lothar ist Dir nicht böse. Warum auch. aber der Lothar hat vielleicht eine andere Arbeitsweise wie Du. Und vielleicht auch eine andere Idee vom Internet.
Mit GridEasy nehme ich ein semantisches HTML, füge für das obige Beispiel genau 5 Klassen-Anweisungen hinzu und fertig ist das 5-spaltige-Layout. Und die einzubindende CSS-Datei hat genau 676 Bytes. Das geht erstens schnell, ich muss im Normalfall kein zusätzliches HTML-Element einfügen, die Lösung ist extrem schnell geladen und funktioniert in allen Browsern inkl. IE ab 5.5.
Natürlich ist die Lösung statisch von der Breite, aber solange der IE bis 6.0 kein maxwidth versteht und alle modernen Browser (einschl. Firefox ab 3.0) die gesamte Seite zoomen, anstatt den Text, solange ist für mich Fluid und Fixed der falsche Ansatz.
Aber das ist dem Lothar seine Idee vom Internet, andere können und sollen auch eine andere haben. Wäre ja auch langweilig, wenn es nur eine gäbe.
Ich habe lange mit YAML herum-experimentiert. Ohne Frage hat Dirk da was ganz tolles geschaffen. Aber mir ist es für die meisten meiner Projekte einfach zu überdimensioniert.
Hallo Lothar, natürlich kannst du deinen Weg gehen und deine eigene Arbeitsweise haben. Ich konnte nur das mit YAML nicht so stehen lassen
Viele Grüße
Micha
Micha,
ich glaube einen kleinen Fehler in Deinem 5er Template entdeckt zu haben. Die Spaltenabstände sind nicht symetrisch. Die ersten vier Spalten haben mit der Klasse subcl ein padding von 1em nach rechts. Der fünften Spalte hast Du die Klasse subcr zugewiesen, diese hat ein padding-left von 1em.
Somit haben die ersten vier Spalten einen Abstand von 1em zueinander. Zwischen der vierten und fünften Spalte beträgt der Abstand 2em.
Liege ich richtig? Das Problem lässt sich mit den vorhanden Klassen subcl subcr und subc glaube ich nicht vermeiden.
Und damit bin ich auch wieder bei Eurer Diskussion: Das Anpassen des (sicherlich guten) Frameworks kann schnell so aufwändig werden, dass man am Ende doch vieles neu schreibt.
Viele Grüße
lu
LULINE | design, beratung, innovation
PS: Schade, dass Du no-follow für die Kommentare verwendest – ich finde gute Beiträge verdienen einen Backlink!
@Lu: natürlich mußt du die die paddings der Container subcl, subc und subcr deinem Layout anpassen. Ich hätte aber besser im obigen Beispiel den 3 inneren Spalten subc vergeben sollen, seh ich gerade. Also 1. subcl, 2+3+4 subc und 5. subcr.
Der Link mit deinem Namen hat kein nofollow.
@Micha
NoFollow: stimmt. Warum dann aber im Text?
Abstand: subc für die mittleren Spalten verringert die Inkonsistenz, aber behebt sie natürlich nur im Falle von 3 Spalten – nicht bei fünfen. Ich denke mit den drei Klassen subcl subc und subcr kommt man für fünf Spalten nicht aus. Die nötigen Anpassungen sind also doch etwas komplexer.
Nichts desto trotz: Ich nutze YAML wie Du gerne.
Lu
subcl padding 0 0.5em 0 0
subc padding 0 0.5em
subcr padding 0 0 0 0.5em
Damit haben dann alle Container 1 em Abstand zueinander.
Stimmt! Danke.