Style-Guide-Driven Development (SDD) mithilfe von Atomic Docs

Atomic Docs – Style-Guide-Generator und Komponenten-Manager
Kommentare

Style Guides dürften eigentlich jedem Webdesigner ein Begriff sein – immerhin tragen sie unter anderem dazu bei, die Brand-Identität zu stärken und sind deshalb oft Teil der Gestaltungsrichtlinien für Websites. Deutlich weniger bekannt ist dagegen das Style-Guide-Driven Development, bei dem unter anderem das Tool Atomic Docs behilflich sein kann.

Geschrieben wurde es von Nick Berens, der Atomic Docs und die Grundlagen des Style-Guide-Driven Developments in einem Artikel vorgestellt hat. Grundsätzlich handelt es sich bei dem Tool um einen Style-Guide-Generator und Komponenten-Manager, der mit PHP und Sass erstellt und von den Prinzipien des Atomic Designs nach Brad Frost inspiriert wurde. Ursprünglich diente Atomic Docs als internes Tool für Berens und sein Team, mittlerweile erfreut sich das Tool aber auch außerhalb seines anfänglichen Einsatzgebiets durchaus einiger Beliebtheit.

Das kann Atomic Docs

Die Nutzung von Atomic Docs ist denkbar einfach. Für die Installation wird das Tool heruntergeladen und zu einer lokalen PHP-Umgebung hinzugefügt. Anschließend wird der Präprozessor konfiguriert und schon kann es losgehen.

Atomic Docs erlaubt das Organisieren aller Komponenten unter selbstbenannten Kategorien; genauso ist das Tool beim Verwalten der Komponenten hilfreich. Diese können leicht verschoben, neu benannt oder gelöscht werden – und zwar über ein besonders leicht zu bedienendes, sauberes GUI-Interface.

Einen Eindruck von der Arbeit mit dem Style-Guide-Generator bietet etwa das folgende Video:

So hilft Atomic Docs beim Style-Guide-Driven Development

Es gibt unterschiedliche Style Guides, etwa einen statischen Design-Style-Guide (globale Design-Elemente) und einen dynamischen Front-End-Style-Guide (Dokumentation des mit Front-End-Komponenten assoziierten Codes). Beides sind Variationen, die bei wisnet.com, für das Atomic Docs ursprünglich entwickelt wurde, zum Einsatz kommen und dort für das Style-Guide-Driven Development eine wichtige Rolle spielen. Grundsätzlich sollen Styles Guide für eine einheitliche Designsprache sorgen, mit der Code-Konsistenz über die gesamte Lebensdauer eines Projekts hergestellt werden kann.

API Summit 2017

Web APIs mit moderner Web-Technologie konsumieren

mit Rainer Stropek (software architects)

API First mit Swagger & Co.

mit Thilo Frotscher (Freiberufler)

Überhaupt bietet Style-Guide-Driven Development (SDD) einige Vorteile, etwa dass damit Komponenten außerhalb jedes Kontexts erstellt und so leicht innerhalb einer Seite oder Applikation verschoben werden können. Außerdem können die Komponenten so auch für Backend-Entwickler, die im Front-End-Bereich weniger bewandert sind, zugänglicher gestaltet werden. Genauso gibt es für jedes Projekt am Ende eine vollständige Dokumentation des Front-End-Design-Systems, was die Verwaltung der Seite deutlich vereinfacht.

Atomic Docs lässt sich leicht als sogenannter „Living Style Guide“ konfigurieren und so bei vielen Projekten problemlos als Unterstützung bei der Arbeit mit Style Guides nutzen. Mehr Informationen dazu bietet der oben genannte Artikel von Nick Berens; auf GitHub und der Projektseite von Atomic Docs finden sich einige weitere Tipps und Tricks rund um die Arbeit mit dem Tool.

Name Atomic Docs
Hersteller Nick Berens
Projektwebsite http://atomicdocs.io/
GitHub https://github.com/nickberens360/atomic-docs

Aufmacherbild: Hand drawn vector arrows, speech bubble, quotes collection isolated on chalkboard. Doodle style decorative elements for web design or infographic. von Shutterstock / Urheberrecht: sinoptic

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -