El documento explica el sistema de retícula (grid system) para el diseño web. Un grid system divide el espacio de diseño en columnas y filas para facilitar la composición. Los beneficios incluyen una mejor organización de la información, mayor control sobre la composición de página y un diseño más consistente entre páginas. El documento describe cómo utilizar clases como container_12, grid_4 y push_3 para implementar un grid system de 12 columnas y controlar el ancho y posicionamiento de los elementos.

1. FRONT-END BASICS
Grid System
/ ♣ Octubre 2012Nadal Soler @nadalsol

2. GRID SYSTEM
Sorry… ¿Grid qué?
Sin retícula no hay película
Ventajas / ¿Desventajas?
Cómo usar el Grid
Recursos

3. SORRY… ¿GRID QUÉ?
El concepto Grid System no es nuevo (diseño editorial).
Se basa en una retícula (grid) como elemento para mantener orden,
proporción y composición.
Esta estructura/base se conoce como Layout.

4. SIN RETÍCULA NO HAY PELÍCULA
Cualquier Diseñador y Front-end Developer debería usar un grid
frente a diseños complejos.
Facilita la composición y evita incoherencias al aplicar la Guía de
Estilos.
, , , , , …Inuit CSS 960gs Gumby Framework 1140 Grid Bootstrap Zen Grids

5. VENTAJAS / ¿DESVENTAJAS?

6. VENTAJAS
Mejor organización de la información.
Mayor control sobre la composición de página (ningún elemento
puede desbordar* el grid acordado).
Mayor versatilidad sobre el layout (2 cols, 3 cols…).
Diseño más consistente entre páginas (homogeneidad = mejor
experiencia de usuario).
Fácil implementación y mantenimiento (los diseños de nuevas
páginas/secciones deben ceñirse al grid).
Pequeñas mejoras en SEO y accesibilidad, al poder "empujar"
contenidos (classes pushy pull).
* Salvo contadas excepciones (algunos banners, fixedbars, modal windows, etc…).

7. ¿DESVENTAJAS? I DON'T THINK SO…
Puede generar mayor densidad de código HTML (más <div>s y
classes).
Nombres de classes "poco semánticos", como container_16,
grid_8, span8, row…
En proyectos pequeños, mucho código CSS que quizás nunca
usaremos.
¿Es esto grave? I don't think so… Los beneficios superan las
"desventajas".

8. CÓMO USAR EL GRID
1. Utiliza la class container_12 para el grid de 12 columnas y
container_16 para la versión de 16 columnas.
<div class="container_12">
<div class="grid_4">
<p>I like French Fries</p>
</div>
<div class="grid_4">
<p>Of course, I mean Freedom Fries</p>
</div>
<div class="grid_4">
<p>Mr. Potato is cool!</p>
</div>
</div>
<div class="container_16">
<div class="grid_12">
<p>I like French Fries</p>
</div>
<div class="grid_4">
<p>Of course, I mean Freedom Fries</p>
</div>
</div>

9. CÓMO USAR EL GRID
2. Utiliza las classes grid_1, grid_2, grid_3, etc. para fijar los anchos de
columna. Para rellenar una fila completa, asegúrate que las columnas
sumen 12 ó 16.
ejemplo: grid_4+grid_2+grid_6=12
<div class="container_16">
<div class="grid_12">
<p>I like French Fries</p>
</div>
<div class="grid_4">
<p>Of course, I mean Freedom Fries</p>
</div>
</div>

10. CÓMO USAR EL GRID
3. Utiliza push y pull para posicionar items en la página de forma
independiente, a pesar de su posición en el HTML.
<div class="container_12">
<div class="grid_6 push_3"><p>logo</p></div>
<div class="grid_3 pull_6"><p>text column</p></div>
<div class="grid_3"><p>text column</p></div>
<div class="grid_12"><p>big box</p></div>
</div>

11. CÓMO USAR EL GRID
4. Utiliza las classes prefix y suffix para crear espacios vacíos en el
layout.
En esteejemplo podemos ver como crear un espacio vacío detres columnas después deun elemento, medianteel uso
dela class suffix_3.
<div class="container_12">
<div class="grid_6 suffix_3">
<p>class="grid_6 suffix_3"</p>
</div>
<div class="grid_3">
<p>class="grid_3"</p>
</div>
<div class="grid_12">
<p>big box</p>
</div>
</div>

12. CÓMO USAR EL GRID
5. Utiliza las classes alpha ("first") y omega ("last") para eliminar los
márgenes de columnas en grids anidados.
En el ejemplo vemos como crear sub-divisiones dentro decolumnas, anidando grids.
<div class="container_16">
<div class="grid_8">
<div class="grid_4 alpha">
<p>grid_4 inside grid_8 (alpha)</p>
</div>
<div class="grid_4 omega">
<p>grid_4 inside grid_8 (omega)</p>
</div>
</div>
<div class="grid_8">
<p>grid_8</p>
</div>
</div>

13. CÓMO USAR EL GRID (RESUMEN)
1. Utiliza la class container_12 para el grid de 12 columnas y
container_16 para la versión de 16 columnas.
2. Utiliza las classes grid_1, grid_2, grid_3, etc. para fijar los anchos de
columna. Para rellenar una fila completa, asegúrate que los anchos
de columnas sumen 12 ó 16 (p.e. grid_4 + grid_2 + grid_6 = 12).
3. Utiliza las classes push y pull para posicionar items en la página de
forma independiente, a pesar de su posición en el HTML.
4. Utiliza las classes prefix y suffix para crear espacios vacíos en el
layout.
5. Utiliza las classes alpha ("first") y omega ("last") para eliminar los
márgenes de columnas en grids anidados.

14. RECURSOS
Todos los ejemplos vistos en esta presentación están basados en . Otros gridsystem pueden usar nombres de
classes distintos.
The Grid System
The 960 Grid System Made Easy
960gs
Variable Grid System
Fluid 960 Grid System
mos-golden Grid System
960gs

15. DUDAS, PREGUNTAS, BOSTEZOS…
☛ The End ☚