Herramientas CSS para diseñadores y desarrolladores

Las herramientas de CSS son importantes para los diseñadores y desarrolladores web, ya que les ayuda mediante la simplificación del trabajo que normalmente tienen que hacer.

Teniendo en cuenta el tiempo que ahorran al usarlas, es fácil entender por qué muchos desarrolladores web están entusiasmados con estas herramientas.

El único problema es que algunas de ellas no son muy conocidas, por lo tanto, los de 1stwebdesigner.com, han realizado una especie de escaparate que puedes ver en el artículo CSS Tools for Designers and Developers, con herramientas y generadores CSS que los desarrolladores pueden utilizar para crear sitios web funcionales y optimizado de una manera más rápida.

Dado que las herramientas se pueden clasificar, se encuentra al final de cada categoría una lista con otras aplicaciones que hacen lo mismo y que por lo tanto no hay necesidad de revisarlas.

Herramientas para maquetar:

Templatr. Es la mejor opción si no sabes HTML o CSS y quiere un sitio web. Puedes crear un diseño en cuestión de segundos. Con un montón de diseños para elegir, subir imágenes y otros elementos gráficos y muchas cosas más. Puedes seleccionar los elementos de la página y personalizarla eligiendo diferentes opciones de una lista desplegable, lo que hace que la modificación de la página sea fácil y rápida. Los diseños que haces los puedes descargar e instalarlos. Dispone de soporte para varios idiomas.

 

CSS Template Generator. No es tan complejo como el anterior, pero ofrece algunas características interesantes. Genera una hoja de estilos CSS básicos para una página HTML y te proporciona el código CSS, con solo copiar y pegar en la hoja de estilos. También consigues el código HTML de la página. No tiene la opción de descarga, por lo que la única manera de utilizar los diseños creados es mediante copiar el código manualmente.

 

YAML. Dispone de una gran cantidad de opciones. Puedes seleccionar la información básica necesaria para crear un diseño, también se puede ir a un poco más en profundidad si tiene suficiente conocimiento de la codificación. Las columnas y el diseño tienen propiedades, jugar con las rejillas flexibles, seleccionar opciones de codificación y muchos otros.

 

Otras: Firdamatic, CSS Portal, CSS Creator, Layout Generators, CSS Layout Generator.

 

Herramientas para el sistema de rejilla:

 

Variable Grid System. Tal vez sea una de las mejores herramientas para el sistema de rejilla que puedes encontrar en Internet. Te permite generar rápidamente una hoja de estilo CSS para tu sitio web y se basa en la 960gs. Puedes personalizar el ancho del contenedor principal, el ancho del contenido, el ancho de columna, el número de columnas y se puede previsualizar el diseño antes de descargarla – En realidad, esto ocurre de forma automática cuando se modifica un valor.

 

Gridinator. Permite al usuario personalizar el diseño más que la herramienta anterior. Tiene la opción de modificación de los colores, tamaño de tipografía, el tipo de medidas, e incluso seleccionar los diseños populares de una lista que tenemos a la derecha. Esta herramienta permite obtener una vista previa del sistema de rejilla antes de descargar la plantilla completamente funcional.

 

960gs. No es un generador de rejilla, pero se puede aprender mucho acerca de los sistemas de rejilla de la misma. Hay algunas plantillas que se pueden descargar y también puedes ver algunos ejemplos de sitios web que se basan en esta hojas de estilo por defecto. Puedes encontrar algunos archivos JavaScript interesantes.

 

Otras: Blueprint Grid CSS Generator, CSS Grid Calculator, Grid Designer.

 

Herramientas para el color:

 

Kuler Es mi herramienta favorita para el color, desarrollada y mantenida por Adobe. Puede encontrar montones de esquemas de color para utilizar en tus páginas web e inspirarte si lo necesitas. Hay más de 11.000 combinaciones de colores disponibles (todos de forma gratuita), e incluso tiene la opción de personalizarlas.

 

Color Scheme Designer. Otra gran herramienta que te permite crear esquemas de color. Puedes elegir un color y luego cualquiera de sus opciones del sistema de color, y dejar que la herramienta haga el resto. Una herramienta muy útil para cuando se necesita colores para el diseño.

 

CSS Gradient Generator. Si no desea abrir Photoshop para crear un gradiente, esta herramienta te será muy útil. Te permite hacer lo mismo que hace Photoshop, sólo funciona con codificación CSS y de una manera más rápida. Puede guardar los gradientes con un vínculo único.

 

Otras: Color Palette Generator, CSS Color Codes, Gradient Image Maker.

 

Herramientas para botones y menús:

 

CSS Menu Maker. Te permite crear tus propios menús CSS personalizados y generados de una manera simple, con formato HTML / CSS, así que los puede descargar y utilizar de inmediato. La herramienta cuenta con una galería bastante grande de menús: vertical, horizontal y desplegable, y te permite personalizarlos en detalle. Por otra parte, también se puede descargar el plugin para Adobe Dreamweaver y crear tus propios menús en tu propio ordenador. Los menús son compatible y tendrá el mismo aspecto en todos los navegadores (excepto tal vez las transiciones para Internet Explorer).

 

Otras: CSS Menu Generator, My CSS Menu, Tabs Generator and List-O-Matic.

 

Generador de botones:

 

Button Maker Online. Es de Dynamic Drive y te permite crear y personalizar tus propios botones, para luego descargar y utilizarlos en tus diseños. Puedes personalizar casi todo, desde los colores, bordes, tamaño e incluso tiene algunas opciones de transparencia. Dispone de una vista previa de los botones generados antes de usarlos.

 

CSS Button & Text Field Generator. Éste es muy similar al anterior, sólo que crear los menús de otra manera: por la elección de su estilo a partir de varias listas desplegables. Es casi lo mismo, sólo depende de que uno se sienta más cómodo trabajando con uno u otro.

 

Herramientas para tipografía:

 

Font Tester. Una herramienta increíble que permite obtener una vista previa de diferentes tipografías. Sólo tienes que personalizar los tipos de letras en esta página web y cuando encuentre la combinación perfecta, obtener el código y utilizarlo. Dispone de muchas opciones para personalicar el tipo de letra empleado (altura de la línea, decoración del texto, el texto de transformación, el peso del tipo de letar, el espaciado entre palabras, el estiramiento de la tipografía, el espacio en blanco, y muchos otros más).

 

Typester. Muy parecido al anterior, más o menos para la misma finalidad, sólo que puede ser más popular y se puede obtener una vista previa del tipo de eltra, incluso las de Google. No hay tantas opciones para la personalización, pero tiene las suficiente para darte una idea del tipo de letra que deseas integrar en tu diseño.

 

Otras: CSS Font Style, CSS Font and Text Style Wizard, CSS Type Set.

 

Otras herramientas:

 

CSS Generator. Es similar a las herramientas para sistemas de rejilla, sólo que ésta en realidad no mantiene un sistema de rejila (que tendrá que codificar después). Puedes, sin embargo, generar una hoja de estilo con colores de los enlaces, tamaño de las letras, los márgenes, el color y así guardar un poco de tu valioso tiempo para más tarde, durante la codificación.

 

Quick CSS. Hace lo mismo, sólo que tiene aún más posibilidades de personalización, así que échale un vistazo. Esta siempre validado por el W3C y el proceso es bastante rápido, así que podrás disfrutar de un poco más de tiempo libre en lugar de emplearlo en codificar los valores por defecto de la hoja de estilos.

 

Se trata de una lista de herramientas y generadores CSS que resultan muy útiles. ¿Tiene algunas otras herramientas que te gustaría recomendar?