0
Blueprint Framework CSS
Blueprint es un Framework para css, que nos permite reducir el tiempo de desarrollo de nuestras hojas de estilo, esta basado en grillas a manera de tablas compatible con la mayoría de navegadores, fácil de implementar, incluye estilos para manejar tipografías y una hoja de estilos para impresión.
Para usar Blueprint descargamos la ultima versión de su sitio oficial, luego de descomprimir los archivos incluimos los archivos CSS entre las etiquetas <head> </head> de nuestro archivo HTML
<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">
<!--[if IE]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
Y listo ya podemos utilizar Blueprint. La configuración predeterminada de la grilla es de 950px de ancho con 24 columnas de 30px y un margen de 10px entre columnas.
Primero debemos asignarle la clase “container” a un <div> contenedor, y si deseamos ver la grilla le asignamos la clase “showgrid”.
<div class="container showgrid">
<p>contenido</p>
</div>
Una estructura simple de dos columnas seria así:
<div class="container showgrid">
<div class="span-15">
<p>contenido</p>
</div>
<div class="span-9 last">
<p>barra lateral</p>
</div>
</div>
Con la clase "last" que es obligatoria le indicamos que es la última columna.
Este es un simple ejemplo de cómo maquetar una web sobre una grilla, para mas información visiten el sitio oficial.
Si te gusto este artículo puedes dejar un comentario, también puedes suscribirte al canal RSS de la página o compartir este articulo por facebook
