Zece instrumente de stil de viață pentru web designeri - Best of

A ghid de stil de viață este a documentarea elementelor și modelelor UI colectate de la un site sau o aplicație în scopul de a permite dezvoltatorilor să folosească coerente în întregul lor proiect. În trecut, dezvoltatorii au creat ghiduri de stil manual, ceea ce reprezintă o mulțime de lucruri. După un timp, au început să automatizeze fluxul de lucru și instrumentele de ghidare de stil care transformă codul frontal bibliotecile UI bine organizate au început să apară.

Ghidurile stilului de viață sunt diferite de coduri de stil ghiduri, deoarece acestea conțin reguli despre scrierea codului lizibil și întreținut, în timp ce ghidurile stilului de viață sunt colecții de modele de front-end, cum ar fi clasele CSS pentru butoane, widget-uri și elemente tipografice. Ghidul stilului de cod asigură codul de consistență, în timp ce ghidurile stilului de viață asigură consistența vizuală pe un site.

În acest post, am pus împreună 10 instrumente la îndemână care vă pot ajuta să vă creați propriul ghid de stil de viață.

1. Stylify Me

Acest instrument este o mulțime de distracție: trebuie doar să lipiți link-ul site-ului pe care doriți să îl analizați și să urmăriți cum ghidul său de stil este generat într-un singur clic al mouse-ului. Cu Stylify Me, puteți obține rapid o prezentare generală a tiparelor unui site, inclusiv culori, fonturi, dimensionare și spațiere. Odată ce procesul este complet, puteți descărcați ghidul de stil în format PDF.

2. Fabricator

fabricator vă permite să vă creați propriul set de instrumente UI, să vă organizați sistemul de proiectare și să generați un ghid de stil din codul dvs. de unelte. Dacă lucrați într-o echipă, puteți scrie documentația în Markdown pentru a ușura utilizarea altor dezvoltatori. Te poate ajuta organizați rutina de proiectare / codificare în modul în care îți place.

3. Frontieră

Frontify include totul, de la mockups digitale la firframing. Ele au, de asemenea, un instrument de ghidare stil care oferă un design curat minimalist de proiectare fără probleme. Vă puteți înscrie gratuit și introduceți manual toate informațiile necesare. Procesul ar trebui să includă paleta de culori, opțiunile pentru fonturi, pictogramele, logo-urile, posibilele slogane sau copia web preferată.

4. Aigis

Cu Aigis, puteți genera ghiduri de stil din orice fișiere text (de ex. .css, .SCSS, .Styl, .md). Puteți scrie, de asemenea, documentația în Markdown și personalizați tema site-ului.

5. Holograma

Holograma a fost creat de Trulia și este o soluție excelentă pentru generarea de ghiduri de stil. Este un bijuterie Ruby asta analizează comentariile în CSS în scopul de a genera ghiduri stil de minunat. Holograma are un sistem de template-uri cu câteva stiluri de bază și navigație pentru a face ca ghidul de stil să genereze chiar mai ușor.

6. Styledown

Cu Styledown, puteți scrie cu ușurință ghidajele stilului CSS, deoarece este a Markdown bazate pe generatorul de stil. Acesta va funcționa cu cele mai multe setări de dezvoltare web, deoarece este platformă neutră. Este nevoie de foarte puține lucruri pentru ao face să funcționeze. De asemenea, comentariile pe care trebuie să le adăugați în CSS sunt foarte mici. Puteți crea documentația dvs. CSS fie în comentarii CSS inline, fie ca fișier Markdown separat.

7. KSS

KSS (foi de stil Knyle) este în primul rând a documentație specificație și un format de ghid de stil care are propria sa sintaxă de comentare. KSS include, de asemenea, o bibliotecă Ruby care analizează .Sass, .SCSS, și .css fișierele documentate cu instrucțiunile KSS într-un ghid de stil elegant. KSS este pentru utilizatorii mai avansați și echipele profesionale, deoarece generarea unui ghid de stil cu acesta necesită cunoștințe de codificare.

8. Generatorul ghidului de stil SC5

Cu SC5 Generator ghid stil puteți crea și edita ghiduri de stil direct în browserul dvs. Este bazat pe KSS cu câteva caracteristici interesante incluse, cum ar fi un interfață Utilitar AngularJS care vă ajută să vizualizați, să căutați și să testați stilurile. SC5 utilizează aceeași notație de document ca și KSS. Aceasta susține foile de stil SASS, LESS, PostCSS și pure CSS.

9. Styledocco

StyleDocco este o aplicație Node.js la îndemână creează ghiduri de stil din foile de stil. Puteți să-l instalați cu npm. În ghidul de stil generat, StyleDocco arată o previzualizare cu stilurile pe care le-ați aplicat și un exemplu de cod HTML.

În pagina de pornire a lui StyleDocco, puteți găsi două exemple de ghid de stil, unul generat dintr-o foaie de stil implicită și altul generat de pe un site Bootstrap. Exemplele vă pot ajuta, de asemenea, să ridicați sintaxa de documentare utilizată de SytleDocco.

10. Lab model

Pattern Lab este o colecție de instrumente care vă ajută să creați un sistem de design modular. Pattern Lab este un generator de site-uri statice personalizate, care îmbină împreună toate elementele de stil de pe un site și formează șabloane și pagini din ele. Acesta poate servi drept proiectul dvs. bibliotecă de modele și Ghid de stil frontend. Pattern Lab vă permite să vedeți simultan componentele de stil abstract și in context.