FRONT-END BASICSGrid System

/ ♣ Octubre 2012Nadal Soler @nadalsol

GRID SYSTEMSorry… ¿Grid qué?Sin retícula no hay películaVentajas / ¿Desventajas?Cómo usar el GridRecursos

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.

SIN RETÍCULA NO HAY PELÍCULACualquier Diseñador y Front-end Developer debería usar un gridfrente a diseños complejos.Facilita la composición y evita incoherencias al aplicar la Guía deEstilos.

, , , , , …Inuit CSS 960gs Gumby Framework 1140 Grid Bootstrap Zen Grids

VENTAJAS / ¿DESVENTAJAS?

VENTAJASMejor organización de la información.Mayor control sobre la composición de página (ningún elementopuede desbordar* el grid acordado).Mayor versatilidad sobre el layout (2 cols, 3 cols…).Diseño más consistente entre páginas (homogeneidad = mejorexperiencia de usuario).Fácil implementación y mantenimiento (los diseños de nuevaspáginas/secciones deben ceñirse al grid).Pequeñas mejoras en SEO y accesibilidad, al poder "empujar"contenidos (classes push y pull).

* Salvo contadas excepciones (algunos banners, fixed bars, modal windows, etc…).

¿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 nuncausaremos.¿Es esto grave? I don't think so… Los beneficios superan las"desventajas".

CÓMO USAR EL GRID1. 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>

CÓMO USAR EL GRID2. Utiliza las classes grid_1, grid_2, grid_3, etc. para fijar los anchos decolumna. 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>

CÓMO USAR EL GRID3. 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>

CÓMO USAR EL GRID4. Utiliza las classes prefix y suffix para crear espacios vacíos en el

layout.

En este ejemplo podemos ver como crear un espacio vacío de tres columnas después de un elemento, mediante el usode la 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>

CÓMO USAR EL GRID5. 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 de columnas, 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>

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 anchosde 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 deforma independiente, a pesar de su posición en el HTML.

4. Utiliza las classes prefix y suffix para crear espacios vacíos en ellayout.

5. Utiliza las classes alpha ("first") y omega ("last") para eliminar losmárgenes de columnas en grids anidados.

RECURSOS

Todos los ejemplos vistos en esta presentación están basados en . Otros grid system pueden usar nombres declasses distintos.

The Grid SystemThe 960 Grid System Made Easy960gsVariable Grid SystemFluid 960 Grid Systemmos-golden Grid System

960gs

DUDAS, PREGUNTAS, BOSTEZOS…

☛ The End ☚