Gato de Grandes Botas

Blueprint es un framework para CSS que se centra en reducir el tiempo de desarrollo de tus CSS con numerosas interesantes características que te permiten hacer más con menos.

Este framework de CSS por lo tanto nos da soporte para organizar y desarrollar nuestros CSS e ir encajando todas aquellas piezas que integren nuestra plantilla final.

Instalación

Para instalar Blueprint deberemos descargarnos el paquete y colocarlo en el directorio de CSS de nuestro sitio, una vez hecho esto tendremos que añadir estas líneas a la cabecera de la página en la que queramos utilizarlo.

<link rel=”stylesheet” href=”css/blueprint/screen.css” type=”text/css” media=”screen, projection”>
<link rel=”stylesheet” href=”css/blueprint/print.css” type=”text/css” media=”print”>

Ejemplo de uso de Blueprint

Vamos a crear la estructura de un sitio simple que se componga de una cabecera, columna derecha, columna izquierda y contenido.

<div class=”container”>
<div class=”column span-14″>
Header

</div>
<div class=”column span-3 first”>
Left sidebar
</div>

<div class=”column span-8″>
Main content

</div>
<div class=”column span-3 last”>
Right sidebar
</div>
</div>

Básicamente el corazón del framework son cinco estilos en cascada, cada uno con un objetivo diferente:

• screen.css: Su cometido es cargar los estilos guardados en la carpeta ‘lib‘. Además podemos configurar para mostrar una imagen grilla que facilite la maquetación.
• print.css: Posee algunas reglas que mejorar la vista de impresión.
• lib/grid.css: Es el estilo en cascada que permite crear la maquetación que queramos, desde simples hasta complejas con varias columnas y secciones.
• lib/typography.css: Establece las reglas tipográficas que mostrará el sitio (tamaño, fuente, color, etc). Tal vez sea el estilo en cascada que más modificaciones va a recibir, ya que este aspecto va a depender de cada diseño.
  
• lib/reset.css: Resetea valores de margenes, padding, bordes, etc para que todos los navegadores muestren el contenido de la misma forma.

Descarga: Blueprint
Primeros pasos con Blueprint
Ejemplo de sitio desarrollado con Blueprint

Buscando justo justo para un newsletter para un cliente, y ademas una justificacion con fundamentos para explicar porque no se ve igual en todas las casillas de mail.

Encontre el Blog de leandro (que esta muy copado) una tabla fantastica sobre el soporte CSS en cada uno de los programas de webmail (gmail, yahoo, etc) y los programas (outlook, etc).

Y tambien en este sitio hacen un review completito.

Al fin loco!! al fin!!, han rediseñado el sitio del Colegio Universitario IES Siglo 21., lastima que siga corriendo sobre ASP.
Pero la nueva version, es una version que valida el 100%, accesible para dispositivos mobiles, browsers y plataformas. Con unas hojas de estilo prolijas.

Espero, que todavia siga creciendo, ya que misteriosamente dentro de la carrera de Multimedios, donde se presentan las tesis presentadas por los alumnos, solo parecen (dos), y que seguramente algo tuvieron que ver con el desarrollo del sitio?, y algunas otras cosillas, como por ejemplo que en la parte de enviar CV para trabajar en el ies, no valida ningun campo, por lo tanto pueden salir mails vacios.

Pero si para los alumnos el listado de pasantias.

Antes que nada felicitaciones!!, esta vez un pasito mas adelante.

Ojala el proximo rediseño sea el Autogestion de Alumnos y Docentes.