Ten Living Style Guide-Tools für Webdesigner - Das Beste aus
EIN Living Style Guide ist ein Dokumentation der Elemente und Muster der Benutzeroberfläche gesammelt von einer Website oder Anwendung mit dem Zweck, dass Entwickler sie verwenden können konsistente Stile für ihr gesamtes Projekt. In der Vergangenheit haben Entwickler Style-Handbücher manuell erstellt, was sehr viel Arbeit bedeutet. Nach einiger Zeit begann man mit der Automatisierung des Arbeitsablaufs und der Style-Guide-Tools, die Front-End-Code in verwandeln gut organisierte UI-Bibliotheken haben begonnen zu erscheinen.
Living Style Guides unterscheiden sich von Code-Style-Anleitungen, Letztere enthalten Regeln zum Schreiben von lesbarem und zu pflegendem Code, während Living Style Guides verwendet werden Sammlungen von Front-End-Mustern wie CSS-Klassen für Schaltflächen, Widgets und typografische Elemente. Code-Style-Guides sorgen dafür Codekonsistenz, während Living Style Guides sicherstellen visuelle Konsistenz über eine Website.
In diesem Beitrag haben wir 10 praktische Werkzeuge zusammengestellt, die Ihnen helfen können erstellen Sie Ihren eigenen Lebensstil-Leitfaden.
1. Stylify Me
Dieses Tool macht viel Spaß: Fügen Sie einfach den Link der Website ein, die Sie analysieren möchten, und beobachten Sie, wie der Style Guide mit einem Mausklick erstellt wird. Mit Stilisieren mich, Sie erhalten schnell einen Überblick über die Muster einer Site, einschließlich Farben, Schriftarten, Größen und Abständen. Sobald der Vorgang abgeschlossen ist, können Sie Laden Sie den Style Guide als PDF herunter.
2. Hersteller
Hersteller können Sie Ihr eigenes UI-Toolkit erstellen, Ihr Entwurfssystem organisieren und einen Style Guide aus Ihrem Toolkit-Code erstellen. Wenn Sie in einem Team arbeiten, können Sie die Dokumentation in Markdown schreiben, um anderen Entwicklern die Verwendung zu erleichtern. Es kann dir helfen Organisieren Sie Ihre Entwurfs- / Codierungsroutine in der Art und Weise, wie Sie möchten.
3. Frontify
Frontify umfasst alles von digitalen Modellen bis zum Wireframing. Sie verfügen auch über ein Styleguide-Tool, das einen sauberen, minimalistischen Designprozess ohne Probleme bietet. Sie können sich kostenlos anmelden und alle erforderlichen Informationen manuell einfügen. Der Prozess sollte eine Farbpalette, Schriftartenauswahl, Symbole, Logos, möglicherweise Slogans oder bevorzugte Webkopien umfassen.
4. Aigis
Mit Aigis, Sie können Style-Guides aus beliebigen Textdateien generieren (z. .css, .scss, .styl, .md). Sie können auch eine Dokumentation in Markdown schreiben und Ihr Website-Design anpassen.
5. Hologramm
Hologramm wurde von Trulia erstellt und ist eine großartige Lösung zum Erstellen von Style-Guides. Das ist ein Rubin-Edelstein parst Kommentare in Ihrem CSS um tolle Style Guides zu generieren. Das Hologramm verfügt über ein Templating-System mit einigen grundlegenden Stilen und Navigation, um die Erstellung des Style Guide noch einfacher zu gestalten.
6. Styledown
Mit Styledown, Sie können CSS-Style-Guides mit Leichtigkeit schreiben, da es sich um eine Markdown-basierter Style Guide-Generator. Es funktioniert mit den meisten Web-Entwicklungs-Setups, da es plattformneutral ist. Es erfordert sehr wenig, um es zum Laufen zu bringen. Außerdem sind die Kommentare, die Sie Ihrem CSS hinzufügen müssen, sehr minimal. Sie können Ihre CSS-Dokumentation entweder in Inline-CSS-Kommentaren oder als separate Markdown-Datei erstellen.
7. KSS
KSS (Knyle Style Sheets) ist in erster Linie ein Dokumentationsspezifikation und ein Style Guide-Format, das hat seine eigene kommentierende Syntax. KSS enthält auch eine Ruby-Bibliothek, die analysiert .sass, .scss, und .css Dateien, die mit den KSS-Richtlinien dokumentiert sind, in einem übersichtlichen Stilhandbuch. KSS ist für fortgeschrittene Benutzer und professionelle Teams gedacht, da die Erstellung eines Style Guides damit Codierungskenntnisse erfordert.
8. SC5 Style Guide Generator
Mit dem SC5 Style Guide Generator Sie können Style-Guides direkt in Ihrem Browser erstellen und bearbeiten. Es ist basierend auf KSS Mit einigen coolen Funktionen, wie z. B. einer AngularJS-Benutzeroberfläche, mit der Sie Ihre Stile anzeigen, suchen und testen können. SC5 verwendet dieselbe Dokumentnotation wie KSS. Es unterstützt SASS, LESS, PostCSS und reine CSS-Stylesheets.
9. Styledocco
StyleDocco ist eine praktische Node.js-App erstellt Style-Guides aus Ihren Stylesheets. Sie können es mit npm installieren. Im generierten Styleguide zeigt StyleDocco eine Vorschau mit den von Ihnen angewendeten Stilen und ein Beispiel für den HTML-Code.
Auf der Homepage von StyleDocco finden Sie zwei Style-Guide-Beispiele, eines aus einem Standard-Stylesheet und eines aus einer Bootstrap-Site. Die Beispiele können Ihnen auch dabei helfen, die von SytleDocco verwendete Dokumentationssyntax aufzugreifen.
10. Pattern Lab
Musterlabor ist eine Sammlung von Tools, mit deren Hilfe Sie eine erstellen können Baukastensystem. Pattern Lab ist ein benutzerdefinierter statischer Site-Generator, der alle Stilelemente einer Site zusammenfügt und daraus Vorlagen und Seiten bildet. Es kann als Ihr Projekt dienen Musterbibliothek und Frontend Style Guide. Mit Pattern Lab können Sie Ihre Stilkomponenten gleichzeitig sehen abstrakt und im Zusammenhang.
