Estilos CSS para formularios en el framework Blueprint

El Framework CSS Blueprint nos sirve para maquetar páginas web, pero también para estilizar formularios. En el Manual de Blueprint CSS tenemos una serie de artículos encaminados principalmente para explicar la manera de maquetar páginas web fácilmente con CSS, pero existen algunas otras clases que nos servirán para mejorar la estética de elementos como formularios.

Si tenemos la descarga de Blueprint a mano, podremos observar que hay un archivo llamado "forms.css" que encontramos en el directorio "blueprint/src". Ese archivo no lo tenemos que incluir para agregar esos estilos a nuestra página web, ya que se encuentra en screen.css, sin embargo en el archivo forms.css podemos ver el código de Blueprint encaminado a estilizar los formularios, sin compresión y con comentarios para poder entenderlo fácilmente.

Una rápida lectura del código de forms.css nos dará unas pistas sobre qué estilos y clases CSS propone Blueprint para definir el aspecto de los formularios. Además, dentro de la descarga de Blueprint encontraremos también un archivo llamado "forms.html", dentro del directorio "testsparts", que nos mostrará los ejemplos de aplicación de las clases creadas para formularios.

En este artículo vamos a agregar algunas notas y ejemplos para las personas que están aprendiendo con nosotros este interesante framework.

En el archivo forms.css encontraremos básicamente dos paquetes de estilos:

1. Estilos para definir el aspecto de elementos de formulario
2. Estilos para crear cajas con mensajes para el usuario

Estilos para elementos de formularios

Estos estilos nos permiten tener una base estándar sobre la que partir para la definición del aspecto de los formularios. Realmente la mayoría de los estilos están definidos sobre las etiquetas de formulario, por lo que no tenemos que agregar nada en el código HTML, sino simplemente colocar los elementos de formulario y ya estarán estilizados con Blueprint.

Pero además encontraremos un par de clases que nos servirán para aplicar estilos en campos INPUT, ya sean de texto, password, email, etc.

Clase "text": Simplemente define la anchura del campo input y crea un poco más de paddin entre el contenido del INPUT y su borde.

Clase "title": Agrega una anchura y un padding en el campo INPUT, iguales que los producidos en a clase "text", pero además aumenta la fuente del texto que hay dentro del campo INPUT, que aparecerá un 50% mayor que los campos normales.

También existe una clase que se puede aplicar a formularios, es decir, a etiquetas FORM:

Clase "inline": Para hacer formularios que se distribuyan en una o varias líneas con elementos colocados unos al lado de otros. Esta clase simplemente implementa una altura de línea y se antoja un poco menos útil, pero podemos experimentar con ella si queremos hacer formularios de una línea, o varias separándolas con etiquetas P.

Estilos para cajas de mensajes

Otra cosa típica que querremos hacer con formularios es crear varias cajas de mensajes, para alertar al usuario cuando un formulario se envió correctamente, con error, etc. Para ello simplemente se han implementado varias clases que podemos aplicar a elementos como DIV, que formatean la salida con varios colores que pueden ayudar al usuario a percibir visualmente el tipo de mensaje que le estamos mostrando.

Clase "error": Ideal para mostrar cuando se producen errores. Formatea la caja y el texto con color rojo.

Clase "notice": Para producir mensajes de advertencia, para cosas que no llegan a ser errores pero que deben ser consideradas por el usuario. Formatea la caja y el texto con amarillo.

Clase "info": Ideal para mostrar mensajes de información interesante para el usuario, pero que no son errores ni advertencias serias. Formatea el texto y la caja con azul.

Clase "success": Ideal para mostrar mensajes cuando todo ha ido correctamente. Formatea la caja y su texto con color verde.

Ejemplo de formularios con Blueprint

La verdad es que en la propia descarga de Blueprint ya muestran un buen ejemplo de realización de formularios y uso de las distintas clases que proponen. Como decía, se puede encontrar en el directorio "testsparts".

Pero para los que deseen ver un ejemplo realizado por nosotros mismos para probar las distintas clases, os dejamos un enlace para abrir en una página aparte.