Frameworks CSS

ejemplo de maquetado web

He estado viendo el uso de Framework de CSS de lo cual escribire sobre dos, los cuales son:

  • 960 Grid System
  • Blueprint

La organizacion de capas <div> que brindan estos Frameworks para aplicarles luego su respectivo CSS agiliza un poco la labor de pensar y cuadrar dichos elementos en nuestro lienzo de pintar (pagina web en blanco inicial) ayudando a maquetar mas rapidamente la presentacion de la misma. Su uso y practica es sencillo (no es como hablar de Frameworks de PHP), con unas cuantas explicaciones y codigo a mostrar de estos, se puede apreciar que ni vale la pena hablar de una curva de aprendizaje, simplemente es algo de estudiar un rato y aplicar en cuestion anexandolo al proyecto web en marcha.

La imagen que encabeza este articulo es tomada del post de TreeWeb referente a un ejemplo de maquetado titulado plantilla de tres columnas, lo cual no entra en temas de Frameworks CSS, por lo que si no te importa mucho leer sobre esto de Frameworks de CSS, el ejemplo de TreeWeb sobre un maquetado de web te puede servir y nos olvidamos de este post. Con los frameworks a mencionar puede hacerse un maquetado igual a la imagen que encabeza este post del blog. Pero voy a darle distintos colores a cada capa <div> para verse bien cada una en el maquetado con estas herramientas web.

Antes que todo, por respeto y agredecimiento a los fuentes originales, el contenido sobre 960 Grid System esta basado en el resumen del tutorial de desarrolloweb titulado Maquetacion CSS con 960 Grid System, muy recomendable ver los videotutoriales que acompanan a este tutorial de la web. De igual forma el contenido de Blueprint esta basado en los post de xandrusoft y pixelco.us. La idea no es duplicar la informacion, hago un resumen de una o varias partes en un solo contenido y principalmente por experiencia de recordar que no tenemos control sobre factores externos, como bien lo es el material de otros autores. En ocasiones, por borrado, edicion o caida o suspension de algunos sitios perdemos contacto con algunos temas de interes, y en donde en ocasiones ni el cache de google lo logra salvar, aprendemos de otros y debe agradecerse su informacion, siempre indica los fuentes originales (suponiendo que esos mismos sean) y si es posible, escribirles un comentario para que sepan que su informacion es de ayuda o guia para otros.

960 Grid System

El Framework para CSS 960 Grid System agiliza la maquetacion/maquetizacion del armado de los <div> de una pagina permitiendo un aplique mas rapido de CSS a estos sin perder mucho tiempo en irlos ajustando manualmente gracias a su esquema de 12, 16 y 24 columnas. En la web hay muy buenos ejemplos basados en este esquema de columnas.

Su estrucutra esta basada de la siguiente forma:

  • carpeta code (contiene el framework, lo que realmente necesitamos). Una carpeta css, una img y dos html de demo.
  • carpeta licences (eso mismo, las licencias)
  • carpeta sketch_sheets (contiene un pdf para imprimir su numeracion de cuadriculas, algo que me parece bien).
  • carpeta templates (posee muchas cuadriculas de sus 12,16 y 24 columnas para muchas aplicaciones de diseno). Tales como photoshop, firework, visio, illustrator, y otras.

Sobre sus CSS:

  • 960.css (contiene todo lo necesario para los grid, las capas <div> identificadas por su class)
  • reset.css (elimina cualquier CSS defaulto impuesto por el navegador)
  • text.css (le indica tipo de letra, tamanio, etc a los escritos, referente a la tipografia)
  • 960_24_col.css (este framework trabaja con 960.css la cuadricula de 12 y 16 columnas, pero la de 24 lo tiene a parte)

Tomado de Wikipedia: 960 Grid System es una biblioteca de CSS disenada por Nathan Smit enfocada a la maquetación de una página web. La biblioteca utiliza un contenedor (div) principal de un tamaño fijo de 960 pixels, de ahí su nombre. Se eligió este tamaño por ser fácilmente divisible entre 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 y 480, como lo indica su autor:

Todos los monitores modernos soportan por lo menos 1024 × 768 píxeles de resolución. 960 es divisible entre 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 y 480. Esto hace que sea un número base de gran flexibilidad para trabajar.

La maquetizacion de las web con 960 Grid System agiliza el aplique de CSS, una referencia de tamanos puede verse en este ejemplo el de 12 y 16 columnas y en este ejemplo el de 24 columnas lo cual esta apegado a unas referencias:

Anchura de grillas/rejillas en 960 Grid System
12 Columnas 16 Columnas 24 Columnas
1: 60px
2: 140px
3: 220px
4: 300px
5: 380px
6: 460px
7: 540px
8: 620px
9: 700px
10: 780px
11: 860px
12: 940px
1: 40px
2: 100px
3: 160px
4: 220px
5: 280px
6: 340px
7: 400px
8: 460px
9: 520px
10: 580px
11: 640px
12: 700px
13: 760px
14: 820px
15: 880px
16: 940px
1: 30px
2: 70px
3: 110px
4: 150px
5: 190px
6: 230px
7: 270px
8: 310px
9: 350px
10: 390px
11: 430px
12: 470px
13: 510px
14: 550px
15: 590px
16: 630px
17: 670px
18: 710px
19: 750px
20: 790px
21: 830px
22: 870px
23: 910px
24: 950px

Esquema de 960 Grid System a 12 columnas

Con la descarga de este Framework se encuentran unas hojas ( 960_sketch) que pueden imprimirse para plasmar en ellas la maquetizacion de la pagina, siendo cada recuadro contenedor los <div> a los cuales le aplicaremos nuestro CSS. Esta organiacion de <div> acorta el tiempo de estarlos armando mas a mano (esto se aprecia mas si son muchos) y es mas sencillo y mejor pensado a esta organizacion de etiquetas <div> aplicarles su respectivo CSS a cada uno.

El ejemplo mas sencillo se podria dar con una maquetizacion de una web a 12 columnas mediante este Framework para CSS, lo primero a agregar en el html de dicha pagina seria el llamado a dos archivos CSS de 960 Grid System:

<link rel=stylesheet type="text/css" href="ruta/reset.css">
<link rel=stylesheet type="text/css" href="ruta/960.css">

reset.cs limpia o libera de cualquier css aplicado a la pagina por default inpuesto por el navegador, de ahi que debe de estar de primero y luego 960.css, si no se llama a este archivo no se podra implementar el Framework.

Como se usa este Framework para CSS?, el ancho es indicado en class=”nombre_xx”, se crea un <div> contenedor inicial el cual llamaremos container_xx donde xx es la numeracion de la tabla expuesta anteriormente. Como este es el <div> principal (el contenedor) sera de 12 (940px) abarcando todo el ancho. Estos ejemplos seran basados a 12 columnas, es a preferencia de la persona si desea aplicarlo a 12, 16 o 24 columnas.

<div>
....
</div>

Todos los elementos que van dentro de este <div> (que tambien son otros <div>) tendran como nombre de clase (class) el siguiente grid_xx donde xx seria la numeracion de ancho de pixel basandonos en la referencia de a 12 columnas indicada mas arriba en el recuadro.

<div class="container_12" id="contenedor">
    <div class="grid_12" id="cabecera">Cabecera (940px)</div>
    <div class="grid_4" id="menu">Menú (300px)</div>
    <div class="grid_8" id="contenido">Contenido (620px)</div>
    <div class="grid_12" id="pie">Pie de página(940px)</div>
</div>

Como se aprecia en el codigo previo, el <div> contenedor abarca todo el ancho 940px, la cabera y el pie de pagina igual, pero en el centro (entre cabecera y pie) la columna <div> de menu posee un ancho de 300px y el <div> de contenido de 620px de ancho. Si es 960px porque el ancho total de 12 es de 940, esto es porque se le resta 10px de cada lado, de ahi que en vez de 960px sea 940px, incluso todos los objetos siempre se le restaran 10 de cada lado al estar dentro de otro para el caso de 960 grid system.

Volviendo al tema de la separacion de 10 de cada lado de la capa, asi como tenemos las clases container_xx y grid_xx tambien tenemos a las clases alpha (elimina el marge de 10px a la izquierda) y omega (elimina el margen de 10px a la derecha). Estas dos clases solo se usarian para el caso de grids anidados (grids que esten dentro de otro), ya que si llegase a ver muchos <div> dentro de otros llegaria un momento en el que casi no habria espacio para el contenido de estos debido a la reduccion de estos 10px de lado y lado.

Tambien estan las clases prefix_xx (crea un espacio vacio a la izquierda del <div>) y suffix_xx (crea un espacio vacio a la derecha del <div>) donde xx seria la numeracion de ancho acorde a la regla de numeraciones de ancho de pixeles del formato de N# columnas impuesta a trabajar en dicha pagina. Pero estos espacios no indican que dicho espacio esta vacio, esos espacios siguen siendo de esos <div>, eso se observa si se colocase un color de fondo a la capa <div> que posea dicho espacio vacio.

<div ></div>
   <div>
      .....
   </div>
<div class="grid_12" id="pie">Pie de página(940px)</div>

El codido anterior de los 960 pixel de ancho (recordando que hay 10 menos de cada lado, 940px) tenemos a los <div> de cabecera y pie de pagina abarcando todo el ancho (940px) mientras que entre estos esta un <div> siendo grid_8 que seria 8 columnas (620px) y con un prefix_1 de 1 columna (60px) apegado al patron de trabajo a columna de 12. Este <div> tendra un espacio vacio a su derecha de 60px (prefix_1). Si se hubiese querido el espacio en blanco a la izquierda, hubiese sido con un <div>, en total esta capa <div> abarcaria 9 columnas (8 del grid y 1 del sufflix o prefix) quedando en esa misma linea 3 columnas libres. Es importante no salirse de las 12 columnas o del N# de columnas total del patron de columnas que se este usando, sea el de 12, 16 o 24 columnas.

Otra cosa a tenerse muy en cuenta, todos estos <div> propios del framework 960 son para maquetar mejor o mas rapidamente la presentacion (la web) organizarla, pero estos <div> no son los <div> a los cuales les vamos a aplicar nuestro CSS, ya estos <div> con nombres de clase container_xx, grid_xx, etc.. tendran su CSS del archivo 960.css por lo que de aplicarle a estas capas nuestro CSS estariamos sobreescribiendolo. Es dentro de estos <div> de maquetacion donde meteremos lo nuestro (<img>,<p>,<div> propios,etc) todas nuestras etiquetas/tags y es a estos a los que obviamente le aplicariamos nuestro archivo CSS pero no a los <div> propios del framework.

Los <div> de que son del framework 960 poseen un float:left (esto se puede ver en el archivo 960.css) por lo que se recomienda aplicar al final de un <div></div> pero este <div> no iria al final de cada <div> del framework, sino al final de cada linea, por lo que si varios <div> del framework estan en la misma linea, por ejemplo un <div> y un <div> siendo asi 8+4=12 columnas (el total de anchos 940px) al final la linea iria el <div class=”clear”></div>.

<div>
   <div class="grid_12" id="cabecera">....</div>
   <div class="grid_8" id="menu">
    ......
   </div>
   <div class="grid_8" id="cuerpo_contenido">
    ......
   </div>
   <div></div> <!-- div clear al final de la linea -->
   <div class="grid_12" id="pie">....</div>
</div>

960 Grid System trae una carpeta de templates (plantillas) para photoshop, fireworks, illustrator, visio y otros lo cual no es mas que la referencia de columnas de 12, 16 y 24 en la que se basa toda la maquetacion de este framework lo cual se sobrepone sobre la imagen que se tenga en photoshop u otros y en base a ello tener la referencia de columnas para las capas (div).

Un ejemplo final sobre el uso de este Framework 960GS podria ser algo como este, donde se le ha aplicado un background-color a las capas mediante un <style> CSS que en esta ocasion esta en el mismo archivo html pero que bien (y el deber ser) seria colocarlo en un archivo CSS y llamarlo como los del framework.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <link rel="STYLESHEET" type="text/css" href="code/css/960.css">
    <link rel="STYLESHEET" type="text/css" href="code/css/reset.css">
    <link rel="STYLESHEET" type="text/css" href="code/css/text.css">
    <head>
        <meta http-equiv='Content-type' content='text/html; charset=UTF-8' />
        <title>Practica 960</title>
        <style>
            #cabecera, #pie { background-color: #2f309d; }
            /* #buscador { background-color: #3e1414; } */
            #menu { background-color: #143e14; }
            #contenido1 { background-color: #ddc3af; }
            #contenido2 { background-color: #464544; }
            #banner1, #banner2, #banner3 { background-color: #cc7b24; }
        </style>
    </head>
    <body>
        <div class="container_12">
            <div class="grid_12" id="cabecera">
                Cabecera de Pagina (column12 = 940px)
                <div class="grid_3 prefix_9" id="buscador">
                    <p>
                        Buscar: (column3 = 220px)
                        <input type="text" id="buscar" name="buscar" />
                        <input type="submit" id="busq" name="busq" value="Buscar" />
                    </p>
                </div>
            </div>
            <div class="clear"></div>
            <div class="grid_12" id="menu">
               <p>Menu Horizontal (column12 = 940px)</p>
            </div>
            <div class="clear"></div>
            <div class="grid_12" id="contenido1">
                <div class="grid_12 alpha" id="contenido2">
                    <p>Contenido Presentacion Gif/Flash?etc (column12 = 940px)</p>
                </div>
                <div class="clear"></div>
                <div class="grid_4 alpha" id="banner1">
                    <p>imagen y texto 1 (column8 = 620px)</p>
                </div>
                <div class="grid_4" id="banner2">
                    <p>imagen y texto 2 (column4 = 300px)</p>
                </div>
                <div class="grid_4 omega" id="banner3">
                    <p>imagen y texto 3 (column4 = 300px)</p>
                </div>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
            <div class="grid_12" id="pie">
                <p>Pie de Pagina (column12 = 940px)</p>
            </div>
            <div class="clear"></div>
        </div>
    </body>
</html>

El codigo anterior mostrara un layout o maquetado como este: ejemplo del 960 Grid System

Como se aprecia, es un framework de CSS muy sencillo y con el cual se puede tener en mente como estara conformada las capas del diseno de pagina e ingresar dentro de estas organizacion de capas nuestro contenido.

Blueprint

Otro Framework para CSS que tocare en esta entrada es Blueprint que cumple a mi parecer de igual manera como el 960 Grid System ya comentado anteriormente.

Para empezar a usar este framework, igual como el anterior, se descarga y se coloca su carpeta dentro de nuestro proyecto, realmente la unica carpeta de Blueprint que nos interesa anexar a nuestra estructura de proyecto es la carpeta blueprint dentro de nuestra carpeta css. Blueprint posee las siguientes carpetas:

  • carpeta blueprint (el framework, la carpeta que anexaremos a nuestro proyecto, contiene dos carpetas y unos archivos css, la carpeta plugins y src.)
  • carpeta blueprint/plugins (contiene unos css y carpetas de iconos)
  • carpeta blueprint/plugins/fancy-type (posee un screen.css con formatos de texto a incorporar, tipografia adicional)
  • carpeta blueprint/plugins/buttons (una carpeta icons con 3 iconos y el archivo css para usarlos con el framework)
  • carpeta blueprint/plugins/link-icons (eso mismo, iconos para enlazar/linkear a direcciones o descargas de archivos en dicho formato, con ver los iconos se aprecia la idea)
  • carpeta blueprint/src (contiene todos los css de blueprint)
  • carpeta lib (las librerias en ruby para validaciones)
  • carpeta test (eso mismo, contiene pruebas, un index y una carpeta parts con otros ejemplos)
  • carpeta templates (solo tiene una carpeta psd con una plantilla la cuadricula de 24 columnas para photoshop)
  • unos cuantos archivos por fuera, licencia, cambios, sobre el autor, Readme, etc.
<head>
  <link rel="stylesheet" type="text/css" media="print" href="css/blueprint/reset.css">
  <link rel="stylesheet" type="text/css" media="screen, projection" href="css/blueprint/screen.css">
  <link rel="stylesheet" type="text/css" media="print" href="css/blueprint/print.css">
  <!--[if IE]>
  <link rel="stylesheet" type="text/css" media="screen, projection" href="css/blueprint/ie.css">
  <![endif]-->
</head>

Blueprint tiene varios archivos css que tiene en comun 960 y otros que 960 no tiene. Igual que el framework anterior reset.css elimina regla css que por default el navegador tenga para nuestra pagina, print.css

  • reset.css (elimina toda regla css aplicada por default del navegador a nuestra pagina)
  • print.css (obvio, formato css para impresiones)
  • grid.css (el que contiene todo lo referente a los grid de 24 columnas, seria el 960.css del otro framework)
  • ie.css (un css especifico para el caso del navegador Internet Explorer)
  • typography.css (nos ofrece distintas tipografias, de las cuales se indica en breve, el 960 tiene uno llamado text.css pero el de blueprint es mas extenso.)
  • forms.css (aplique del css para formularios, algo interesante, esto no lo tiene el 960GS)

Los tipos de tipografias:

.small: Hace el elemento más pequeño.
.large: Hace el elemento más grande.
.hide: Oculta el elemento.
.quiet: Atenua el color de la fuente.
.loud: Hace que el texto tenga color negro.
.highlight: Añade un fondo amarillo al tezto.
.added: Añade un fondo verde al tezto.
.removed: Añade un fondo rojo al tezto.
.first: Elimina el margin/padding del lado izquierdo del elemento.
.last: Elimina el margin/padding del lado derecho del elemento.
.top: Elimina cualquier margin/padding superior del elemento.
.bottom: Elimina cualquier margin/padding inferior del elemento.

Sobre forms.css el cual esta para darle su estilo CSS a los elementos de un formulario los class de estos elementos deben tener .text (tamanio normal) o .title (tamanio grande) para que forms.css le aplique un CSS a estos. Para mostrar mensajes de error, seria:

div.error: Crear un cuadro de error (rojo).
div.notice: Crear un cuadro de noticias (amarillo).
div.success: Crear un cuadro de mensajes correctos (verde).

La estructura de capas <div> no es muy diferente a la de 960GS, principalmente un container y dentro de este los span-xx donde xx es el numero de columnas en pixel (px), como los grid_xx del 960GS.

<div class="container">
   <div class="span-24">
      <h1>Cabecera</h1>
   </div>
   <div class="span-4">
      <h2>Menu</h2>
   </div>
   <div class="span-16 last">
      <h3>Contenido</h3>
   </div>
   <div class="span-24">
     <p>Pie de pagina</p>
   </div>
</div>

Cuando en una misma linea se aplican varias capas, dentro del nombre de clase del ultimo

(de derecha a izquierda, el ultimo) debe colocarsele last

esto es para eliminarle un borde un borde izquierdo que posee, los span-24 no lo necesitan porque abarcan todo el ancho de los 940px.

Igual como con 960GS, Blueprint tiene otras clases para ayudar a indicar en otras cosas la maquetacion de las capas<div>.

.append-x: Añade x número de columnas vacías despues de la columna.
.prepend-x: Añade x número de columnas vacías antes de la columna.
.push-x: Empuja una columna x columnas a la izquierda. Puede ser usada para intercambiar columnas.
.pull-x: Tira una columna x columnas a la derecha. Puede ser usada para intercambiar columnas.
.border: Aplica un borde en el lado derecho de la columna.
.colborder: Añade una columna vacía, con un borde en el medio.
.clear: Crea una columna debajo de una fila, sin importar el espacio.
.showgrid: Añade un contendor o columna para ver la tabla.

Donde x es un valor de 1 a 23 para append-x y prepend-x y de 1 a 24 para push-x y pull-x.

Nuevamente un ejemplo de maquetacion, quedara igual que el ejemplo del 960GS pero hacia Blueprint, icon los mismos colores para las capas, misma estructura pero apegado a su sintaxis:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv='Content-type' content='text/html; charset=UTF-8' />
        <title>Practica Blueprint</title>
        <link rel="STYLESHEET" type="text/css" href="css/blueprint/src/reset.css">
        <link rel="STYLESHEET" type="text/css" href="css/blueprint/src/grid.css">
        <style>
            #cabecera, #pie { background-color: #2f309d; }
            /* #buscador { background-color: #3e1414; } */
            #menu { background-color: #143e14; }
            #contenido1 { background-color: #ddc3af; }
            #contenido2 { background-color: #464544; }
            #banner1, #banner2, #banner3 { background-color: #cc7b24; }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="span-24" id="cabecera">
                cabecera
                <div class="span-4 prepend-18" id="buscador">
                    Buscar: <input type="text" id="buscar" />
                    <input type="submit" id="busq" value="Buscar" />
                </div>
            </div>
            <div class="span-24" id="menu">Menu</div>
            <div class="span-24" id="contenido1">
                <div class="span-24" id="contenido2">
                    <p>Presentacion</p>
                </div>
                <div class="span-8" id="banner1">
                    <p>imagen y texto 1</p>
                </div>
                <div class="span-8" id="banner2">
                    <p>imagen y texto 2</p>
                </div>
                <div class="span-8 last" id="banner3">
                    <p>imagen y texto 3</p>
                </div>
            </div>
            <div class="span-24" id="pie">
                Pie de pagina
            </div>
        </div>
    </body>
</html>

El codigo anterior mostrara un ejemplo como este: ejemplo del Blueprint (igual que el 960gs pero basado en blueprint).

Cuanto es el ancho en pixel de cada columna de esta cuadricula de 24 columnas?, esto seria 960/24=40 c/u. Cada columna es de 40px igual como el caso del 960GS.

Conclusiones

Cuando se habla de Frameworks sin importar de que tipo de Framework se hable, es de conocerse bien que hay personas que no los aprueban y otras si, los que los aprueban aprecian mas unos que otros. No voy a decir que 960GS es mejor que Blueprint o viceversa, cada uno tiene lo suyo y a cada cual le gusta o se inclinara mas por el que hayan escogido por sus validas razones.

Mis comparaciones sobre estos dos Frameworks de CSS:

960 Grid System Blueprint
  • Tiene varios Templates para distintas aplicaciones de diseno grafico (photoshop, firework, illustrator, visio, etc.)
  • Tiene comprimido y no comprimido sus CSS.
  • Posee un sistema de cuadriculas de 12, 16 y 24 columnas.
  • Tiene un PDF para imprimir su cuadricula de 12, 16 y 24 columnas.
  • Tiene clases para crear espacios vacios a las capas <div>, restarle el margen derecho o izquierdo de 10px.
  • No tiene un CSS para Internet Explorer.
  • No tiene un CSS para printer ni formulario como Blueprint.
  • Tiene solo un Template para una sola aplicacion de diseno grafico (para photoshop unicamente).
  • Solo posee un sistema de cuadriculas de 24 columnas.
  • No trae documento para imprimir basado en su cuadricula de 24 columnas.
  • Su estructura de carpetas y archivos es mas amplia, iconos, archivos CSS para tipografia adicional y disenio para formulario para aplicar con el Framework.
  • Si tiene un CSS exclusivo para tratar al Internet Explorer.
  • Ademas de las clases para crear espacios vacios y restarle la sangria de derecha o izquierda, tiene tambien para aplicar bordes y agregar o mover X columnas a la capa.
  • Posee una validacion de los CSS que 960GS no posee.

Podria decir que Blueprint posee mas tamanio en comparacion con 960 Grid System, aunque 960GS tiene mas templates y uno para imprimir y opcion de 3 cuadriculas de columnas (12, 16 y 24), Blueprint posee mas archivos CSS (printer.css, ie.css, forms.css, tipography.css) ademas de mas clases con respecto al posicionamiento de las capas <div>. Queda a gusto del usuario usar el Framework que mas le guste, en mi caso, necesitaba conocer y comparar entre los mas sonados en la gran nube para dar mi preferencia a uno de estos.


About this entry