Para los diseñadores web es importante conocer y dominar buenas herramientas de software que faciliten el trabajo y nos permitan ahorrar tiempo, y si son gratis, mucho mejor. Aquí te listamos 10 herramientas muy útiles –y gratuitas- de HTML, CSS y SASS. Que las disfrutes!
1.UIKIT (www.getuikit.com)
UIKit es una buena alternativa al Bootstrap o al Foundation a la hora de crear frameworks para el diseño de páginas web. Contiene gran variedad de componentes para personalizar de forma amigable y fácil una página web, con la que crear webs responsive con agilidad. Permite integrar los archivos CSS fácilmente, siendo la integración también sencilla.
2.AI2HTML (www.ai2html.org)
Ai2html es un script de código abierto que permite convertir un archivo de Illustrator en HTML y CSS. Creado por los desarrolladores de The New York Times, se trata de un archive Javascript i es especialmente adecuado para convertir infografías, mapas o diagramas a HTML.
3.Shoelace (www.shoelace.io)
Shoelace es una construcción de rejilla visual basado en Bootstrap 3.Entre sus características, destacan las visualizaciones responsive por soportes y un sistema de previsualización plenamente funcional.
4.Susy (susy.oddbird.net)
Susy está basado en el sistema CSS de Natalie Downe y se adapta muy bien a Compass. Se puede utilizar desde cualquier lugar, ya sea un sitio estático o un site dinámico hechos en Django, Rails, Wordpress y un largo etcétera. Este software se ha hecho posible gracias a Sass, y te hará la vida más fácil!
5.Domflags (www.domflags.com)
DomFlags es un instrumento creado por Phil LaPier. de extensión del navegador para ayudar a los desarrolladores a añadir atajos a elementos de página para herramientas, navegador de Google, después de instalar el plugin. Puede ayudarle a acelerar el proceso de depuración para centrarte en los elementos específicos de la página (similar a favoritos), generando el acceso directo correspondiente. DomFlags permite una nueva forma de interactuar con la herramienta de desarrollo del navegador, que te permite crear una tecla de método abreviado a un elemento del DOM. Esta herramienta puede ayudarle a rastrear y localizar elementos importantes o modificar estilos.
6.Anicollection (anicollection.gihub.io)
Este gestor de animaciones permite previsualizar todos los efectos de animación a través de unos cuadrantes y por categorías, ejemplos de su implementación, y compartirlos a través de redes sociales. También puedes ir agregándolos a una especie de carrito colección llamado My Anims que te permitirá descargar aquellos códigos de animaciones que te gusten en un sólo paquete.
7.POSTCSS (www.gihub.com/postcss/postcss)
PostCSS es un procesador de Node.js que analiza tu CSS y lo transforma en un árbol de sintaxis abstracta (AST). Ese árbol puede ser modificado o interpretado mediante funciones o plugins JavaScript que PostCSS convertirá nuevamente en texto, con el cual puede generarse un archivo. PostCSS no altera tu CSS a menos que se lo indiques.
8.Brick (mozbrick.github.io)
Brick es la librería de Mozilla, una colección de elementos personalizados con los cuales puedes construir aplicaciones. Incluye un calendario, un formulario que se puede linkar a un componente IndexedDB y mucho más.
9.Critical (www.github.com/addyosmani/critical)
Critical es una herramienta que detecta CSS crítico y lo distribuye para organizarlo de tal manera que podamos dar prioridad de carga a éste. Esto permite la la optimización en tiempo de carga para un sitio web. Entre sus principales características, destacamos que se puede usar con Grunt o Gulp, que es altamente configurable, genera y alinea las fuentes de CSS críticas, y minimiza el CSS, entre otras.
10.HTMLHINT (www.htmlhint.com)
JSHint es una utilidad online open source que analiza un código Javascript sin necesidad de registro previo. Está pensada para códigos Javascript dirigidos a entornos de producción como navegador, ECMAScript5, Node.js o Rhino. Tiene múltiples opciones y te permite navegar a través de los avisos y errores presentes en tu código
Comentarios