Automatic.css

Was ist Automatic.css?

Automatic.css ist ein hochgradig konfigurierbares und erweiterbares CSS-Framework, das für professionelle Webdesigner und Entwickler im WordPress-Bereich entwickelt wurde. Es ermöglicht eine effizientere, skalierbare und wartbare Erstellung von Webseiten, insbesondere in Verbindung mit modernen Page-Buildern. Die Kernmerkmale des Frameworks umfassen ein Frontend und ein Builder-Dashboard, die eine einfache Konfiguration ermöglichen und Änderungen sofort in einer Vorschau anzeigen, ohne dass ein Speichern notwendig ist. Automatic.css liefert saubere CSS-Klassen und Variablen und lässt sich so optimieren, dass die Paketgröße minimiert wird. Zusätzlich bietet es Workflow-Verbesserungen wie Kontextmenüs, Stilvorschauen, Tastenkombinationen und die Auto BEM-Funktion.

Entwicklung

Der Weg zu Automatic.css begann mit der Identifizierung von Schmerzpunkten in der bestehenden Webentwicklung. Kevin Geary, der Mitbegründer und ein erfahrener WordPress-Unternehmer, stand vor Herausforderungen bei der Nutzung eines bestehenden Frameworks, OxyNinja. Dieses war in vielerlei Hinsicht unflexibel und schwer wartbar. In seinem Bestreben, das Problem zu lösen, begann er, verschiedene CSS-Snippets in seinen Ausbildungs-Videos zu teilen. Diese Snippets fanden großen Anklang, jedoch war die Distribution über manuelle Datei-Downloads nicht optimal, da dies die Nutzerfreundlichkeit einschränkte.

Die Vision für Automatic.css entstand, um ein umfassendes Dashboard zu schaffen, über das die Benutzer die Framework-Werte anpassen konnten. Bis zu diesem Zeitpunkt existierte kein CSS-Framework mit einer solchen Benutzeroberfläche, was Automatic.css besonders flexibel macht. Um dieses Dashboard zu entwickeln, war es jedoch notwendig, ein WordPress-Plugin zu bauen—eine Herausforderung, die Kevin nicht vollständig alleine bewältigen konnte.

Nach dem Erstellen eines ersten Prototyps, der zwar optisch nicht ansprechend war, aber funktional war, wurde eine optimierte Version entwickelt, die den Oxygen-Builder vollständig unterstützte. Ziel war es, die erste Version von Automatic.css rechtzeitig zum Black Friday 2021 auf den Markt zu bringen, was auch gelang—zehn Tage vor dem geplanten Termin.

Die nächste Stufe: Update auf Version 2.0

Mit der wachsenden Gemeinschaft von Automatic.css-Nutzern wurde der Bedarf an ständigen Verbesserungen deutlich. Nach der Einführung kleinerer Funktionen wurde das UI verbessert, um das Dashboard benutzerfreundlicher zu gestalten. Dieses herausfordernde Projekt benötigte über drei Monate Arbeit und mündete in der Veröffentlichung von Version 2 im August 2022. Das Update wurde von der Gemeinschaft mit Begeisterung aufgenommen und führte zu einem signifikanten Anstieg der Verkaufszahlen.

Automatic.css war nun auf dem besten Weg, das meistgenutzte CSS-Framework für Websites zu werden, die den Oxygen- und Bricks-Builder einsetzen. Ein weiterer Verkaufsanstieg wurde während des Black Friday 2022 verzeichnet, was teilweise auf die Einführung von Frames zurückzuführen war—einer Bibliothek mit designfertigen und zugänglichen Wireframes für den Bricks-Builder.

Verbesserung der Benutzererfahrung: Die Übernahme von Plaster

Mit dem zunehmenden Interesse an Automatic.css etablierte sich ein lebhaftes Ökosystem von Drittanbieter-Integrationen. Ein herausragendes Tool war Plaster, das Kontextmenüs hinzufügte und es den Benutzern erleichterte, die richtigen CSS-Klassen oder Variablen auszuwählen. Beeindruckt von Plaster kontaktierten Kevin und sein Team den Ersteller Christoph Sanz, um eine Übernahme und Integration in Automatic.css zu realisieren, die allen Nutzern kostenlos zur Verfügung gestellt wurde.

Im Mai 2023 wurde die Vereinbarung abgeschlossen, und Christoph schloss sich dem Team an, um die Kontextmenüs zu verbessern und weitere Workflow-Werkzeuge zu entwickeln.

Automatic.css 3.0: Ein bahnbrechendes Upgrade

Die Version 2.0 war ein großer Erfolg, doch die Innovationsfreude ließ nicht nach. Schließlich wurde erkannt, dass die ständige Kontextumschaltung zwischen dem Dashboard von Automatic.css und dem Page Builder eine Herausforderung darstellt. Damit kam die Idee für Version 3.0 auf, die es den Benutzern ermöglichen sollte, Einstellungen direkt im Page Builder zu ändern und diese sofort zu überprüfen.

Diese neue Version stellte einen gewaltigen Fortschritt dar. Die Erstellung eines neuen UI-Designs in reinem JavaScript war eine große Herausforderung, weshalb Unterstützung von Woji sowie Christoph und dessen Bruder Reinhard benötigt wurde. Die Ideen wurden im Oktober 2023 skizziert und bis zur Alpha-Version im März 2024 kontinuierlich iteriert. Ein öffentlicher Live-Stream zur „ersten Vorschau“ im April 2024 zog rekordverdächtige Zuschauerzahlen an, und die Vorfreude war gewaltig.

Die Beta-Version wurde später im Monat ausgerollt, und nach weiteren Anpassungen wurde Automatic.css 3.0 offiziell am 28. Juni 2024 eingeführt. Nach neunmonatiger harter Arbeit stellte das Team sicher, dass die neue Version nicht nur modern, sondern auch nahtlos für bestehende Websites funktionierte.

Die Ergebnisse

Das Projekt Automatic.css hat sich als wertvolles Werkzeug für Website-Builder etabliert. Dabei ist das Potenzial klar: Automatic.css könnte das führende Framework im WordPress-Ökosystem werden. Das Team setzt weiterhin auf Produktverbesserungen und die Erschließung neuer Märkte. Der Launch neuer Produkte, das Hinzufügen weiterer Entwickler und eine Erweiterung des gesamten Betriebs stehen im Fokus.

Besonders Matteo hat sich als Schlüsselspieler in der Erfolgsgeschichte von Automatic.css erwiesen, indem er an der Architektur des Plugins und für die Lösung technischer Konflikte maßgeblich beteiligt war. Seine Fachkenntnisse im Bereich softwarebasierter Produkte im WordPress-Ökosystem sind von großem Wert.

Am Ende des Jahres 2022 wurde Automatic.css als das beliebteste Produkt in der Kategorie Developer Tools bei den WP Awards 2022 ausgezeichnet und hat sich anschließend in den WP Awards 2023 weiter verbessert. Automatic.css bleibt ein dynamisches und wachsendes Projekt, das Webentwicklern und -designern weiterhin innovative Lösungen bietet.