Tecnología y Coaching para Emprendedores

El Grid Semántico: la Mejor Opción para Responsive Design

responsive design

Hace poco vimos un artículo con los mejores grids y frameworks para diseño web responsive. Después de escribir el artículo he estado indagando más sobre el tema del uso de grids (lo reconozco, no había usado uno hasta la fecha) y descubrí algo que no me gustaba nada: las etiquetas adicionales que hay que insertar en el HTML. Estas etiquetas del estilo col-3, col-6 no sólo no son semánticas, sino que crean un código adicional que empeora el rendimiento web.

Después de mucho indagar, me di cuenta que la mejor opción es The Semantic Grid System, o al menos lo es para mí, ya que no utiliza clases adicionales en el markup. El único contra que le puedo dar es que no funciona con SASS. Dirás que sí lo hace con SCSS, una derivación de SASS, pero el problema es que Compass no funciona con SCSS. Por lo demás funciona con el preprocesador de CSS LESS y con Stylus.

El Grid Semántico

Tal y como su nombre indica, uno de los problemas que soluciona este grid es que, a diferencia de otros grids, crea un código web semántico. Veamos un ejemplo de un grid tradicional:

<div class="col_3">
	//  código..
</div>
<div class="col_9">
	//  código..
</div>

Sí que es verdad que hay muchos grids en el mercado que son fluidos y pensados para diseño web responsive, pero al menos a mí no me gusta para nada tener que utilizar este tipo de etiquetas en mi código HTML.

Características del grid semántico

Estas son las principales características del grid semántico:

  • Es semántico
  • Es responsive
  • Puede ser tanto fijo como fluido
  • El número de columnas es personalizado
  • Te permite definir el ancho de las columnas y los espacios intermedios
  • Funciona con el preporcesador de CSS LESS

Si el problema es que no sabes qué es LESS o como utilizarlo, no te preocupes, aquí tienes un tutorial de introducción a LESS, las ventajas son muchas y la curva de aprendizaje muy suave, por lo que vale la pena echarle un vistazo.

Configurar el grid semántico

La configuración del grid semántico es muy sencilla, lo pimero que tienes que hacer es importarlo a tu hoja de estilos de LESS con este código:

@import 'grid.less';

Layout fijo

En el caso de un layout fijo, lo siguiente es que introduzcas el número de columnas, así como el ancho de las columnas y el ancho de los espacios intermedios. Así, por ejemplo, el siguiente código CSS dará lugar a un layout fijo de 960px:

@columns: 12;
@column-width: 60;
@gutter-width: 20;

Una vez hemos definido esto, con CSS decidimos el número de columnas de cada apartado:

header { .column(12); }
article { .column(9); }
aside { .column(3); }

Layout fluido

En el caso de querer un grid fluido, lo único que deberás hacer es decir que el ancho será del 100% y definir un porcentaje para cada sección:

// LESS
@total-width: 100%;

Como puedes ver, esta línea de código no es válida en CSS, ya que se trata de LESS. Con esta simple línea has convertido el layout de fijo a fluido, ¡así de fácil! Veamos un ejemplo:


@import 'grid.less';

@columns: 12;
@column-width: 60;
@gutter-width: 20;

@total-width: 100%; //Cambia de píxeles a porcentajes

article {
   .column(9);
}
section {
   .column(3);
}

Layouts con media queries

Para que un diseño web sea plenamente resopnsive, debería utilizar un layout fluido, así como media queries. Acabamos de ver el uso de un layout fluido, veamos ahora cómo utilizar media queries de CSS3 con el grid semántico:


article {
   .column(6);
}
aside {
   .column(6);
}

@media screen and (max-width: 360px) {
   article {
      .column(12);
   }
   aside {
      .column(12);
   }
}

Así, para un viewport inferior a 360px, en ambos casos se utilizaría todo el ancho de pantalla disponible.

Push y Pull

Con push y pull puedes mover las columnas en el grid, puedes ver aquí un ejemplo.

Push

// LESS
article {
   .push(2);
}

// CSS compilado
article {
   margin-left: 170px;
}

Pull

// LESS
article {
   .pull(2);
}

//  CSS Compilado
article {
   margin-right: 170px;
}

Conclusión

hay muchos grids para diseño web responsive, cada uno debe escoger el que más se adapte a sus necesidades. El inconveniente de este grid es que has de aprender antes a trabajar con LESS, pero si lo haces, verás que es un modo mucho más eficiente de programar y trabajar. A mí personalmente me encanta la idea de que sea semántico y de que me ahorre el tener que estar usando mil etiquetas innecesarias, a partir de aquí, cada uno ha de ver que opción le resulta mejor para sus necesidades.


Comentarios

  • Emilio Cobos Álvarez

    Compass funciona tanto con SCSS como con SASS ;).
    Ya que estoy aquí te dejo un proyecto similar por el archiconocido Eric Meyer: Susy.
    Éste no lo conocía (de hecho por ahora no trabajo con grids), pero tiene muy buena pinta.
    Saludos!

    • Sandra

      Gracias Emilio, me haces un favor al decírmelo, porque en la web de Compass no lo encontré:-)

    • Emilio Cobos Álvarez

      En los ejemplos de la documentación puedes cambiar entre sintaxis haciendo click en un botón. Aunque reconozco que no es demasiado claro :)