Kymmenen Living Style Guide -työkalua Web-suunnittelijoille - Best of
elävän tyylin opas on käyttöliittymän elementtien ja kuvioiden dokumentointi kerätään sivustosta tai sovelluksesta, jotta kehittäjät voivat käyttää niitä johdonmukaisia tyylejä koko projektissaan. Aiemmin kehittäjät luovat tyylinoppaita käsin, mikä on paljon työtä. Hetken kuluttua he alkoivat automatisoida työnkulun ja tyylinohjaustyökalut, jotka muokkaavat etupään koodin hyvin järjestetyt käyttöliittymäkirjastot ovat alkaneet näkyä.
Elävän tyylin oppaat ovat erilaisia koodityylioppaat, jälkimmäinen sisältää säännöt luettavan ja ylläpidettävän koodin kirjoittamisesta, kun taas elävän tyylin oppaat ovat kokoelmia etupään kuvioista, kuten CSS-luokkia painikkeille, widgetille ja typografisille elementeille. Koodityylioppaat varmistavat koodin yhdenmukaisuus, kun taas elävän tyylin oppaat varmistavat visuaalinen johdonmukaisuus sivustossa.
Tässä viestissä olemme koonneet 10 kätevää työkalua, jotka voivat auttaa sinua luo oma elintavat-opas.
1. Stylify Me
Tämä työkalu on hauskaa: liitä vain analysoitavan Web-sivuston linkki ja katsele, kun sen tyylinohjain luodaan yhdellä hiiren napsautuksella. Kanssa Stylify Me, voit nopeasti saada yleiskuvan sivuston kuvioista, mukaan lukien värit, fontit, koon ja etäisyyden. Kun prosessi on valmis, voit lataa tyyliopas PDF-muodossa.
2. Valmistaja
Fabricator voit rakentaa oman UI-työkalupakettisi, järjestää suunnittelujärjestelmän ja luoda tyylisuuntauksen työkalupakki-koodista. Jos työskentelet tiimissä, voit kirjoittaa Markdown-dokumentaation helpottamaan muiden kehittäjien käyttöä. Se voi auttaa sinua järjestä suunnittelun / koodauksen rutiini haluamallasi tavalla.
3. Frontify
Frontify Sisältää kaiken, mitä digitaalisista makroista on tehty langattomaan kehykseen. Heillä on myös tyyliopastustyökalu, joka tarjoaa puhtaan minimalistisen suunnitteluprosessin ilman vaivaa. Voit rekisteröityä ilmaiseksi ja lisätä kaikki tarvittavat tiedot manuaalisesti. Prosessin tulisi sisältää väripaletti, fonttivalinnat, kuvakkeet, logot, mahdollisesti iskulauseet tai suosittu web-kopio.
4. Aigis
Kanssa Aigis, voit luoda tyylioppaita mistä tahansa tekstitiedostosta (esim. .css, .SCSS, .styl, .md). Voit myös kirjoittaa dokumentteja Markdownissa ja muokata sivustosi teemaa.
5. Hologrammi
Hologrammi on luotu Trulia, ja se on loistava ratkaisu tyylioppaiden tuottamiseen. Se on Ruby-helmi jäsentää kommentteja CSS: ssä jotta voit luoda mahtavia tyylioppaita. Hologrammissa on mallinnusjärjestelmä, jossa on joitakin perusasioita ja navigointia, jotta tyylisi opas on entistä helpompaa.
6. Styledown
Kanssa Styledown, voit kirjoittaa helposti CSS-tyylioppaita, koska se on a Markdown-pohjainen tyyliopastaja. Se toimii useimpien web-kehitysasetusten kanssa, koska se on alustan kannalta neutraali. Se vaatii hyvin vähän sen saamista ja käyttöä. Myös kommentit, jotka sinun on lisättävä CSS: ään, ovat hyvin vähäisiä. Voit luoda CSS-dokumenttisi joko sisäisessä CSS-kommentissa tai erillisenä Markdown-tiedostona.
7. KSS
KSS (Knyle Style Sheets) on ensisijaisesti a dokumentaation määrittely ja tyylisuuntausmuodossa omaa kommentointisyntaksi. KSS sisältää myös Ruby-kirjaston, joka jäsentää .nenäkkyys, .SCSS, ja .css tiedostot, jotka on dokumentoitu KSS-ohjeiden mukaan, tyylikkääksi oppaaksi. KSS on kehittyneempiä käyttäjiä ja ammattitaitoisia tiimejä, sillä tyylisuunnittelijan luominen vaatii koodausta.
8. SC5 Style Guide Generator
Kanssa SC5 Style Guide Generator voit luoda ja muokata tyylioppaita suoraan selaimessasi. se on perustuu KSS: ään sisältää joitakin hienoja ominaisuuksia, kuten AngularJS-käyttöliittymä, jonka avulla voit katsella, etsiä ja testata tyylejäsi. SC5 käyttää samaa asiakirjamerkintää kuin KSS. Se tukee SASS-, LESS-, PostCSS- ja CSS-tyylitaulukoita.
9. Styledocco
StyleDocco on kätevä Node.js-sovellus luo tyylisivuja tyylisivuiltasi. Voit asentaa sen npm: llä. Syöttämässä styleguidessa StyleDocco näyttää esikatselun, jossa on käytetyt tyylit ja esimerkki HTML-koodista.
StyleDocon kotisivulla voit löytää kaksi tyylioppaiden esimerkkiä, joista toinen on luotu oletustyyli-taulukosta ja toinen Bootstrap-sivustosta. Esimerkit voivat myös auttaa sinua poimimaan SytleDocco-dokumenttien syntaksi.
10. Kuvio Lab
Kuvio Lab on kokoelma työkaluja, joiden avulla voit luoda a modulaarinen suunnittelujärjestelmä. Pattern Lab on mukautettu staattisen sivuston generaattori, joka yhdistää kaikki sivuston tyylielementit ja muodostaa niistä malleja ja sivuja. Se voi toimia hankkeena kuvion kirjasto ja frontend-tyylin opas. Pattern Lab -toiminnon avulla voit nähdä tyylisi osia samanaikaisesti abstraktisti ja asiayhteydessä; kontekstissa.
