Tio Living Style Guide Verktyg för webbdesigners - Best of
en levande stil guide är en dokumentation av användargränssnitt och mönster samlad från en webbplats eller ansökan med det syfte att tillåta utvecklare att använda konsekventa stilar över hela projektet. Tidigare skapade utvecklare manuellt handledare, vilket är mycket arbete. Efter ett tag började de automatisera arbetsflödet och stilverktyg som omvandlar front-end-kod till välorganiserade användargebibliotek har börjat dyka upp.
Levande stilguider skiljer sig från kod stil guider, som sistnämnda innehåller regler om hur man skriver läsbar och underhållbar kod, medan levande stilguider är samlingar av front-end mönster, som CSS klasser för knappar, widgets och typografiska element. Kodstylguider säkerställer kodkonsistens, medan levande stilguider säkerställer visuell konsistens över en webbplats.
I det här inlägget har vi sammanställt 10 praktiska verktyg som kan hjälpa dig skapa din egen levande stil guide.
1. Stylify Me
Det här verktyget är mycket roligt: klistra in länken på webbplatsen du vill analysera och titta på när dess stilguide genereras i ett klick med en mus. Med Stylify Me, Du kan snabbt få en överblick över mönster på en webbplats, inklusive färger, teckensnitt, storlek och avstånd. När processen är klar kan du ladda ner stilguiden i PDF.
2. Fabricator
fabricator kan du bygga din egen UI-verktygslåda, organisera ditt designsystem och skapa en stilguide från din verktygskodskod. Om du arbetar i ett team kan du skriva dokumentationen i Markdown för att underlätta för andra utvecklare att använda. Det kan hjälpa dig att organisera din design / kodning rutin på det sätt du vill.
3. Frontify
Frontify innehåller allt från digitala mockups till wireframing. De har också ett stilstyrningsverktyg som erbjuder en ren minimalistisk designprocess utan krångel. Du kan registrera dig gratis och lägga in all nödvändig information manuellt. Processen bör innehålla färgpalett, teckensnitt, ikoner, logotyper, eventuellt slagord eller föredragen webbkopia.
4. Aigis
Med Aigis, Du kan skapa stilguider från alla textfiler (t.ex.. .css, .SCSS, .styl, .md). Du kan också skriva dokumentation i Markdown och anpassa ditt temat för webbplatsen.
5. Hologram
Hologram skapades av Trulia, och är en utmärkt lösning för att generera stilguider. Det är en Ruby pärla som analyserar kommentarer i din CSS för att generera fantastiska stilguider. Hologram har ett templerande system med några grundläggande stilar och navigering för att göra din stilguide genererande ännu enklare.
6. Styledown
Med Styledown, du kan enkelt skriva CSS-stilguider, eftersom det är en Markdown-baserad stilguidegenerator. Det kommer att fungera med de flesta webbutvecklingsuppsättningar, eftersom det är plattformsneutralt. Det krävs mycket lite för att få det igång. De kommentarer du behöver lägga till i din CSS är också mycket minimala. Du kan skapa din CSS-dokumentation i antingen inline CSS-kommentarer eller som en separat Markdown-fil.
7. KSS
KSS (Knyle Style Sheets) är främst a dokumentation specifikation och ett stilguideformat som har sin egen kommentarsyntaxa. KSS innehåller också ett Ruby-bibliotek som analyserar .sass, .SCSS, och .css filer dokumenterade med KSS-riktlinjerna i en snygg stilguide. KSS är för mer avancerade användare och professionella team, eftersom generering av en stil guide med det kräver kodning kunskap.
8. SC5 Style Guide Generator
Med SC5 Style Guide Generator du kan skapa och redigera stilguider direkt i din webbläsare. Det är baserat på KSS med några coola funktioner inkluderade, till exempel en AngularJS-driven gränssnitt som hjälper dig att visa, söka och testa dina stilar. SC5 använder samma dokumentnotation som KSS. Den stöder SASS, LESS, PostCSS och rena CSS stylesheets.
9. Styledocco
StyleDocco är en praktisk Node.js app som skapar stilguider från dina stylesheets. Du kan installera den med npm. I den genererade styleguiden visar StyleDocco en förhandsgranskning med de stilar du har tillämpat och ett exempel på HTML-koden.
På StyleDocos hemsida hittar du exempel på två stilguider, en genererad från ett standardformat och en annan genererad från en Bootstrap-webbplats. Exemplen kan också hjälpa dig att hämta dokumentationssyntaxen SytleDocco använder.
10. Mönsterlabb
Pattern Lab är en samling verktyg som hjälper dig att skapa en modulärt designsystem. Pattern Lab är en anpassad statisk webbplatsgenerator som suger samman alla stilelement på en webbplats och bildar mallar och sidor från dem. Det kan fungera som ditt projekt mönsterbibliotek och frontend stil guide. Pattern Lab kan du se dina stilkomponenter samtidigt abstrakt och i sammanhanget.
