Recursos web, diseño, joomla!, tutoriales, opinión, algunas noticias...
| Blueprint: Un framework CSS para nuestros desarrollos |
| Domingo, 05 de Agosto de 2007 18:44 |
|
Blueprint es un framework CSS diseñado para ahorrar tiempo, facilitando la creación de la maquetación, aspectos tipográficos y de impresión en nuestro sitio. Su licencia es la MIT y al ser un desarrollo muy reciente, aun no ha sido testeado en todos los navegadores.  Básicamente el corazón del framework son cinco estilos en cascada, cada uno con un objetivo diferente:
Ejemplo de utilizaciónVamos a crear un ejemplo de maquetación:  El framework por default viene con reglas para crear una grilla de 960px, que puede ser dividida en 14 columnas de 50px y 20px de margen entre cada una. Pero en verdad nosotros podemos dividir la grilla como queramos. 1 - Lo primero que hacemos es incorporar a screen.css y print.css al sitio: 2 - Luego a la maquetación la comenzamos con un bloque asigandole la clase 'container':
3 - Lo siguiente será crear las secciones que necesitemos. Si miran un poco a grid.css van a ver una serie de clases con el nombre de span-X:
Utilizando estas clases vamos a crear nuestras columnas. Empecemos por el header:
Para crear una sola columna siempre se le debe asignar al bloque las clases 'column span-X'. En esta oportunidad, como queremos que el header ocupe todo el ancho, se utilizó a span-14, que posee 960px de anchura. Luego agregamos una linea divisora. 4 - En caso de querer varias columnas, la estructura es la misma, solo que a la primera columna se le suma la clase 'first' y a la ultima columna la clase 'last'. Sigamos con las columnas de contenido principal, columna 2 y columna 3: A la columna principal se le asignó una anchura de 540px y al ser la primera se le agregó la clase 'first'. Por otro lado la segunda columna tiene un ancho de 260px. La tercera columna al ser la ultima se le agregó la clase 'last' y un ancho de 120px. 5 - De la misma forma que hicimos el header realizamos el footer: Ver ejemplo Como decía al principio BluePrint no solo sirve para la maquetación, los estilos en cascada que lo conforman poseen varias clases y estilos para implementar o complementar, las cuales están debidamente explicadas en cada CSS. Pero hay que recordar que el framework no está testeado en todos los navegadores por lo cual no todo llegue a funcionar de la misma manera. Para consultar más información sobre Blueprint, pueden su sitio oficial. |
..y tal vez te interese:
¿Te ayudó este artículo?Puedes suscribirte al feed RSS ó dejar tu email para recibir las últimas noticias, tal como lo hacen actualmente las 0 personas que siguen al blog
Agrega un comentario
- Por favor, manten el tópico de los mensajes en relevancia con el tema del artículo.
- Comentarios con lenguaje inapropiado seran borrados
Puedes suscribirte al blog de dos formas
Ingresando tu e-mail:
Utilizando el canal RSS:
Artículos populares
Desde siempre
- Descargar fuentes gratuitas: 42 sitios para hacerlo
- Cómo crear un template para Joomla! (Primera parte)
- Diseñar a lo Web 2.0, la lista definitiva
- Cómo crear un template para Joomla! (Segunda parte)
- Templates gratuitos
- Aprende Photoshop a través de YouTube
- Crear un stencil desde cero y no morir en el intento I
- Cómo crear un template para Joomla! (Tercera parte)
- Layouts gratuitos: Listado de sitios
- Haz que tu Windows XP luzca muy Firefox
saludos. ..
Gran post, eh ?
Saludos y muchas gracias!
PD: El codigo en imagen tengo que escribirlo dos veces para que me pueda mandar el mensaje...
p/d: estoy aprendiendo a medida que voy armandolo...
¡muchas gracias!