Responsive Grid System

De Casiopea





Caso de Estudio
NombreResponsive Grid System
AutorGraham Miller
Palabras Clavegrilla, diseño de interfaz, sitio web, diseño web, framework
Estudiado enTaller de Construcción DG 4 - 2012
Estudiado porDaniela Pardo
URLhttp://www.responsivegridsystem.com/


Responsive Grid System

Introducción

Responsive Grid System está inspirado en el Responsive Web Design de Ethan Marcotte y presenta ocho argumentos a su favor:

  • Columnas: La Grilla permite definir la cantidad necesaria de columnas (12, 16, 24, etc)sin restricción en el número.
  • Responsive: Como usa porcentajes las columnas fluirán a cualquier medida. Los márgenes usan porcentajes también.
  • Es Inteligente: No hay necesidad de utilizar códigos forzados en los márgenes de las columnas finales, como .last o .end.
  • Contenido: En lugar de calzar el contenido en una grilla, se puede acomodar la grilla al contenido.
  • Se Encaja a tu Diseño: Se introduce al código HTML y CSS existentes.
  • Fácil Modificación: Las versiones de móbiles están incorporadas en las cascadas de estilo y es posible crear una propia.
  • Fácil Uso: Se puede utilizar en un proyecto sencillo o difícil sin gastar mucho tiempo.
  • Matemáticas: Sólo se necesita saber la cantidad de columnas requeridas sin necesidad de cálculos.

Estructura

Columnas

Tanto las columnas como los márgenes/gutters están definidos por porcentajes que permiten la fluidez del contenido dado en el cambio de tamaño. En el enlace siguiente se ve la division de columnas y su comportamiento al achicar la ventana del navegador. [Ejemplo de Columnas]

Columnas.png

El diseño responsive actúa de manera que al cambiar el tamaño, las columnas varían su ancho, si se le resta, las columnas se achican, pero el contenido no, éste fluye para encajar en la columna. Cuando se alcanza el tamaño de 460 pixeles, la estructura será de una columna sin tomar en cuenta que en un principio sean 10 o 12.

Columnas50p.png Columnas270px.png

Tipografía

Las tipografías predeterminadas son:

  • League Gothic: [[1]]
  • Museo Slab:[[2]]
  • Goudy Bookletter:[[3]]
  • Hand Sean
  • Pictos[[4]]

CSS

Tipografiargs.png

Sitios

Los siguientes sitios poseen este sistema de grillas:

Responsive

El sitio [Newcastle Web Designer] utiliza esta grilla, en específico, en 1, 4 y 8 columnas para expresar su contenido. El diseño responsive actúa de manera diferente con respecto al código original, ya que al minimizar el sitio, las columnas siguen cambiando su tamaño.

Sitio - 4 Columnas.png Sitio - 4 Columnas-Min.png

Lo anterior sucede hasta llegar a las medidas de 270 pixeles y no 460 pixeles, donde las columnas se reordenan cambiando de 4 a 2 y de 8 a 4 (no se vuelve de 1 columna).

Sitio - 4 Columnas-Min2thb.png Sitio - 4 Columnas-Min2.png

Código

El siguiente código presenta un ejemplo de 3 o 4 columnas.

Cómo Funciona
  • .section: Divide la página horizontalmente. Se necesita para separar el contenido y se puede utilizar dentro de otros divs.
  • .group: Resuelve problemas con float, forzando la sección a eliminar el clearfix hack.
  • .col: Divide las secciones en columnas. Cada columna tiene un márgen izquierdo de 1.6% (cerca de 20 pixeles en un monitor), excepto la primera. Utilizando .col:first-child{ margin-left: 0; } significa que no es necesario usar class="last" en el código. Funciona en todos loa navegadores
  • .span_1_of_3 / .span_1_of_4: Especifica el ancho de las columnas. Utilizando porcentajes, lo que significa que son 100% fluidas.

HTML

HTML.png

CSS

CSS.png