Dez ferramentas de guia de estilo de vida para Web Designers - Best of

UMA guia de estilo de vida é um documentação de elementos e padrões da interface do usuário coletadas de um site ou aplicativo com o objetivo de permitir que os desenvolvedores usem estilos consistentes em todo o seu projeto. No passado, os desenvolvedores criavam guias de estilo manualmente, o que é muito trabalhoso. Depois de um tempo, eles começaram a automatizar o fluxo de trabalho e as ferramentas de guia de estilo que transformam o código de front-end em bibliotecas de interface do usuário bem organizadas começaram a aparecer.

Guias de estilo de vida são diferentes guias de estilo de código, como o último contém regras sobre como escrever código legível e de fácil manutenção, enquanto guias de estilo de vida são coleções de padrões front-end, como classes CSS para botões, widgets e elementos tipográficos. Guias de estilo de código garantem consistência de código, enquanto guias de estilo vivos garantem consistência visual em um site.

Neste post, reunimos 10 ferramentas úteis que podem ajudá-lo gere seu próprio guia de estilo de vida.

1. Estilize-me

Esta ferramenta é muito divertida: basta colar o link do site que você gostaria de analisar e ver como seu guia de estilo é gerado em um clique do mouse. Com Me estilize, você pode obter rapidamente uma visão geral dos padrões de um site, incluindo cores, fontes, tamanho e espaçamento. Quando o processo estiver concluído, você pode baixe o guia de estilo em PDF.

2. Fabricador

Fabricante permite que você crie seu próprio kit de ferramentas de interface do usuário, organize seu sistema de design e gere um guia de estilo a partir do código do kit de ferramentas. Se você trabalha em equipe, pode escrever a documentação no Markdown para facilitar o uso de outros desenvolvedores. Pode ajudá-lo a organize sua rotina de design / codificação da maneira que você gosta.

3. Frontify

Frontify inclui tudo, desde mockups digitais até wireframing. Eles também têm uma ferramenta de guia de estilo que oferece um processo de design limpo e minimalista sem problemas. Você pode se inscrever gratuitamente e inserir todas as informações necessárias manualmente. O processo deve incluir paleta de cores, opções de fonte, ícones, logotipos, possivelmente slogans ou cópia da Web preferida..

4. Aigis

Com Aigis, você pode gerar guias de estilo a partir de qualquer arquivo de texto (por exemplo,. .css, .scss, .styl, .md). Você também pode escrever documentação no Markdown e personalizar o tema do site.

5. Holograma

Holograma foi criado pela Trulia e é uma ótima solução para gerar guias de estilo. É uma jóia de rubi que analisa comentários no seu CSS para gerar guias de estilo impressionantes. O holograma tem um sistema de templates com alguns estilos básicos e navegação para tornar seu guia de estilo ainda mais fácil.

6. Styledown

Com Styledown, você pode escrever guias de estilo CSS com facilidade, pois é um Gerador de guia de estilo baseado em Markdown. Ele funcionará com a maioria das configurações de desenvolvimento da web, pois é neutro em relação à plataforma. Isso requer muito pouco para ser instalado e executado. Além disso, os comentários que você precisa adicionar ao seu CSS são mínimos. Você pode criar sua documentação CSS em comentários CSS in-line ou como um arquivo Markdown separado.

7. KSS

KSS (Folhas de Estilo Knyle) é principalmente um especificação de documentação e um formato de guia de estilo que tem sua própria sintaxe de comentário. O KSS também inclui uma biblioteca Ruby que analisa .sass, .scss, e .css arquivos documentados com as diretrizes do KSS em um guia de estilo elegante. O KSS é para usuários mais avançados e equipes profissionais, pois a geração de um guia de estilo requer conhecimento de codificação.

8. Gerador de Guia de Estilo SC5

Com o Gerador de guia de estilo SC5 você pode criar e editar guias de estilo diretamente no seu navegador. Isto é baseado no KSS com alguns recursos interessantes incluídos, como uma interface com o usuário do AngularJS que ajuda a visualizar, pesquisar e testar seus estilos. O SC5 usa a mesma notação de documento do KSS. Suporta folhas de estilo CSS SASS, LESS, PostCSS e CSS puro.

9. Styledocco

StyleDocco é um aplicativo Node.js acessível que cria guias de estilo a partir de suas folhas de estilo. Você pode instalá-lo com npm. No guia de estilo gerado, o StyleDocco mostra uma prévia com os estilos que você aplicou e um exemplo do código HTML.

Na página inicial do StyleDocco, você pode encontrar dois exemplos de guia de estilo, um gerado a partir de uma folha de estilo padrão e outro gerado a partir de um site do Bootstrap. Os exemplos também podem ajudá-lo a obter a sintaxe da documentação que o SytleDocco usa.

10. Laboratório de Padrões

Laboratório de Padrões é uma coleção de ferramentas que ajudam você a criar sistema de design modular. O Pattern Lab é um gerador de site estático personalizado que une todos os elementos de estilo em um site e forma modelos e páginas a partir deles. Pode servir como seu projeto biblioteca de padrões e guia de estilo frontend. O Pattern Lab permite que você veja seus componentes de estilo simultaneamente abstratamente e no contexto.