Dix outils de guide de style de vie pour les concepteurs Web - Best of
UNE guide de style de vie est un documentation des éléments de l'interface utilisateur et des modèles collectées à partir d'un site ou d'une application dans le but de permettre aux développeurs d'utiliser styles cohérents dans tout leur projet. Auparavant, les développeurs créaient des guides de style manuellement, ce qui représente beaucoup de travail. Après un certain temps, ils ont commencé à automatiser le flux de travail et à utiliser des outils de guide de style qui transforment le code frontal en bibliothèques d'interface utilisateur bien organisées ont commencé à apparaître.
Les guides de style de vie sont différents de guides de style de code, ces derniers contiennent des règles sur la rédaction de code lisible et maintenable, tandis que les guides de style de vie sont collections de modèles front-end, telles que des classes CSS pour des boutons, des widgets et des éléments typographiques. Les guides de style de code assurent cohérence du code, tandis que les guides de style de vie assurent cohérence visuelle à travers un site.
Dans cet article, nous avons rassemblé 10 outils pratiques qui peuvent vous aider générer votre propre guide de style de vie.
1. Me styliser
Cet outil est très amusant: il suffit de coller le lien du site Web que vous souhaitez analyser et de regarder le guide de style généré en un clic de souris. Avec Me styliser, vous pouvez rapidement obtenir une vue d'ensemble des modèles d'un site, y compris les couleurs, les polices, la taille et l'espacement. Une fois le processus terminé, vous pouvez télécharger le guide de style en PDF.
2. fabricant
Fabricant vous permet de créer votre propre boîte à outils d'interface utilisateur, d'organiser votre système de conception et de générer un guide de style à partir de votre code de boîte à outils. Si vous travaillez en équipe, vous pouvez écrire la documentation dans Markdown pour faciliter son utilisation par les autres développeurs. Cela peut vous aider à organiser votre routine de conception / codage comme tu veux.
3. Frontifier
Frontifier comprend tout, des maquettes numériques aux structures filaires. Ils ont également un outil de guide de style qui offre un processus de conception minimaliste propre et sans tracas. Vous pouvez vous inscrire gratuitement et insérer manuellement toutes les informations nécessaires. Le processus devrait inclure une palette de couleurs, des choix de polices, des icônes, des logos, éventuellement des slogans ou une copie Web préférée..
4. Aigis
Avec Aigis, vous pouvez générer des guides de style à partir de n’importe quel fichier texte (par exemple,. .css, .scss, .styl, .Maryland). Vous pouvez également écrire de la documentation dans Markdown et personnaliser le thème de votre site..
5. Hologramme
Hologramme a été créé par Trulia et constitue une excellente solution pour générer des guides de style. C'est un joyau de rubis qui analyse les commentaires dans votre CSS afin de générer des guides de style impressionnants. Hologram a un système de gabarit avec quelques styles de base et une navigation pour rendre votre guide de style encore plus facile à générer.
6. Styledown
Avec Styledown, vous pouvez facilement écrire des guides de style CSS, car c’est un Générateur de guides de style basé sur le markdown. Il fonctionnera avec la plupart des configurations de développement Web, car il est indépendant de la plate-forme. Il en faut très peu pour le rendre opérationnel. De plus, les commentaires que vous devez ajouter à votre CSS sont très minimes. Vous pouvez créer votre documentation CSS dans des commentaires CSS intégrés ou dans un fichier Markdown séparé..
7. KSS
KSS (Feuilles De Style Knyle) est principalement un spécification de la documentation et un format de guide de style qui a sa propre syntaxe de commentaire. KSS comprend également une bibliothèque Ruby qui analyse .toupet, .scss, et .css fichiers documentés avec les directives KSS dans un guide de style soigné. KSS est destiné aux utilisateurs plus avancés et aux équipes professionnelles, car générer un guide de style nécessite des connaissances en codage..
8. Générateur de guides de style SC5
Avec le SC5 Style Guide Generator vous pouvez créer et éditer des guides de style directement dans votre navigateur. Il est basé sur KSS avec certaines fonctionnalités intéressantes incluses, telles qu'une interface utilisateur alimentée par AngularJS qui vous permet d'afficher, de rechercher et de tester vos styles. SC5 utilise la même notation de document que KSS. Il supporte les feuilles de style SASS, LESS, PostCSS et CSS pur.
9. Styledocco
StyleDocco est une application pratique Node.js qui crée des guides de style à partir de vos feuilles de style. Vous pouvez l'installer avec npm. Dans le guide de style généré, StyleDocco affiche un aperçu des styles que vous avez appliqués et un exemple de code HTML..
Sur la page d'accueil de StyleDocco, vous pouvez trouver deux exemples de guide de style, l'un généré à partir d'une feuille de style par défaut et l'autre généré à partir d'un site Bootstrap. Les exemples peuvent également vous aider à comprendre la syntaxe de la documentation utilisée par SytleDocco..
10. Laboratoire de patrons
Modèle de laboratoire est un ensemble d’outils qui vous aident à créer un système de conception modulaire. Pattern Lab est un générateur de site statique personnalisé qui assemble tous les éléments de style d'un site, ainsi que des modèles de formulaire et des pages. Il peut servir de votre projet bibliothèque de motifs et guide de style frontend. Pattern Lab vous permet de voir vos composants de style simultanément abstraitement et Dans le contexte.
