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

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 über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.

Sortiert nach:   neueste | älteste | beste Bewertung
Dirk Schmidt
Gast
4 Jahre 2 Monate her

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.

pascal.k
Gast
4 Jahre 2 Monate her

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

Dieter Petereit
Gast
4 Jahre 2 Monate her

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

Florian
Gast
4 Jahre 2 Monate her

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

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen