Desať Sprievodca Životný Štýl Nástroje pre Web Designers - najlepšie z

životný štýl sprievodca je a dokumentácia prvkov a vzorov používateľského rozhrania zozbierané z lokality alebo aplikácie s cieľom umožniť vývojárom používať konzistentné štýly v celom projekte. V minulosti vývojári vytvorili štýlovú príručku ručne, čo je veľa práce. Po chvíli začali automatizovať tok pracovných postupov a sprievodcovské nástroje štýlov, ktoré transformujú predný kód dobre organizované knižnice UI sa začali objavovať.

Živé štýly sa líšia od príručky štýlu kódov, pretože tieto obsahujú pravidlá o tom, ako zapisovať čitateľný a udržiavateľný kód, zatiaľ čo žijú štýly vodítka kolekcií predných vzorov, ako sú napríklad triedy CSS pre tlačidlá, widgety a typografické prvky. Sprievodca štýlom kódy zabezpečiť konzistencia kódu, zatiaľ čo živí sprievodcovia zabezpečujú vizuálna konzistencia cez web.

V tomto príspevku sme vytvorili 10 praktických nástrojov, ktoré vám môžu pomôcť vytvorte si vlastný sprievodca pre životný štýl.

1. Štylizujte ma

Tento nástroj je veľa zábavy: jednoducho vložte odkaz na webové stránky, ktoré chcete analyzovať, a sledujte, ako sa sprievodca štýlom vytvára jediným kliknutím myši. s Štylizujte ma, môžete rýchlo získať prehľad o vzorkách webu vrátane farieb, písiem, veľkosti a vzdialenosti. Po ukončení procesu môžete Stiahnite si príručku štýlov v PDF.

2. Výrobca

falšovateľ vám umožňuje vytvoriť vlastný nástroj pre používateľské rozhranie, usporiadať systém návrhu a vytvoriť sprievodcu štýlom z vášho kódu nástrojov. Ak pracujete v tíme, môžete písať dokumentáciu v aplikácii Markdown, aby ste ju mohli iným vývojárom jednoduchšie používať. Môže vám to pomôcť usporiadajte svoj návrh / kódovanie rutiny spôsobom, ktorý sa vám páči.

3. Predbehnite

Frontify zahŕňa všetko od digitálnych modelov až po drôtov. Tiež majú štýlový vodiaci nástroj, ktorý ponúka čistý minimalistický dizajnový proces bez problémov. Môžete sa zaregistrovať zadarmo a vložiť všetky potrebné informácie manuálne. Proces by mal obsahovať farebnú paletu, voľby písma, ikony, logá, prípadne slogany alebo preferovanú kópiu na webe.

4. Aigis

s Aigis, môžete generovať príručky štýlov z akýchkoľvek textových súborov (napr. .css, .SCSS, .štýl, .md). Môžete tiež písať dokumentáciu v Markdown a prispôsobiť tému webu.

5. Hologram

hologram bol vytvorený spoločnosťou Trulia a je skvelým riešením pre vytváranie sprievodcov štýlom. Je to Ruby klenot analyzuje komentáre vo vašom CSS s cieľom vytvoriť úžasné sprievodcov štýlom. Hologram má šablónový systém s niekoľkými základnými štýlmi a navigáciou, aby ste ešte viac uľahčili sprievodcu štýlom.

6. Styledown

s Styledown, môžete písať CSS sprievodcov s ľahkosťou, pretože je to a Generátor generátorov štýlov založený na značkách. Bude pracovať s väčšinou nastavení vývoja webu, pretože je platformovo neutrálny. Vyžaduje to veľmi málo, aby sa dostal do prevádzky. Tiež komentáre, ktoré musíte pridať do svojho CSS, sú veľmi minimálne. Dokumentáciu CSS môžete vytvoriť buď v komentároch CSS alebo ako samostatný súbor Markdown.

7. KSS

KSS (Knyle Style Sheets) je predovšetkým a špecifikácia dokumentácie a formát sprievodcu štýlom, ktorý má jej vlastnú syntaktickú poznámku. KSS tiež obsahuje Ruby knižnicu, ktorá analyzuje .Sass, .SCSS, a .css súbory zdokumentované pomocou usmernení KSS do príručky štýlu. KSS je pre pokročilejších používateľov a profesionálne tímy, pretože vytváranie sprievodcu štýlom s nimi vyžaduje znalosť kódovania.

8. Sprievodca generátorom štýlu SC5

S Sprievodca generátorom štýlu SC5 môžete vytvárať a upravovať príručky štýlov priamo vo vašom prehliadači. to je založené na KSS s niektorými zaujímavými funkciami, ako je rozhranie s rozhraním AngularJS, ktoré vám pomôže zobraziť, vyhľadávať a otestovať svoje štýly. SC5 používa rovnakú notáciu dokumentu ako KSS. Podporuje SASS, LESS, PostCSS a čisté štýly CSS.

9. Styledocco

StyleDocco je praktická aplikácia Node.js, ktorá vytvára príručky štýlov zo šablón so štýlmi. Môžete ho nainštalovať pomocou npm. Vo vygenerovanom styleguide sa v štýle StyleDocco zobrazuje náhľad so štýlmi, ktoré ste použili, a príkladom kódu HTML.

Na domovskej stránke služby StyleDocco nájdete dva príklady sprievodcov štýlom, jeden generovaný zo štandardného štýlu šablón a druhý vygenerovaný z lokality Bootstrap. Príklady vám tiež pomôžu vyzdvihnúť syntax dokumentácie SytleDocco.

10. Pattern Lab

Laboratórium vzorov je kolekcia nástrojov, ktoré vám pomôžu vytvoriť modulárny dizajnový systém. Pattern Lab je vlastný statický generátor webových stránok, ktorý spája všetky prvky štýlu na webe a vytvára šablóny a stránky z nich. Môže slúžiť ako váš projekt knižnica vzorov a sprievodca štýlom frontend. Laboratórium Pattern vám umožňuje súčasne vidieť vaše súčasti štýlu abstraktne a v kontexte.