Ti Living Style Guide verktøy for webdesignere - Best of
EN levende stil guide er en dokumentasjon av brukergrensesnitt og mønstre samlet fra et nettsted eller en applikasjon med det formål å tillate utviklere å bruke konsekvente stiler over hele prosjektet. Tidligere har utviklere laget stilveiledninger manuelt, noe som er mye arbeid. Etter en stund begynte de å automatisere arbeidsflyten, og stilstyringsverktøy som forvandler frontend-kode til velorganiserte UI-biblioteker har begynt å vises.
Levestilguider er forskjellige fra kode stil guider, som sistnevnte inneholder regler om hvordan man skriver lesbar og vedlikeholdbar kode, mens levende stilførere er samlinger av front-end mønstre, for eksempel CSS klasser for knapper, widgets og typografiske elementer. Kode stil guider sikre kode konsistens, mens levende stil guider sikrer visuell konsistens over et nettsted.
I dette innlegget har vi samlet 10 nyttige verktøy som kan hjelpe deg generer din egen livsstilguide.
1. Stylify Me
Dette verktøyet er mye moro: lim inn linken til nettstedet du vil analysere, og se ettersom stilhåndboken er generert med ett museklikk. Med Stylify Me, Du kan raskt få oversikt over mønstrene til et nettsted, inkludert farger, fonter, størrelsesorden og avstand. Når prosessen er fullført, kan du Last ned stilguiden i PDF.
2. Fabricator
fabricator lar deg bygge ditt eget brukergrensesnitt, organisere designsystemet ditt og generere en stilguide fra din toolkit-kode. Hvis du jobber i et lag, kan du skrive dokumentasjonen i Markdown for å gjøre det enklere for andre utviklere å bruke. Det kan hjelpe deg med organisere din design / koding rutine på samme måte som du liker.
3. Frontify
Frontify inkluderer alt fra digital mockups til wireframing. De har også et stilstyringsverktøy som gir en ren minimalistisk designprosess uten problemer. Du kan registrere deg gratis og legge inn all nødvendig informasjon manuelt. Prosessen bør inkludere fargepalett, skriftvalg, ikoner, logoer, muligens slagord eller foretrukket webkopi.
4. Aigis
Med Aigis, Du kan generere stilguider fra alle tekstfiler (f.eks. .css, .SCSS, .styl, .md). Du kan også skrive dokumentasjon i Markdown, og tilpasse temaet ditt.
5. Hologram
hologram ble laget av Trulia, og er en flott løsning for å generere stilguider. Det er en Ruby perle som analyserer kommentarer i CSS for å generere awesome stil guider. Hologram har et templeringssystem med noen grunnleggende stiler og navigasjon for å gjøre din stilguide enda enklere.
6. Styledown
Med Styledown, Du kan skrive CSS-stilguider med letthet, som det er en Markdown-basert stilguide generator. Det vil fungere med de fleste webutviklingsoppsett, da det er plattformnøytralt. Det krever svært lite å få det oppe og løpende. Dessuten er kommentarene du må legge til i CSS, veldig små. Du kan opprette CSS-dokumentasjonen i enten inline CSS-kommentarer, eller som en egen Markdown-fil.
7. KSS
KSS (Knyle Style Sheets) er først og fremst a dokumentasjonspesifikasjon og et stilguideformat som har sin egen kommentar syntaks. KSS inneholder også et Ruby-bibliotek som analyserer .sass, .SCSS, og .css filer dokumentert med KSS retningslinjer i en stilig stil guide. KSS er for mer avanserte brukere og profesjonelle lag, som å generere en stilguide med det krever kodingskunnskap.
8. SC5 Style Guide Generator
Med SC5 Style Guide Generator Du kan opprette og redigere stilguider direkte i nettleseren din. Det er basert på KSS med noen kule funksjoner inkludert, for eksempel en AngularJS-drevet brukergrensesnitt som hjelper deg med å se, søke og teste dine stiler. SC5 bruker samme dokumentnotasjon som KSS. Den støtter SASS, LESS, PostCSS og rene CSS stilark.
9. Styledocco
StyleDocco er en praktisk Node.js app som lager stilguider fra stilarkene dine. Du kan installere den med npm. I det genererte styleguide viser StyleDocco en forhåndsvisning med stilene du har brukt, og et eksempel på HTML-koden.
På StyleDocos hjemmesider finner du eksempler på to stiler, en generert fra et standard stilark, og en annen generert fra et Bootstrap-nettsted. Eksemplene kan også hjelpe deg med å hente dokumentasjonssyntaxen SytleDocco bruker.
10. Pattern Lab
Pattern Lab er en samling verktøy som hjelper deg med å opprette en modulært design system. Pattern Lab er en tilpasset statisk nettsted generator som stitches sammen alle stilelementer på et nettsted, og danner maler og sider fra dem. Det kan tjene som prosjektet ditt mønsterbibliotek og frontend stil guide. Pattern Lab lar deg se dine stilkomponenter samtidig abstrakt og i kontekst.
