Blueprintcss un Framework CSS

julio 3, 2008

Hoy voy a hablar sobre 2 cosas en este post, primero y es el tema principal es sobre el framework css llamado Blueprint y el segundo tema es Windows Live Writer.

Bueno y porque Windows Live Writer? pues porque acabo de instalarlo y voy a escribir este post usándolo para hacer una prueba de sus funciones, luego escribiré mas a fondo sobre el tema del windows live writer.

Blueprint es un set de archivos CSS que trae ya definidos muchos formatos útiles y que  nos facilitan la creación de nuestros sitios. Es 100% web 2.0, trabaja con DIV y permite definir desde una página con una sola columna, hasta páginas con diseños complejos casi tan fácil como usar una grilla gráfica para ubicar nuestros objetos.

Hay que reconocer que de primera mano no es tan rápido el desarrollo usando este framework ya que tenemos primero que aprender como usarlo y cual es la mejor forma de poner los objetos, pero estoy seguro que después de coger el paso ya será muy fácil crear rápidamente un sitio con una distribución compleja y sin tanta preocupación por el css y los tipos de letra entre otros.

aquí hay un ejemplo de lo que puede hacerse con solo Blueprint

http://files.bjorkoy.com/blueprint/tests/parts/sample.html

Actualmente está en la versión 0.7, la cual podemos descargar desde Google Code BluePrintCss.

El archivo descarga varias cosas incluido el código fuente pero básicamente solo necesitaremos incluir 3 archivos css:

print.css Este archivo tiene los estilos necesarios para usarlos al momento de imprimir contenido

screen.css : Este es el archivo principal con todos los estilos necesarios.

ie.css : Un archivo para suplir algunas de las cosas diferentes que tiene Internet Explorer.

Ahora incluimos los css dentro de nuestra pagina con las etiquetas link.

<!– Framework CSS –>
<link rel=”stylesheet” href=”../blueprint/screen.css” type=”text/css” media=”screen, projection”>
<link rel=”stylesheet” href=”../blueprint/print.css” type=”text/css” media=”print”>
<!–[if IE]><link rel=”stylesheet” href=”../../blueprint/ie.css” type=”text/css” media=”screen, projection”><![endif]–>

Y comenzamos a utilizarlo.

Como vemos en las etiquetas definimos cada uno de los usos que se le dará a los archivos, por ejemplo para el archivo screen.css definimos que se usara para proyecciones y pantalla, luego definimos el que se usará para impresión y adicionalmente con una etiqueta condicional definimos que si es un Internet Explorer entonces usamos el archivo ie.css.

Lo primero es incluir un DIV que servirá de contenedor para todo el sitio, este div contendrá los demás elementos de la página y se encargará de dar el tamaño y centrar el contenido.

<div class=”container”>

En donde el estilo que usamos es “container” el cual define el tamaño a 960px centrado.

Ahora voy a crear el encabezado de la página en donde pondré el titulo del sitio. utilizo un estilo “span-24” que llenará de lado a lado de la pantalla.

<div class=”span-24″>
<h1>Este es el header</h1>
</div>

Defino una columna de contenido principal, con “column span-12 colborder first “ que básicamente le decimos que es una columna que es la primera y que tiene un borde al lado derecho.

<div class=”column span-12 colborder first “>
<h2>Contenido Principal</h2>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et</p>
</div>

Ahora agrego dos columnas mas que por el span-7 y el span-3 son mas pequeñas en ancho que la de contenido.

<div class=”column span-7 “>
<h3>Segunda Columna</h3>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue</p>

</div>

<div class=”column span-3 last”>
<h3>Tercera Columna</h3>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue</p>
</div>

y por ultimo adiciono el Pie de Página, lo separo con un HR para hacer una línea.

<hr>

<div class=”span-24″>
<h4>Este es el Footer</h4>
</div>

y ya tengo el esqueleto de mi sitio, solo me restaría terminar de adicionar las imágenes y el contenido que defina mi diseño pero el esqueleto esta listo.

Bueno, esta muy básico, pero solo quería contarles lo sencillo que es, ya igual trae muchas otras cosas que quizás trataremos después o puedes leer en los tutoriales, ejemplos o con la experiencia propia, es mas si quieres publicar un tutorial mas avanzado te invito a que me lo envíes y yo lo publico aquí como un post a tu nombre.

yo recomiendo este tutorial de Leonardo Donofrio el cual explica las cosas básicas y en español, aunque hay que tener en cuenta que este tutorial usa una versión anterior de blueprint así que no van a coincidir las medidas de los elementos.

yo lo que hice fue usar el tutorial para entender como usarlo pero luego abrí el archivo screen.css y comencé a ver cuales son las medidas de cada uno de los atributos para saber cual usar.

más tutoriales y artículos sobre el tema en:

http://code.google.com/p/blueprintcss/wiki/Links

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: