Página principal » Diseño web » Diez herramientas de guía de estilo de vida para diseñadores web lo mejor de

    Diez herramientas de guía de estilo de vida para diseñadores web lo mejor de

    UNA guía de estilo de vida es un Documentación de elementos y patrones de UI. recopilado de un sitio o aplicación con el propósito de permitir a los desarrolladores utilizar Estilos consistentes en todo su proyecto.. En el pasado, los desarrolladores creaban guías de estilo manualmente, lo cual es mucho trabajo. Después de un tiempo, comenzaron a automatizar el flujo de trabajo y las herramientas de la guía de estilo que transforman el código de front-end en bibliotecas de IU bien organizadas han comenzado a aparecer.

    Guías de estilo de vida son diferentes de código de guías de estilo, como el último contiene reglas sobre cómo escribir código legible y mantenible, mientras que las guías de estilo de vida son colecciones de patrones frontales, como clases CSS para botones, widgets y elementos tipográficos. Guías de estilo de código aseguran consistencia de código, mientras que las guías de estilo de vida aseguran consistencia visual a través de un sitio.

    En este post, hemos reunido 10 herramientas útiles que pueden ayudarle Genera tu propia guía de estilo de vida..

    1. estilízame

    Esta herramienta es muy divertida: simplemente pegue el enlace del sitio web que desea analizar y observe cómo su guía de estilo se genera con un clic del mouse. Con Estilízame, puede obtener rápidamente una visión general de los patrones de un sitio, incluidos los colores, las fuentes, el tamaño y el espaciado. Una vez que el proceso está completo, puedes Descarga la guía de estilo en PDF..

    2. Fabricante

    Fabricante le permite crear su propio kit de herramientas de UI, organizar su sistema de diseño y generar una guía de estilo a partir de su código de kit de herramientas. Si trabaja en un equipo, puede escribir la documentación en Markdown para facilitar el uso de otros desarrolladores. Te puede ayudar a Organiza tu rutina de diseño / codificación. en la forma que te gusta.

    3. Frontificar

    Frontificar Incluye todo, desde maquetas digitales a wireframing. También tienen una herramienta de guía de estilo que ofrece un proceso de diseño minimalista y sin complicaciones. Puede registrarse de forma gratuita e insertar toda la información necesaria manualmente. El proceso debe incluir paleta de colores, opciones de fuente, iconos, logotipos, posiblemente eslóganes o copia web preferida.

    4. Aigis

    Con Aigis, puede generar guías de estilo desde cualquier archivo de texto (por ejemplo,. .css, .scss, .estilo, .Maryland). También puede escribir documentación en Markdown y personalizar el tema de su sitio..

    5. holograma

    Holograma fue creado por Trulia y es una gran solución para generar guías de estilo. Es una gema de rubí que analiza los comentarios en tu CSS con el fin de generar impresionantes guías de estilo. El holograma tiene un sistema de plantillas con algunos estilos básicos y navegación para hacer que la generación de su guía de estilo sea aún más fácil.

    6. Styledown

    Con Styledown, Puedes escribir guías de estilo CSS con facilidad, ya que es un Generador de guías de estilo basado en Markdown.. Funcionará con la mayoría de las configuraciones de desarrollo web, ya que es independiente de la plataforma. Requiere muy poco para ponerlo en marcha. Además, los comentarios que necesita agregar a su CSS son muy mínimos. Puede crear su documentación CSS en cualquiera de los comentarios de CSS en línea, o como un archivo Markdown separado.

    7. KSS

    KSS (Hojas de estilo Knyle) es principalmente un especificación de documentación y un formato de guía de estilo que tiene su propia sintaxis de comentarios. KSS también incluye una biblioteca de Ruby que analiza .hablar con descaro a, .scss, y .css archivos documentados con las directrices KSS en una guía de estilo ordenada. KSS es para usuarios más avanzados y equipos profesionales, ya que generar una guía de estilo requiere conocimientos de codificación..

    8. SC5 Style Guide Generator

    Con el Guía de estilo SC5 generador Puede crear y editar guías de estilo directamente en su navegador. Es basado en KSS con algunas características interesantes incluidas, como una interfaz de usuario potenciada por AngularJS que le ayuda a ver, buscar y probar sus estilos. SC5 usa la misma notación de documento que KSS. Es compatible con SASS, LESS, PostCSS y hojas de estilo CSS puras..

    9. Styledocco

    EstiloDocco es una aplicación útil Node.js que crea guías de estilo de tus hojas de estilo. Puedes instalarlo con npm. En la guía de estilo generada, StyleDocco muestra una vista previa con los estilos que ha aplicado y un ejemplo del código HTML.

    En la página de inicio de StyleDocco, puede encontrar dos ejemplos de guías de estilo, uno generado a partir de una hoja de estilo predeterminada y otro generado desde un sitio de Bootstrap. Los ejemplos también pueden ayudarlo a captar la sintaxis de la documentación que utiliza SytleDocco.

    10. Pattern Lab

    Laboratorio de patrones es una colección de herramientas que te ayudan a crear una sistema de diseño modular. Pattern Lab es un generador de sitio estático personalizado que une todos los elementos de estilo en un sitio y forma plantillas y páginas a partir de ellos. Puede servir como proyecto de biblioteca de patrones y guía de estilo frontend. Pattern Lab te permite ver tus componentes de estilo simultáneamente abstractamente y en contexto.