Freitag26. Oktober 2012

Präprozessoren sind seit einigen Jahren bei vielen Frontend-Entwicklern ein beliebtes Hilfsmittel, um den Arbeitsalltag zu erleichtern. Das beginnt bei einer kompakteren Schreibweise, der Möglichkeit Variablen zu verwenden, wiederkehrende CSS-Bausteine als wiederverwendbare Module zu konfigurieren, bis hin zum automatischen Zusammenfügen und Minifizieren mehrerer CSS-Dateien für den Live-Betrieb.

Heute morgen nun habe ich meine erste Portierung meines CSS Frameworks YAML in den Präprozessor Sass als öffentliche Betafassung auf Github online gestellt. Ich habe mich bemüht, den aktuellen Stand von YAML (Version 4.0.2) vollständig abzubilden. In der jetzigen Betaphase bitte ich daher Sass-affine YAML Nutzer, sich das Projekt genau anzuschauen und nach Bugs zu durchstöbern, um es so schnell wie möglich in einen stabilen Zustand zu überführen.

Langjährige YAML Nutzer brauchen übrigens keine Angst zu haben, sich jetzt auch noch zwingend mit einem CSS-Präprozessor anfreunden zu müssen. Denn das Sass-Projekt läuft parallel zu der “statischen” Variante von YAML. Wem Sass nicht schmeckt, der darf es auch in Zukunft einfach links liegen lassen.

Vorteile der Portierung?

Sass ermöglicht eine individuelle Konfiguration des Frameworks und eine einfachere Integration des Frameworks in den Sass-Workflow. Beispielhaft seien folgende Vorteile genannt:

  • Individuelle Konfiguration der base.css: Alle Core-Module können optional abgeschaltet werden.
  • Zusammenfassen und Minifizieren der verschiedenen CSS-Bausteine eines komplexen Layouts benötigt keinen separaten Arbeitsschritt mehr
  • Vertical Rhythm: Die Schriftgrößen von Überschriften und Fließtext können vollständig über Variablen konfiguriert werden. Sämtliche abhängigen Werte (Zeilenhöhe und Abstände) werden automatisch berechnet.
  • Custom Grid Generator: Über ein Sass Mixin steht ein Generator für Custom-Grids bereit.

Abschließend eine Antwort auf die Frage, warum ich mich für Sass entschieden habe: Ich halte Sass aktuell für den am weitesten entwickelten Präprozessor mit einer äußerst aktiven Community. Die seit einigen Versionen verfügbare scss-Syntax ist üblichem CSS sehr ähnlich und macht den (Wieder-)Einstieg in ein Sass-Projekt ausgesprochen unkompliziert. Und nicht zuletzt ist Compass als Ergänzung/Aufsatz auf Sass ein Alleinstellungsmerkmal gegenüber den anderen Präprozessoren (z.B. Less oder Stylus), welches ich in im Alltag mit Sass nicht mehr missen möchte.

Also dann: Viel Spaß mit dem neuen Projekt.


Donnerstag18. Oktober 2012

Am Montag, dem 15.10.2012 hat mein kleines CSS Framework YAML seinen 7. Geburtstag gefeiert. Und nachdem ich weder bei YUI, noch bei Blueprint CSS in den letzten Jahren eine maßgebliche Weiterentwicklung feststellen kann, dürfte YAML das mit Abstand am längsten und am kontinuierlichsten gepflegte CSS Framework überhaupt sein.

Letztes Jahr um diese Zeit habe ich einiges an Frust vor mir her geschoben. YAML 3.x war zwar auf einem technisch guten Stand, Optik der Website und Doku, sowie die gesamte Struktur der Doku haben mich über die Jahre hinsichtlich der Pflege arg in die Knie gezwungen. Und so war es nach 6 Jahren im letzten Oktober relativ ruhig um das Projekt geworden. Eine Vorabversion von dem, was im Januar 2012 als YAML4 das Licht der Welt erblickte, lag zu diesem Zeitpunkt bereits über Monate auf meiner Festplatte, jedoch fehlte die zündende Idee, die dahinterstehenden Konzepte einfacher zu vermitteln und vor allem für die Anwendung des Frameworks von der 150-seitigen Doku wegzukommen. Gleichzeitig ging es mit meinem Langzeitprojekt, dem Nachfolger des YAML Builders in das dritte Entwicklungsjahr und auch hier stockte die Weiterentwicklung aus purem Zeitmangel. Damals habe ich eine Entscheidung getroffen, über die ich heute sehr sehr glücklich bin. Ich habe mich entschlossen, mich in 2012 nur noch auf die Webaktivitäten zu konzentrieren, die mir am Herzen liegen und bei denen ich selbst einen unmittelbaren Einfluss auf deren Weiterentwicklung habe. Eine Konsequenz daraus war, dass ich mich nach vielen Jahren aus der Redaktion der Webkrauts zurückgezogen habe.

Nun ist das verflixte siebte Jahr ist vorüber und die Dinge haben sich, zwar etwas anders als gedacht, andererseits besser als gehofft, entwickelt. Anfang Dezember 2011 ist bei YAML endlich der Knoten geplatzt und alle wichtigen Konzeptentscheidungen für YAML4 waren getroffen. Die Umsetzung der neuen Projektseite hat mir über den Jahreswechsel sehr viel Spaß gemacht und YAML 4 ist hervorragend angenommen worden. Insbesondere das Feature der Progressiven Linearisierung von Grids, Spalten und Formularen hat sich als außerordenlich komfortabel in der Anwendung erwiesen und ist gleichermaßen eines der Alleinstellungsmerkmale von YAML gegenüber der Vielzahl an uniformen CSS-Frameworks, die sich in erster Linie über ihren Namen unterscheiden.

Damit wären wir beim zweiten Teil, kürzeren Teil der Geschichte angelangt, denn auch mein Langzeitprojekt “Thinkin’ Tags” konnte ich im September erfolgreich an den Start bringen, womit auch dieses Projekt nun endlich in den Sichtbereich der Frontendentwicklung kommt und ich nicht mehr nur im stillen Kämmerlein über den Features dieses neuen Entwicklertools brüte. Am letzten Montag, habe ich deshalb auch den Jungs vom Working Draft Podcast Rede und Antwort gestanden auf Ihre Fragen zu Thinkin’ Tags.

Somit ist dieses siebente Jahr für mich ein ganz besonderes gewesen und ich freue sehr auf die nächsten Schritte, die beide Projekte in den kommenden 12 Monaten gehen werden.


Die Überschriften meiner Blogbeiträge werden offensichtlich vorhersehbar. Aber mal ohne Witz: In diesen beiden Themengebieten zeichnet eines der “next big things” in der Frontendentwicklung ab. Die heute zwingend erforderliche Flexibilität von CSS-Layouts (Stichwort: Responsive Design) bedingt eine möglichst enge und frühzeitige Zusammenarbeit von Designern und Frontendentwicklern. Dies bedingt auf Entwicklerseite, Ideen schnell realisieren und testen zu können.

Zu beiden Themen hat Jens Grochtdreis auf der diesjährigen Webtech gesprochen und ganz offensichtlich zwei sehr interessante Vorträge gehalten. Offensichtlich, weil ich leider nicht in Mainz dabei sein konnte, mich aber die frisch in seinem Weblog veröffentlichten Folien inhaltlich begeistern. Deshalb kann ich Euch nur empfehlen: schaut sie Euch unbedingt an.

Jens erster Vortrag spricht das Thema “Modulares Design” an. Er zeigt dazu einige Beispiele aus dem Projekte Structurae, welches Jens und ich gemeinsam bestritten haben und bei dem eben diese Modularität – und damit deren einfache Wiederverwendbarkeit – ein extrem wichtiger Erfolgsfaktor war, denn als Aufgabe stand ein vollständiges Redesign einer sehr datenintensiven Website unter großem Zeitdruck und dem Bedarf an Flexibilität bei der Positionierung einer Vielzahl optionaler Layoutbausteine. Beide Ziele haben wir unter Einhaltung von Zeitplan und Budget geschafft, was im Vorfeld alles andere als sicher war. Ich kann diese Enge Zusammenarbeit der Entwickler deshalb wärmstens empfehlen.

Der zweite Vortrag von Jens dreht sich vollständig um das Thema “Rapid Prototyping” mit YAML. Er basiert auf den Erfahrungen von Jens bei seiner Arbeit mit YAML und dem Workflow, den Jens über die letzten Jahre für sich entwickelt hat. Jens diese Erfahrungen seit vielen Jahren mit mir, wodurch ich extrem wertvolles Feedback für die Weiterentwicklung meines CSS Frameworks erhalte. Ich empfehle die Folien dieses Vortrags insbesondere den YAML-Nutzern, die noch immer ein wenig Hemmungen vor dem Umstieg auf YAML 4 und dem neuen Dokumentationskonzept haben. In seinen Folien zeigt Jens sehr anschaulich, wie sich das Benamungskonzept der CSS-Klassen bei YAML 4 funktioniert, und welche Vorteile die neue Dokumentation für bei der unmittelbaren Arbeit mit sich bringt.

Also schaut Euch den Blogbeitrag und die Folien der Vorträge an und vielleicht hält Jens ja einen oder gar beide Vorträge bei anderer Gelegenheit noch einmal.


Seite 1 von 1 Seiten