CSS

Stylo: Fireworks für CSS-Designs als Web-App

25. Mai 2012
von

Alex MacCaw arbeitet an einem ehrgeizigen Projekt. Im Hauptberuf Twitter-Ingenieur und im Nebenberuf Buchautor bei O´Reilly hat MacCaw offenbar noch Kapazitäten frei. Diese steckte er über einige Monate, in denen er abends und am Wochenende nach eigenen Angaben jede freie Minute opferte, in eine Web-App mit dem wenig sprechenden Namen Stylo. Stylo soll, wenn es denn mal fertig ist, eine Art Fireworks für das CSS-Design werden. Da er das allein wohl nicht zu schaffen glaubt, gibt er das Projekt nun zur allgemeinen Mitarbeit als Open Source frei.

Stylo: Schicke Oberfläche, interessante Funktionen

Es ist nicht etwa so, dass es an Web-Apps für CSS-Entwickler einen Mangel gäbe. Im Gegenteil haben wir allein bei Dr. Web in den letzten Wochen ein gefühltes Dutzend Vertreter dieser Art vorgestellt. Allerdings würde Stylo eine neue, bisher so nicht dagewesene Qualität in das Genre bringen. Denn Stylo fühlt sich an wie eine Desktop-App und funktioniert in der Tat ähnlich wie Fireworks. Allein die aufgeräumte GUI unterscheidet Stylo um Längen von allen mir bekannten CSS-Web-Apps.

Der aktuelle Prototyp funktioniert am besten in der aktuellsten Version des Chrome-Browsers. Derzeit kann man Formen zeichnen, Schatten applizieren, Farbverläufe generieren und eine Reihe anderer Styles anwenden. Mittels Doppelklick auf ein Element lassen sich Texte hinzufügen. Verschiedene Tastaturkürzel erleichtern die Verwendung, so löst etwa CMD+Z in gewohnter Weise den Befehl “Rückgängig” aus.

Laut MacCaw soll es unter Verwendung des aktuellsten Chrome-Browsers möglich sein, den CSS-Code des markierten Elements per Rechtsklick und Wahl von Copy in die Zwischenablage zu bugsieren. Danach soll man die Styles in einen beliebigen Texteditor pasten können. Dieser Vorgang ist mir allerdings im Test nicht gelungen, was den Nutzwert des CSS-Designers letztlich doch stark einschränkt. Dennoch muss man MacCaw neidlos zugestehen, dass er hier die Basis für eine App geschaffen hat, die das Potenzial hat, andere, weniger funktionsreiche und weniger gut steuerbare Web-Apps überflüssig zu machen.

Stylo basiert auf CoffeeScript, Spine und Sprockets. Während sich CoffeeScript hinreichender Bekanntheit erfreuen dürfte, mag das für Spine und Sprockets eher nicht gelten. Spine ist ein Javascript-Framework auf MVC-Basis. MVC setzt sich als Architektur mehr und mehr durch und wird auch in besonders flexiblen CMS wie etwa Silverstripe eingesetzt. Sprockets ist eine Ruby-Bibliothek für die Kompilation und Auslieferung von Web-Bauteilen. So wandelt MacCaw das CoffeeScript der Stylo-App in CSS und Javascript um.

Es wird interessant sein, zu sehen, inwieweit sich befähigte Entwickler zur Mitarbeit an Stylo werden finden lassen. Die App hätte jedenfalls den zusätzlichen Aufwand verdient.

ist seit 1994 im Netz unterwegs, aber bereits seit fast 30 Jahren in der IT daheim. Seit 2008 schreibt er für Dr. Web, seit 2012 ist er Chefredakteur des Magazins. Man findet ihn auch auf Twitter und Facebook, aktiver ist er allerdings auf Google+.

4 Kommentare zu „Stylo: Fireworks für CSS-Designs als Web-App
  1. Dirk Schmidt am 26. Mai 2012 um 09:59

    Was die Open-Source-Gemeinde da in den nächsten Jahren entwickeln will, kann Adobe Fireworks CS6 schon jetzt: Über das Bedienfeld „CSS-Eigenschaften“ können CSS-Codes (Firefox, Webkit, Opera und IE) für Einzelelemente oder ganze Seiten extrahiert und CSS-Sprites erstellt werden. In einem Schritt können (komplette) Layouts mit externen Stylesheets exportiert werden.

  2. pascal.k am 26. Mai 2012 um 10:06

    Mit STRG+C lassen sich die CSS Attribute in den Zwischenspeicher kopieren. =)

    • Dieter Petereit am 26. Mai 2012 um 11:52

      Ja, so sollte es sein. Bei mir hat es nicht funktioniert. Chrome unter Mac OS X.

      • Florian am 26. Mai 2012 um 15:18

        Bei mir funktioniert es in Chrome 18 perfekt. Wird wohl mal Zeit zu updaten. ;)

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!