Dieci strumenti di guida al stile di vita per i web designer - Il meglio di

UN guida allo stile di vita è un documentazione degli elementi e dei modelli dell'interfaccia utente raccolti da un sito o applicazione allo scopo di consentire agli sviluppatori di utilizzare stili coerenti in tutto il loro progetto. In passato, gli sviluppatori hanno creato manualmente le guide di stile, il che richiede molto lavoro. Dopo un po ', hanno iniziato ad automatizzare il flusso di lavoro e gli strumenti di guida allo stile che trasformano il codice front-end in librerie UI ben organizzate hanno iniziato a comparire.

Le guide di stile di vita sono diverse da guide di stile del codice, in quanto quest'ultimo contiene regole su come scrivere codice leggibile e gestibile, mentre le guide dello stile di vita sono collezioni di pattern front-end, come le classi CSS per pulsanti, widget ed elementi tipografici. Le guide di stile del codice assicurano coerenza del codice, mentre le guide di stile vivente assicurano coerenza visiva attraverso un sito.

In questo post abbiamo messo insieme 10 strumenti utili che possono aiutarti genera la tua guida di stile di vita.

1. Stylify Me

Questo strumento è molto divertente: basta incollare il collegamento del sito Web che si desidera analizzare e osservare come la sua guida di stile viene generata con un clic del mouse. Con Stylify Me, puoi rapidamente ottenere una panoramica dei modelli di un sito, inclusi colori, caratteri, dimensionamento e spaziatura. Una volta che il processo è completo, puoi farlo scarica la guida di stile in PDF.

2. Costruttore

fabricator ti consente di creare il tuo kit di strumenti dell'interfaccia utente, organizzare il tuo sistema di progettazione e generare una guida di stile dal codice del tuo toolkit. Se lavori in un team, puoi scrivere la documentazione in Markdown per renderlo più semplice da usare per gli altri sviluppatori. Può aiutarti organizza la tua routine di progettazione / codifica nel modo che preferisci.

3. Frontifia

Frontify include tutto, dai prototipi digitali al wireframing. Hanno anche uno strumento di guida di stile che offre un processo di progettazione minimalista pulito senza problemi. Puoi registrarti gratuitamente e inserire tutte le informazioni necessarie manualmente. Il processo dovrebbe includere tavolozza dei colori, scelte dei caratteri, icone, loghi, forse slogan o copia web preferita.

4. Aigis

Con Aigis, puoi generare guide di stile da qualsiasi file di testo (ad es. .css, .SCSS, .Styl, .md). Puoi anche scrivere la documentazione in Markdown e personalizzare il tema del tuo sito.

5. Ologramma

Ologramma è stato creato da Trulia ed è un'ottima soluzione per la generazione di guide di stile. È una gemma di Ruby quella analizza i commenti nel tuo CSS per generare fantastiche guide di stile. Hologram ha un sistema di template con alcuni stili di base e navigazione per rendere ancora più semplice la guida allo stile.

6. Styledown

Con Styledown, puoi scrivere le guide di stile CSS con facilità, dato che è a Generatore di guide di stile basato su Markdown. Funzionerà con la maggior parte delle configurazioni di sviluppo web, poiché è neutrale rispetto alla piattaforma. Richiede molto poco per farlo funzionare. Inoltre, i commenti che devi aggiungere al tuo CSS sono minimi. È possibile creare la documentazione CSS in commenti CSS in linea o come file Markdown separato.

7. KSS

KSS (fogli stile Knyle) è principalmente a specifica della documentazione e un formato guida di stile che ha la sua sintassi di commento. KSS include anche una libreria Ruby che analizza .insolenza, .SCSS, e .css file documentati con le linee guida KSS in una guida di stile pulito. KSS è per utenti più esperti e team di professionisti, poiché la generazione di una guida di stile richiede conoscenze di codifica.

8. Generatore di guida di stile SC5

Con il SC5 Style Guide Generator puoi creare e modificare le guide di stile direttamente nel tuo browser. È basato su KSS con alcune interessanti funzionalità incluse, come un'interfaccia utente di AngularJS che ti aiuta a visualizzare, cercare e testare i tuoi stili. SC5 utilizza la stessa notazione del documento come KSS. Supporta i fogli di stile SASS, LESS, PostCSS e CSS.

9. Styledocco

StyleDocco è una comoda app Node.js che crea guide di stile dai tuoi fogli di stile. Puoi installarlo con npm. Nella styleguide generata, StyleDocco mostra un'anteprima con gli stili applicati e un esempio del codice HTML.

Sulla home page di StyleDocco, puoi trovare due esempi guida di stile, uno generato da un foglio di stile predefinito e un altro generato da un sito Bootstrap. Gli esempi possono anche aiutare a raccogliere la sintassi della documentazione utilizzata da SytleDocco.

10. Pattern Lab

Pattern Lab è una raccolta di strumenti che ti aiutano a creare un sistema di progettazione modulare. Pattern Lab è un generatore di sito statico personalizzato che unisce tutti gli elementi di stile di un sito e forma modelli e pagine da essi. Può servire come il tuo progetto libreria di modelli e guida allo stile del frontend. Pattern Lab ti consente di vedere i tuoi componenti di stile contemporaneamente astrattamente e nel contesto.