Front end basics - Grid System

705 visualizaciones

Publicado el

My slides -in spanish- about "Grid System" (CSS layout).

Publicado en: Tecnología
0 comentarios
2 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
705
En SlideShare
0
De insertados
0
Número de insertados
3
Acciones
Compartido
0
Descargas
16
Comentarios
0
Recomendaciones
2
Insertados 0
No insertados

No hay notas en la diapositiva.

Front end basics - Grid System

  1. 1. FRONT-END BASICSGrid System/ ♣ Octubre 2012Nadal Soler @nadalsol
  2. 2. GRID SYSTEMSorry… ¿Grid qué?Sin retícula no hay películaVentajas / ¿Desventajas?Cómo usar el GridRecursos
  3. 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. 4. 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
  5. 5. VENTAJAS / ¿DESVENTAJAS?
  6. 6. 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 pushy pull).* Salvo contadas excepciones (algunos banners, fixedbars, modal windows, etc…).
  7. 7. ¿DESVENTAJAS? I DONT THINK SO…Puede generar mayor densidad de código HTML (más <div>s yclasses).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 dont think so… Los beneficios superan las"desventajas".
  8. 8. CÓMO USAR EL GRID1. Utiliza la class container_12 para el grid de 12 columnas ycontainer_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. 9. 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 columnassumen 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. 10. CÓMO USAR EL GRID3. Utiliza push y pull para posicionar items en la página de formaindependiente, 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. 11. CÓMO USAR EL GRID4. Utiliza las classes prefix y suffix para crear espacios vacíos en ellayout.En esteejemplo podemos ver como crear un espacio vacío detres columnas después deun elemento, medianteel usodela 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. 12. CÓMO USAR EL GRID5. Utiliza las classes alpha ("first") y omega ("last") para eliminar losmá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. 13. CÓMO USAR EL GRID (RESUMEN)1. Utiliza la class container_12 para el grid de 12 columnas ycontainer_16 para la versión de 16 columnas.2. Utiliza las classes grid_1, grid_2, grid_3, etc. para fijar los anchos decolumna. 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.
  14. 14. RECURSOSTodos los ejemplos vistos en esta presentación están basados en . Otros gridsystem pueden usar nombres declasses distintos.The Grid SystemThe 960 Grid System Made Easy960gsVariable Grid SystemFluid 960 Grid Systemmos-golden Grid System960gs
  15. 15. DUDAS, PREGUNTAS, BOSTEZOS…☛ The End ☚

×