Mittwoch,
18. Januar 2012

Es ist getan. Seit wenigen Minuten steht auf YAML.de nicht nur eine neue Version meines CSS Frameworks zum Download bereit, es gibt auch zahlreiche Veränderungen: angefangen bei einem vollständig überarbeiteten Dokumentationskonzept über einen neuen, zeitgemäßen Webauftritt bis zu einem neuen Lizenzmodell. Aber der Reihe nach ...

Das neue Dokumentationskonzept

Die Dokumentation von YAML wurde vollständig neu gestaltet. Sowohl 2005 (YAML 1) als auch 2007 (YAML 3) erschien es gerechtfertigt, neben dem “wie” der Anwendung auch das “warum” der technischen Realisierung) ausführlich zu erläutern. Es gab in diesen Jahren kaum vollständige Dokumentationen zum Umgang mit Browserbugs und die Grundkonzepte von CSS2 waren für viele Entwickler noch vergleichsweise frisch. Diese Zeiten sind vorbei. Grobe CSS-Bugs, die massiv das Rendering einer Webseite beeinflussen, sind in den aktuellen Browsern mehr oder weniger ausgestorben, die Macken der alten Browsergeneration sind in zahlreichen Büchern und online umfassend dokumentiert. Zudem war die YAML-Doku in ihrer PDF-Fassung auf satte 150 Seiten angewachsen, die Pflege und Fortschreibung in zwei Sprachen war nicht mehr zu leisten.

Das neue Dokumentationskonzept behandelt zukünftig nur noch die Anwendung der einzelnen Features – also das “wie”. Lohn dieses neuen Konzepts: die Doku liegt nun als offline-taugliche HTML-Datei dem Zip-Paket des Frameworks bei und dient gleichzeitig als Kurzreferenz. Code-Schnipsel können direkt per copy & paste in das eigenen Projekt übernommen werden. Dafür steht die Dokumentation zukünftig nur noch in englischer Sprache zur Verfügung. Mir ist es sehr wichtig, eine möglichst gut verständliche und vollständige Dokumentation liefern zu können, weshalb mich in der Vergangenheit immer wieder kleine Unterschiede in den Sprachversionen gestört haben. Die CSS Dateien des Frameworks sind hingegen auch weiterhin überwiegend zweisprachig dokumentiert.

Nun zu den wichtigsten Neuerungen bei YAML selbst. Im März 2011 hatte ich ja bereits über einige der geplanten Änderungen bei YAML 4 gesprochen. Wer die Ankündigungen verfolgt hat, wird über die folgenden Dinge nicht mehr ganz so überrascht sein.

Namespaces

Eine der häufigsten Quellen für Probleme bei der Frontendentwicklung in Verbindung mit Content Management Systemen, speziell bei größeren oder über Jahre gewachsenen Projekten, sind Kollisionen von ID- und Klassennamen der bestehenden Inhalte mit dem neu zu integrierenden CSS Framework. Dies fängt bei so beliebten Systemen wie Wordpress an, welches per default (und nicht ganz einfach zu unterbinden) die CSS Klasse .page an das <body>-Element vergibt und damit bereits mit der gleichlautenden Klasse von YAML 3.x kollidiert.

Ein weiteres Problem waren große, gewachsene Webprojekte. CSS-Klassen, wie .wrapper oder .col1 sind seit vielen Jahren gebräuchlich. Hat ein Projekt erst einmal eine gewisse Größe erreicht (ich rede hier von einigen tausend Seiten), ist die Wahrscheinlichkeit sehr gering, dass bei einem Relaunch wirklich alle Inhalte auf den neuesten Stand gebracht werden können. Im Regelfall wird man es neben einigen frisch aufbereiteten Seiten mit viel Legacy-Code zu tun haben, der unvorhersehbares Konfliktpotential mit sich bringt.

In YAML 4 werden daher die CSS-Klassen (IDs werden durch das Framework nicht mehr definiert) der Kernbestandteile des Frameworks mit dem Präfix ym- versehen. Nicht jeder wird sich über diese Regelung freuen, denn zumindest ein wenig leidet immer auch die Lesbarkeit der Klassennamen. Entsprechend des Anwenderfeedbacks der letzten Jahre überwiegt in diesem Fall aber klar der Nutzen.

HTML5, CSS3 und veraltete Browser

Aus technischer Sicht gibt es im Grunde kaum eine Neuheit, denn YAML unterstützt bereits seit Version 3.3 von Hause aus HTML5 und auch für den Umgang mit CSS3 waren die 3.x Versionen technisch bereits bestens gerüstet. Dennoch hat sich hier eine Kluft zwischen der Codebasis des Frameworks und dem äußeren Eindruck des Projektes ergeben, denn die alte YAML-Seite und insbesondere die Layoutbeispiele waren optisch tief und fest im Erstellungsjahr 2007 verankert und wirken seit einiger Zeit angestaubt und altbacken. Und so war es nur logisch, dass YAML nicht nur den CSS-Support für die neuen HTML5 Elemente mitbringt, sondern dass die beiliegenden Layoutbeispiele diesen Weg auch aktiv beschreiten.

Der Internet Explorer 6 wird von YAML noch immer unterstützt. Hier gibt es keine qualitativen Einschnitte im Kern des CSS Frameworks. Das ist auch nicht notwendig, denn YAML hat die notwendigen Anpassungen für den IE6 und 7 schon immer separat (in der Datei iehacks.css) verwaltet. Geändert hat sich jedoch die Verwendung dieser Datei. In YAML 4 gibt es darüber hinaus keine gesonderten Patch-Stylesheets für den IE mehr, die iehacks.css wird fortan direkt über den Conditional Comment eingebunden. Das bedeutet andererseits, dass ich in den Beispiellayouts keine Anstrengungen mehr unternehme, den bei Spaltenlayouts typischen 3-Pixel-Bug manuell zu fixen oder per JS-Expression einen Ersatz für den fehlenden Support für min-width / max-width mitliefere. Für letzteres gibt es bei Bedarf effektiven Ersatz in Form von Respond.js. Wer darüber hinausgehend weiterhin auf den Feinschliff für den IE6 nicht verzichten will, dem steht der 3.x Versionspfad von YAML, einschließlich des YAML Builders auch weiterhin zur Verfügung. Man kann sich dort auch weiterhin noch an den verwendeten Techniken bedienen.

Für den HTML5 Support im IE6-8 setze ich auf html5shim. In diesem Projekt gibt es aktuell viel Bewegung, es ist daher jedem, der tiefer in HTML5 einsteigen will empfohlen, sich mit den aktuellen Diskussionen und der Weiterentwicklung des Projekts zu beschäftigen.

Flexibilität eines CSS Frameworks

YAML wurde in der Vergangenheit als ein System beschrieben, welches ein mehr oder weniger umfangreiches bzw. fertiges Basislayout mitliefert. Aus diesem löscht der Anwender, was er im jeweiligen Projekt nicht benötigt. In Version 1 konnte YAML nicht viel mehr, weshalb dieses Erklärmodell in der Anfangszeit durchaus stimmig war. Über die nachfolgenden 6 Jahre hat sich das Projekt jedoch deutlich weiterentwickelt. Der Framework-Charakter wurde immer stärker herausgearbeitet und das Projekt durch zahlreiche optionale Bausteine (Grid-Elemente, Formulare, usw.) ergänzt.

Heute erwarten die Anwender eines CSS Frameworks eine klare Trennung der Framework-Logik vom Screen-Design. Eine Sammlung, aufeinander abgestimmter Bausteine (Layout, Navigation, Typographie, Formulare, Print), um effektiv und schnell Prototypen realisieren zu können. Flexibilität, nicht zwingend im Screen-Design selbst, sondern in Handhabung des Frameworks ist gefragt. Ein Wechsel des Gridrasters von 12 auf 24 Spalten oder der Wechsel von einem fixen Grid auf eine fluides, sollte nicht dazu zwingen, auch das CSS Framework selbst wechseln zu müssen. Wer ein Layout wahrhaft responsive gestalten will, braucht kein «Responsive Framework» mit einem willkürlich vorgegebenen Linarisierungspunkt, welcher sich an der Displayauflösung aktueller Smartphones ausrichtet – diese sind unter Umständen in 6 Monaten bereits wieder veraltet. Der Umbruch der einzelnen Layoutvarianten eines adaptiven Layouts sollte individuell für jedes Design bestimmt werden. Frontententwickler benötigen hierfür möglichst praktische und einfach zu handhabende Werkzeuge – das ist die Aufgabe des CSS Frameworks. Und in diesem Sinne habe ich YAML weiterentwickelt.

YAML 4 bietet deswegen keinen fest vorgegebenen Wert zur vollständigen Linearisierung der Layout-Module. Stattdessen wähle ich den Weg über eine progressive Linearisierung des Layouts in mehreren Stufen. Über die Anzahl der Stufen und die Übergangspunkte hat der Anwender vollständige Kontrolle und, obwohl das recht komplex klingen mag, die Anwendung ist letztlich sehr einfach und komfortabel. Was YAML nicht mitliefert, sind technische Lösungen für die bandbreitenoptimierte serverseitige Auslieferung von Medien (Bildern, Videos). Das ist erstens nicht die Aufgabe eines CSS Frameworks, zweitens gibt es zahlreiche Projekte, auf die im Bedarfsfall zurückgegriffen werden kann.

Die neue Website

«Eat your own dog foot» ist nicht nur ein geflügelter Satz, es war schon immer Programm in meinen Projekten. Es ist deshalb nur logisch, dass es mit YAML 4 sowohl eine neue Website, als auch neue Layoutbeispiele geben musste, die sich auf dem aktuellen Stand der Technik bewegen, nämlich HTML5, CSS3 und Responsive Design. Drei Schlagworte, die im letzten Jahr leider z.T. Buzzword-Charakter angenommen haben, worüber ich ja auch schon ein paar Worte hier im Blog verloren habe. Unabhängig davon finde ich jedoch, dass ein CSS Framework nicht nur versprechen, sondern auch zeigen sollte, was die angebotenen Features zu leisten im Stande sind – und zwar im Produktivbetrieb und nicht nur in einfachen HTML-Demos.

Lizenzbedingungen und ein neues Lizenzmodell

Mit dem Release von YAML 4 veröffentliche ich auch neue, anwaltlich geprüfte Lizenztexte für die beiden bisherigen kommerziellen Lizenzmodelle von YAML, die Projektlizenz und die Generelle Lizenz. Bei Erstellung der Texte wurde darauf geachtet, dass der Status Quo der Nutzungsrechte erhalten bleibt und sich für bestehende Projekte und Lizenznehmer keine Änderungen ergeben. Die Lizenztexte sind auf YAML.de vollständig in englischer Sprache hinterlegt. Neben der englischen Fassung gibt es die Lizenztexte natürlich auch in Deutsch - nachzulesen in Kürze (1..2 Tage brauchen wir noch) im YAML-Shop.

Neu hinzugekommen und sicherlich interessant für CMS-Projekte, Templateshops oder Theme-Frameworks ist die OEM-Lizenz. Über dieses neue Lizenzmodell wird es möglich, YAML fest in andere Projekte zu integrieren und die Nutzungsrechte an Endkunden übertragbar zu gestalten. Als Beispiel hierfür sei das Wordpress-Framework Xtreme One genannt, welches bereits seit dem Sommer 2011 mit einer solchen OEM-Lizenz ausgestattet ist und Endanwendern automatisch die vollen Nutzungsrechte für YAML sichert.

Nachtrag: Die offiziellen (etwas knapper gefassten) englischsprachigen Release Notes gibt es hier drüben. Die YAML Website auf Google+ wird zukünftig auch der von mir favorisierte Nachrichtenkanal sein. Deutschsprachiges und persönlich angehauchte Infos gibt’s natürlich weiterhin hier.


Du kannst die Kommentare zu diesen Eintrag durch den RSS 2.0 Feed verfolgen. Du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.

Dieser Eintrag kann nicht mehr kommentiert werden.