Deset življenjski slog Vodnik Orodja za spletne oblikovalce - Best of
A vodnik po življenjskem slogu je dokumentacijo elementov in vzorcev uporabniškega vmesnika zbrani s spletnega mesta ali aplikacije z namenom, da razvijalcem omogočijo uporabo skladne sloge v celotnem projektu. V preteklosti so razvijalci ročno ustvarjali slog vodnike, kar je veliko dela. Čez nekaj časa so začeli avtomatizirati delovne postopke in orodja za vodnik po slogu, ki preoblikujejo sprednji del kode dobro organizirane knjižnice UI so se začeli pojavljati.
Vodniki za življenjski stil se razlikujejo od vodnikov vodniki za slog kode, slednji vsebujejo pravila o pisanju berljive in vzdrževalne kode, medtem ko so živi slogi vodniki zbirke vzorcev front-end, kot so razredi CSS za gumbe, pripomočke in tipografske elemente. Vodniki za kodni stil zagotavljajo doslednost kode, življenjski slog pa zagotavlja vizualna skladnost na spletnem mestu.
V tej objavi smo sestavili 10 priročnih orodij, ki vam lahko pomagajo ustvarite svoj vodnik po življenjskem slogu.
1. Stylify Me
To orodje je zelo zabavno: le prilepite povezavo na spletno stran, ki bi jo radi analizirali, in si oglejte, kako je njegov slog vodnik ustvarjen z enim klikom miške. S Stylify Me, lahko hitro pridobite pregled vzorcev spletnega mesta, vključno z barvami, pisavami, velikostjo in razmikom. Ko je postopek končan, lahko prenesite slog v PDF.
2. Proizvajalec
Proizvajalec vam omogoča, da zgradite svoj orodje uporabniškega vmesnika, organizirate sistem oblikovanja in ustvarite vodnik za stil iz kode orodij. Če delate v skupini, lahko dokumentacijo v programu Markdown napišete, da bi drugim razvijalcem olajšali uporabo. To vam lahko pomaga organizirajte svojo rutino oblikovanja / kodiranja na način, ki ga želite.
3. Frontify
Frontify vključuje vse od digitalnih modelov do žičnega okvirja. Imajo tudi orodje za vodnik po slogu, ki ponuja čist minimalističen proces oblikovanja brez težav. Lahko se prijavite brezplačno in ročno vstavite vse potrebne informacije. Proces mora vključevati barvno paleto, izbire pisav, ikone, logotipe, morda slogane ali želeno spletno kopijo.
4. Aigis
S Aigis, lahko izdelate vodnike slog iz vseh besedilnih datotek (npr. .css, .scss, .styl, .md). V Markdown lahko tudi napišete dokumentacijo in prilagodite temo spletnega mesta.
5. Hologram
Hologram je ustvaril Trulia in je odlična rešitev za ustvarjanje slogov. To je Ruby gem razčleni komentarje v vašem CSS za ustvarjanje odličnih slogov vodnikov. Hologram ima templating sistem z nekaterimi osnovnimi slogi in navigacijo, da bo vaš slog vodnik še lažji.
6. Oblikovanje
S Styledown, z lahkoto lahko napišete vodila CSS stila, saj je Markdown-based generator za vodnik po slogu. Deloval bo z večino spletnih razvojnih postavitev, saj je platformno nevtralen. To zahteva zelo malo, da bi ga vzpostavili in zagnali. Tudi komentarji, ki jih morate dodati v vaš CSS, so zelo minimalni. Dokumentacijo CSS lahko ustvarite v vrstnem redu CSS komentarjev ali kot ločeno datoteko Markdown.
7. KSS
KSS (listi stilov Knyle) je predvsem a specifikacijo dokumentacije in obliko vodnika po slogu lastno sintakso komentiranja. KSS vključuje tudi knjižnico Ruby, ki razčleni .sass, .scss, in .css datoteke, ki so dokumentirane s smernicami KSS, v priročni vodnik po slogu. KSS je namenjen naprednejšim uporabnikom in profesionalnim ekipam, saj ustvarjanje vodnika po slogu zahteva kodiranje znanja.
8. Generator vodnika za stil SC5
Z Generator vodnika za stil SC5 vodnike slog lahko ustvarite in urejate neposredno v brskalniku. je na podlagi KSS z nekaterimi kul funkcijami, kot je uporabniški vmesnik AngularJS, ki vam omogoča ogled, iskanje in testiranje vaših stilov. SC5 uporablja isto oznako dokumenta kot KSS. Podpira SASS, LESS, PostCSS in čiste sloge CSS.
9. Styledocco
StyleDocco je priročna aplikacija Node.js, ki ustvarja vodnike slog iz vaših slogov slogov. Namestite ga lahko z npm. V ustvarjenem slogu za slog StyleDocco prikaže predogled s stili, ki ste jih uporabili, in primer kode HTML.
Na domači strani StyleDocco lahko najdete dva primera priročnika za slog, enega ustvarjenega iz privzetega sloga, in drugega, ki je ustvarjen iz mesta Bootstrap. Primeri vam lahko pomagajo tudi pri prevzemu sintakse dokumentacije, ki jo uporablja SytleDocco.
10. Lab Lab
Lab Lab je zbirka orodij, ki vam pomagajo ustvariti modularni sistem oblikovanja. Labs Pattern je prilagojen statični generator spletnega mesta, ki združuje vse elemente sloga na spletnem mestu in iz njih oblikuje predloge in strani. Lahko služi kot vaš projekt knjižnica vzorcev in Priročnik za slog vmesnika. Lab Lab vam omogoča hkratno prikazovanje vaših sestavnih delov slog abstraktno in v kontekstu.
