Deset Living Style Guide Tools pro webové designéry - Best of
A průvodce stylem je dokumentaci prvků a vzorů uživatelského rozhraní shromažďovány z webu nebo aplikace s cílem umožnit vývojářům používat konzistentní styly napříč celým projektem. V minulosti vývojáři vytvořili manuály stylů, což je hodně práce. Po chvíli začali automatizovat pracovní postup a nástroje průvodce stylem, které transformují frontendový kód do dobře organizované knihovny UI se začaly objevovat.
Průvodci v živém stylu se liší od průvodce stylem kódu, jako ty obsahují pravidla o tom, jak psát čitelný a udržovatelný kód, zatímco průvodce živým stylem kolekce vzorů front-end, jako jsou třídy CSS pro tlačítka, widgety a typografické prvky. Průvodci kódovým stylem zajišťují konzistence kódu, zatímco průvodce živým stylem zajišťuje vizuální konzistence přes web.
V tomto příspěvku jsme sestavili 10 praktických nástrojů, které vám mohou pomoci vytvořte si vlastní průvodce životním stylem.
1. Stylify Me
Tento nástroj je spoustu legrace: stačí vložit odkaz na webové stránky, které chcete analyzovat, a sledovat, jak jeho styl průvodce je generován jedním kliknutím myši. S Stylify Me, můžete rychle získat přehled o vzorech stránek, včetně barev, fontů, velikosti a mezer. Jakmile je proces dokončen, můžete Stáhněte si průvodce stylem ve formátu PDF.
2. Zpracovatel
Zpracovatel vám umožní vytvořit si vlastní UI toolkit, organizovat svůj design systém a generovat průvodce stylem z vašeho kódu sady nástrojů. Pokud pracujete v týmu, můžete dokumentaci v programu Markdown napsat, aby bylo pro ostatní vývojáře jednodušší. To vám může pomoci organizovat rutinu návrhu / kódování způsobem, jak se vám líbí.
3. Přední
Frontify zahrnuje vše od digitálních modelů až po wireframing. Oni také mají styl průvodce nástroj, který nabízí čistý minimalistický design proces bez potíží. Můžete se zdarma zaregistrovat a všechny potřebné informace zadat ručně. Proces by měl zahrnovat barevnou paletu, výběr písma, ikony, loga, případně slogany nebo preferovanou webovou kopii.
4. Aigis
S Aigis, můžete vytvářet příručky stylů z libovolných textových souborů (např. .css, .scss, .styl, .md). Můžete také napsat dokumentaci v aplikaci Markdown a přizpůsobit motiv webu.
5. Hologram
Hologram byl vytvořen Trulia, a je skvělým řešením pro generování stylů. To je ruby drahokam, který analyzuje komentáře ve vašem CSS za účelem vytvoření úžasných stylů. Hologram má šablonovací systém s některými základními styly a navigací, aby váš průvodce stylem byl ještě snadnější.
6. Styledown
S Styledown, můžete psát CSS styl průvodce s lehkostí, jak je to Generátor stylů značky Markdown. Bude pracovat s většinou nastavení pro vývoj webových aplikací, protože je platformově neutrální. Vyžaduje to jen velmi málo, aby to fungovalo. Také komentáře, které potřebujete přidat do CSS, jsou velmi minimální. Dokumentaci CSS můžete vytvořit buď v komentářích CSS inline, nebo jako samostatný soubor Markdown.
7. KSS
KSS (Knyle Style Sheets) je především specifikace dokumentace a formát stylu průvodce, který má vlastní komentářovou syntaxi. KSS také obsahuje knihovnu Ruby, která analyzuje .sass, .scss, a .css soubory dokumentované směrnicemi KSS do přehledného průvodce. KSS je pro pokročilé uživatele a profesionální týmy, protože generování průvodce stylem s ním vyžaduje znalosti kódování.
8. SC5 Style Guide Generator
S Generátor SC5 Style Guide můžete vytvářet a upravovat průvodce stylem přímo v prohlížeči. to je založené na KSS včetně některých skvělých funkcí, jako je například uživatelské rozhraní poháněné AngularJS, které vám pomůže zobrazit, vyhledávat a testovat vaše styly. SC5 používá stejný zápis dokumentu jako KSS. Podporuje SASS, LESS, PostCSS a čisté styly CSS.
9. Styledocco
StyleDocco je užitečná aplikace Node.js vytvoří styl průvodce z vašich stylů. Můžete jej nainstalovat pomocí npm. Ve vytvořeném styleguide, StyleDocco zobrazuje náhled se styly, které jste použili, a příklad HTML kódu.
Na domovské stránce StyleDocco můžete najít dva příklady průvodce stylem, jeden vygenerovaný z výchozí šablony stylů a další vygenerovaný z webu Bootstrap. Příklady vám také mohou pomoci při výběru syntaxe SytleDocco.
10. Vzorec Lab
Vzor Lab je kolekce nástrojů, které vám pomohou vytvořit modulární konstrukční systém. Vzorec Lab je vlastní statický generátor stránek, který spojuje všechny prvky stylu na webu a vytváří šablony a stránky z nich. Může sloužit jako váš projekt knihovna vzorů a průvodce stylem. Vzorec Lab vám umožní vidět vaše komponenty stylu současně abstraktně a v souvislosti s.
