Tíz életstílus-útmutató eszköz a webes tervezők számára - a legjobb

A életstílus-útmutató egy UI elemek és minták dokumentálása egy webhelyről vagy alkalmazásból gyűjtött adatokat azzal a céllal, hogy a fejlesztők használhassák következetes stílusok teljes projektjükön. A múltban a fejlesztők kézzel készítették a stílusvezetőket, ami sok munka. Egy idő után elkezdték automatizálni a munkafolyamatot és a stílusvezető eszközöket, amelyek a front-end kódot átalakítják jól szervezett felhasználói felület könyvtárak kezdtek megjelenni.

Az életstílus-útmutatók eltérnek kódstílus-útmutatók, mivel az utóbbi szabályokat tartalmaz az olvasható és karbantartható kódok írásáról, míg az élő stílus útmutatók a front-end minták gyűjteményei, mint például a gombok, widgetek és tipográfiai elemek CSS-osztályai. Kód stílusvezetők biztosítják kód következetesség, az életstílus-útmutatók biztosítják vizuális konzisztencia egy webhelyen.

Ebben a bejegyzésben 10 praktikus eszközt állítottunk össze, amelyek segíthetnek Önnek készítsen saját életstílus-útmutatót.

1. Stylify Me

Ez az eszköz nagyon szórakoztató: csak illessze be az elemezni kívánt webhely linkjét, és nézze meg, ahogy a stílus útmutatója egy egérkattintással jön létre. Val vel Stylify Me, gyorsan áttekintheti a webhely mintáit, beleértve a színeket, a betűtípusokat, a méretezést és a távolságot. Miután a folyamat befejeződött, megteheti töltse le a stílus útmutatót PDF-ben.

2. Készítő

Hamisító lehetővé teszi, hogy saját UI-eszköztárat építsen, szervezze meg a tervezési rendszert, és az eszközkészlet-kódból készítse el a stílus útmutatót. Ha egy csapatban dolgozik, akkor a Markdownban írhatja le a dokumentációt, hogy megkönnyítse a többi fejlesztő használatát. Segíthet szervezze meg a tervezési / kódolási rutinját a kívánt módon.

3. Frontify

Frontify magában foglalja mindent a digitális makettektől a drótvázig. Ők is rendelkeznek egy stílusvezető eszközzel, amely tiszta minimalista tervezési folyamatot kínál, gond nélkül. Ingyenesen regisztrálhat, és minden szükséges információt kézzel beírhat. A folyamatnak tartalmaznia kell a színpalettát, a betűtípus-választásokat, az ikonokat, a logókat, esetleg szlogeneket vagy a preferált webes másolatot.

4. Aigis

Val vel Aigis, stílusszövegeket hozhat létre bármilyen szöveges fájlból (pl. .css, .SCSS, .styl, .md). A Markdownban is írhat dokumentációt, és testreszabhatja webhelye témáját.

5. Hologram

hologram a Trulia készítette, és kiváló megoldás a stílusvezetők létrehozására. Ez egy Ruby gyöngyszem elemzi a CSS-ben található megjegyzéseket fantasztikus stílusvezetők létrehozásához. A hologramnak van egy sablonrendszere, amely néhány alapvető stílussal és navigációval rendelkezik, így a stílusvezető még könnyebbé válik.

6. Styledown

Val vel Styledown, könnyedén írhat CSS-stílusú útmutatókat, mivel ez a Markdown alapú stílusvezető generátor. A legtöbb webfejlesztési beállítással együtt fog működni, mivel platform-semleges. Nagyon keveset igényel, hogy elinduljon és működjön. A CSS-hez hozzáadandó megjegyzések nagyon minimálisak. CSS dokumentációját akár inline CSS megjegyzésekben, akár külön Markdown fájlként hozhatja létre.

7. KSS

KSS (Knyle stíluslapok) elsősorban a dokumentáció specifikáció és egy stílusvezető formátumban saját kommentáló szintaxisa. A KSS egy Ruby könyvtárat is tartalmaz, amely elemzi .sass, .SCSS, és .css a KSS-irányelvekkel dokumentált fájlok egy stílusos útmutatóba. A KSS a fejlettebb felhasználóknak és a professzionális csapatoknak szól, hiszen a stílus útmutató létrehozása szükséges a kódoláshoz.

8. SC5 Style Guide Generator

A ... val SC5 stílusvezető generátor a böngészőben közvetlenül létrehozhat és szerkesztheti a stílusvezetőket. Ez KSS alapján néhány hűvös funkcióval, például egy AngularJS meghajtású felhasználói felület, amely segít a stílusok megtekintésében, keresésében és tesztelésében. Az SC5 ugyanazt a dokumentumot használja, mint a KSS. Támogatja a SASS, a LESS, a PostCSS és a tiszta CSS stíluslapokat.

9. Styledocco

StyleDocco egy praktikus Node.js alkalmazás stílusstílusokat hoz létre a stíluslapokból. Telepítheti npm-el. A létrehozott stílusvezérlőben a StyleDocco előnézetet jelenít meg az alkalmazott stílusokkal és a HTML-kód példájával.

A StyleDocco kezdőlapján két stílusvezető példát találhat, amelyek közül az egyik alapértelmezett stíluslapból készült, és egy másik a Bootstrap webhelyről. A példák segíthetnek a SytleDocco által használt dokumentációs szintaxis felvételében is.

10. Minta lab

Minta Lab olyan eszközök gyűjteménye, amelyek segítenek létrehozni a moduláris tervezési rendszer. A Pattern Lab egy egyéni statikus webhelygenerátor, amely az összes stíluselemet összeköti a webhelyen, és sablonokat és oldalakat alkot. Ez a projekt lehet minta könyvtár és frontend stílus útmutató. A Pattern Lab lehetővé teszi, hogy a stíluselemeket egyidejűleg láthassa szórakozottan és Szövegkörnyezetben.