Ti Living Style Guide Værktøjer til webdesignere - bedste af
EN levende stil guide er en dokumentation af brugergrænseelementer og -mønstre indsamlet fra et websted eller en applikation med det formål at tillade udviklere at bruge konsekvente stilarter på tværs af hele deres projekt. Tidligere har udviklere oprettet stil guider manuelt, hvilket er en masse arbejde. Efter et stykke tid begyndte de at automatisere workflowen og stilstyringsværktøjer, der omdanner front-end-kode til velorganiserede web-biblioteker er begyndt at blive vist.
Leve stil guider er forskellige fra kode stil guider, som sidstnævnte indeholder regler om, hvordan man skriver læsbar og vedligeholdelig kode, mens levende stil guider er samlinger af front-end mønstre, såsom CSS klasser til knapper, widgets og typografiske elementer. Kode stil guider sikre kode konsistens, mens levende stilguider sikrer visuel konsistens på tværs af et websted.
I dette indlæg har vi samlet 10 handy værktøjer, der kan hjælpe dig generere din egen levende stil guide.
1. Stylify Me
Dette værktøj er meget sjovt: Indsæt blot linket på den hjemmeside, du vil analysere, og se, da dens stilguide genereres i et klik med musen. Med Stylify Me, Du kan hurtigt få et overblik over mønstrene på et websted, herunder farver, skrifttyper, dimensionering og mellemrum. Når processen er færdig, kan du download stilvejledningen i PDF.
2. Fabricator
fabricator giver dig mulighed for at opbygge dit eget brugerdefineret værktøjskasse, organisere dit designsystem og generere en stilguide fra din værktøjskode. Hvis du arbejder i et team, kan du skrive dokumentationen i Markdown for at gøre det lettere for andre udviklere at bruge. Det kan hjælpe dig med organisere dit design / kodning rutine på den måde du kan lide.
3. Frontify
Frontify omfatter alt fra digital mockups til wireframing. De har også et stilstyringsværktøj, der giver en ren minimalistisk designproces uden besvær. Du kan tilmelde dig gratis og indsætte alle nødvendige oplysninger manuelt. Processen skal omfatte farvepalette, skrifttype valg, ikoner, logoer, muligvis slogans eller foretrukne web kopi.
4. Aigis
Med Aigis, Du kan generere stilguider fra alle tekstfiler (f.eks. .css, .SCSS, .styl, .md). Du kan også skrive dokumentation i Markdown og tilpasse dit webstedstema.
5. Hologram
Hologram blev oprettet af Trulia, og er en fantastisk løsning til generering af stilguider. Det er en Ruby perle der analyserer kommentarer i dit CSS for at generere awesome stil guider. Hologram har et templating system med nogle grundlæggende stilarter og navigation for at gøre din stil guide generere endnu nemmere.
6. Styledown
Med Styledown, du kan nemt skrive CSS stilguider, da det er en Markdown-baseret stil guide generator. Det vil fungere med de fleste webudviklingsopsætninger, da det er platform-neutralt. Det kræver meget lidt at få det i gang. Desuden er de kommentarer, du skal tilføje til dit CSS, meget små. Du kan oprette din CSS-dokumentation i enten inline CSS-kommentarer eller som en separat Markdown-fil.
7. KSS
KSS (Knyle Style Sheets) er primært a dokumentation specifikation og et style guide format, der har sin egen kommentar syntaks. KSS indeholder også et Ruby-bibliotek, der analyserer .sass, .SCSS, og .css filer dokumenteret med KSS retningslinjerne i en pæn stil guide. KSS er til mere avancerede brugere og professionelle hold, da generering af en stil guide med det kræver kodning viden.
8. SC5 Style Guide Generator
Med SC5 Style Guide Generator Du kan oprette og redigere stilguider direkte i din browser. det er baseret på KSS med nogle flotte funktioner inkluderet, såsom et AngularJS-powered brugerdefineret brugerflade, der hjælper dig med at se, søge og teste dine stilarter. SC5 bruger samme dokumentnotation som KSS. Det understøtter SASS, LESS, PostCSS og rene CSS stylesheets.
9. Styledocco
StyleDocco er en praktisk Node.js app der opretter stilguider fra dine stylesheets. Du kan installere det med npm. I det genererede styleguide viser StyleDocco et eksempel på de stilarter, du har anvendt, og et eksempel på HTML-koden.
På StyleDocos hjemmeside kan du finde eksempler på to stil guide, en genereret fra et standard stilark og en anden genereret fra et Bootstrap-websted. Eksemplerne kan også hjælpe dig med at hente dokumentationssyntaxen SytleDocco bruger.
10. Pattern Lab
Pattern Lab er en samling værktøjer, der hjælper dig med at oprette en modulært design system. Pattern Lab er en brugerdefineret statisk site generator, der samler alle stilelementer på et websted og danner skabeloner og sider fra dem. Det kan tjene som dit projekt mønster bibliotek og frontend stil guide. Pattern Lab giver dig mulighed for at se dine stilkomponenter samtidigt abstrakt og i kontekst.
