Tecnología y Coaching para Emprendedores

Frameworks y Grids para Diseño Web Responsive

Frameworks

Estoy preparando un curso que voy a dar sobre Bootstrap y una de las preguntas con la que seguro me encuentro es qué diferencia hay entre un grid y un framework, además de qué otras opciones tenemos disponibles. Recuerdo cuando empecé de manera autodidacta en el mundo del diseño web y me perdía entre tantas palabras técnicas, así que, voy a explicar brevemente la diferencia entre ambas herramientas.

Un grid es un sistema de columnas que nos facilita el crear nuestros diseños de modo que visualmente se vean proporcionados y equilibrados. Los hay de 12, 16 y hasta 24 columnas. El estándar son 12 columnas y lo que hacemos es dividir el ancho de la web en estas columnas y distribuir los elementos en ellas. En el curso de Bootstrap 3 vemos cómo encajar los elementos que queremos que aparezcan en nuestra web dentro de un grid de 12 columnas, que es el que usa este framework.

gridsystem

Un framework integra siempre un grid, pero va mucho más allá, ya que contiene muchos otros elementos, como pueden ser botones, formularios de contacto, sliders, barras de navegación y, en frameworks avanzados, funcionalidades de JavaScript que den dinamismo al contenido. Así, una vez sabemos usar el framework, vamos mucho más rápidos en crear sitios web, ya que podemos reaprovechar código de un proyecto a otro con mayor facilidad y tenemos muchas cosas creadas de antemano. Si le queremos dar un toque personal, simplemente sobreescribimos las clases de CSS, y voilà, tenemos un sitio web que usa un framework y que parece hecho a mano desde cero.


Frameworks para Diseño Web Responsive

En este artículo he querido recopilar una colección de frameworks y grids para diseño web responsive. Si bien el que yo utilizo y enseño es Bootstrap 3“>Bootstrap 3, existen muchas otras opciones, tal y como veremos aquí. En esta apartado vamos a ver una recopilación de frameworks y después veremos un conjunto de grids.

Bootstrap 3

Este framework es uno de los más populares del mercado, habiendo sido desarrollado por el equipo de Twitter. Bootstrap ha sido creado pensando en ofrecer la mejor experiencia de usuario tanto para móvil como para desktop. Utiliza un grid responsive de 12 columnas y trae integrado docenas de complementos, plugins de JavaScript, formularios y mucho más. Si bien ha sido desarrollado con LESS, también se puede usar SASS o bien ningún preprocesador de CSS si así se desea.

Lo bueno de Bootstrap 3 es que es mobile first, si te interesa este framework, te recomiendo leer el artículo: Bootstrap 3, ¿vale la pena usar un framework? Y si quieres aprender Bootstrap, te recomiendo mi curso de Bootstrap 3 desde cero donde aprenderás todo lo que necesitas para crear una web rápidamente con este framework.


Foundation

En su web dice ser el framework más avanzado para front-end. Foundation ha sido desarollado con SASS, un potente preprocesador de CSS que hace de Foundation un framework fácilmente personalizable. Foundation saca partido de las nuevas tecnologías y funciona con IE8+. Posiblemente sea uno de los frameworks más avanzados que existen en la actualidad, por lo que vale la pena probarlo.


Gumby Framework

Gumby es un framework resopnsive con un grid de 960px. Gumby te permite descargar la opción de 12 columnas, la de 16 columnas o bien la opción hibrida 12/16. Lleva integrado muchos estilos para ahorrarte el trabajo de hacerlo tú, como son formularios, botones, menús desplegables, etc. También incluye plantillas PSD para que puedas editar los diseños.


Responsive Aeon Framework

Este framework viene codificado en HTML5 y con un grid CSS3 de hasta 1104px. El JavaScript se carga en paralelo, lo que mejora el tiempo de carga. Tal y como indican en su página web es fácil de usar y de entender. Es un framework minimalista con sólo 120 líneas de código para su funcionamiento.


Less Framework 4

Es un framework pensado para diseños muy sencillos, ya que sólo ofrece cuatro posibles layouts basados en un solo grid. Si bien para mobile puede ser una buena opción, para desktop hoy en día se queda un poco corto, ya que el último salto es a 992px.


Grids para Diseño Web Responsive

Si no queremos todas las ventajas que traen integrados los frameworks y sólo queremos un grid para diseño web responsive, entonces es mejor apostar por una solución más sencilla. Con extensiones de Photoshop podemos crear también nuestro propio sistema de grid, la ventaja de estas soluciones es que ya son responsive.

Columnal

Es un grid CSS responsive inspirado en cssgrid.net y 960.gs. Tiene un ancho de hasta 1140px, y según los desarrolladores su potencia se basa en el uso de subcolumnas.


Gridiculo.us

Gridicul.ous es un grid responsive basado en el boilerplate que funciona en resoluciones desde 320px hasta 1200px. Utiliza un grid de 12 columnas. Puedes definir así como máximos de ancho de página 1200px, 960px, 640px y 320px.


Responsive Grid System

Se trata de un grid responsive con enfoque mobile first y la posibilidad de usar 12, 16 o 24 columnas.


The Semantic Grid System

The Semantic Grid System es un grid que te permite definir el ancho de las columnas y de los espacios intermedios, que te permite definir el número de columnas que tendrá, así como cambiar fácilmente entre píxeles y porcentajes.


Responsive Grid System

Tal y como su página web indica, el Responsive Grid System ni es un framework ni es un boilerplate, es un sistema de grid que te permite crear un diseño web responsive con facilidad. Utiliza porcentajes y un grid fluido.


Skeleton

Skeleton es un boilerplate que ofrece un grid responsive basado en una resolución de 960px que se ajusta al tamaño de los dispositivos móviles. Tiene poco peso e incluye una colección de archivos CSS y JS para facilitarnos el diseño de nuestra web.


Para acabar…

Hemos visto una serie de frameworks y grids con los que crear sitios web responsive de una manera mucho más ágil y dinámica. Si me he dejado alguno, te animo a dejar un comentario con las herramientas que usas para agilizar tu trabajo en el mundo del diseño web. Y si te ha parecido útil el artículo, será estupendo que lo compartas en las redes sociales.

Gracias!
Sandra


Comentarios

  • Juan E

    Hola,
    interesante articulo, si tubieras que elegir entre bootstrap y foundation, cuál elegirias y porque???

    • eSandra

      Pues Bootstrap sin lugar a dudas. Es muy fácil de instalar, fácil de aprender y rápido de usar. Además Bootstrap está desarrollado con el preprocesador LESS y permite compilar CSS tanto con LESS como SASS, cosa que Foundation sólo usa SASS. Y, al menos en su momento, Foundation sólo se podía usar en Mac. Un saludo!

  • AndresGF

    Hola muy buenas! excelente articulo, a modo para agregar mas frameworks de diseño que nos ayudan bastante en nuestros proyectos de cada dia, les dejo con Materializecss http://materializecss.com/ que esta muy bueno y recomendado!

    Saludos desde Paraguay! :P

    • eSandra

      Gracias por la aportación!

  • Anna Carolina Díaz Riera

    Buenos Días!! Recien me estoy involucrando en el mundo del Framework, aunque ya había escuchado de ellos, actualmente estoy probando con mi pagina personal bajo Joomla y Helix y hace rato, instale un modulo de un banner llamado Slideshow CK, lo asigne al framework Helix (bootstrap) y no se ve el la web :( me imagino q es por los JS o CSS q me han dado lios con otras secciones de la web

    • eSandra

      Buenas, sí, es lo que tiene usar un framework sin saber bien como funciona, de aquí que creé mi curso de Bootstrap, para facilitar el aprendizaje y no encontrarse con estos problemas. Suerte!

  • Anna Carolina Díaz Riera

    A por cierto muy bueno su artículo, mas tarde lo leo con mas calma. :) y voy a ver el curso de bootstrap por q me parecio interesante este frameworks y mas si es de la misma Twitter .

    Saludos

    • eSandra

      Estupendo! Cualquier duda nos dices :-)

      un abrazo!

  • Edwing Ovalle

    Hola Sandra, como siempre gracias por tu excelente articulo… Sandra, tengo una duda ¿Siempre se deben usar grids para diseñar los sitios web? esta visto como “mala práctica” hacer los diseños dando los estilos de las cajas directamente según el diseño y sus porcentajes? es decir, que estos varíen según se lo indiquemos en las media queries y sus breakpoints sin tener en cuenta grid alguna ..de antemano muchas gracias, Un brazo :)

    • eSandra

      Hola!

      te comento, el uso de grids facilita el crear un diseño visualmente equilibrado, pero no es para nada obligatorio. Yo al principio no los usaba nunca, ahora lo hago porque me facilitan el trabajo, pero es cuestión de preferencias personales.

      un abrazo!

  • edsonmgoz

    Hola Sandra, genial el artículo felicidades, la verdad que hay muchos que no conocía. Yo comencé conociendo esto de las grillas con 960 Grid System pero ahora que me fijo hay muchisimas opciones más, lo bueno es que viniendo de una fuente confiable como tu blog pues bien vale revisar cada uno de ellos 8-) Saludos!!!

    • eSandra

      Muchas gracias, Edson! Yo trabajo con Bootstrap 3, en sí tengo un curso de Bootstrap porque me parece muy útil, sé de gente que les encanta Foundation y Skeleton. A nivel de grid, probé en su momento Semantics, pero de todas las opciones yo personalmente me quedo con Bootstrap. Estoy justo ahora trabajando en un nuevo proyecto y haré servir este framework :-)

      un abrazo!

  • Marco

    bootstrap no me gusta pero es obligatorio conocerlo , pues tarde o temprano te encuentras con trabajos realizados con este framework , personalmente me gusta mas foundation , y uno del que no se habla en el articulo uikit disponible en http://getuikit.com/.

    gracias por el articulo :)

    • eSandra

      Hola Marco, por qué lo odias? A mí personalmente me parece un framework excelente y si sabes personalizarlo puedes crear sitios web impresionantes sin que parezca que detrás está Bootstrap. ¿En qué te gusta más Foundation? Gracias por el enlace, pinta chulo!

      un abrazo,
      Sandra

  • ldonis

    Hola Sandra, muy bien el articulo, en diseño web siempre nos encontramos con la pregunta ¿Qué framework es mejor? la cual siempre es muy dificil de contestar, lo que yo recomiendo es iniciarse por las bases y NUNCA aprender diseño web directamente con frameworks.
    Recurdo mi primera pagina web XD tablas y medidas en pixeles luego fui aprendiendo lo basico de css y poco a poco fui mejorando, la mejor forma que yo encontre para aprender es crear y por esa razón te dejo un pequeño proyecto para que me des tu opinión.
    http://rcat.ldonis.com/
    Saludos :)

    • eSandra

      Sí, yo doy el mismo consejo Idonis! Ahora voy un poco liada para mirarme tu proyecto, pero lo dejo aquí por si alguien quiere mirar y darte su opinión :-)
      un abrzo!

    • José

      Genial y muy útil, incluso agradable a la vista!
      buen diseño

  • Peter

    Sandra, es mejor Foundation pero en esto como los editores, para gustos los colores. Saludos.

    • eSandra

      Sí, es cierto, cada uno tiene unas preferencias. Un abrazo!

  • José

    Hola Sandra, una pregunta que tengo y quizás sea un poco relevante para quienes lo saben, pero me pregunto cuál es el estandar en grillas 960px 0 1200px vi recientementea un diseñador trabajar con 1200px y me pareció que ahora esa es la resolución en pantallas de escritorio, auqnue entiendo que el responsive design es la tendencia por los dispositivos móbiles. Gracias por éste maravilloso blog. José Luis

    • eSandra

      Hola José Luis, no hay un estándar predefinido por esta razón: hay que dar soporte a multitud de dispositivos y resoluciones. Así, Bootstrap 3 marca el límite superior en 1200px, pero otros frameworks usan otros valores. Lo importante es pensar en las necesidades de los usuarios que crees visitarán tu web.

  • Antonio

    Hola Sandra.
    Estoy pensando en pasar mi web “estática” a web responsive, me surgen varias dudas
    1. El aspecto de la web (botones, textbox, … ) son diseños propios y me gustaría mantenerlos. ¿En este caso es mejor usar sólo el sistema de grids verdad?, ya que un framework me añadirá aspectos no deseados.

    2. No se que he de tener en cuenta a la hora de usar 9, 12, 14,.. columnas. Es una web con muchos elementos de distintos tamaños, actualmente mi web tiene un ancho de 1400px aproximadamente contando fondo, pero lo que es la web es de unos 1100px. ¿Qué me aconsejas?, 1200px + un sistema de grids de 12 columnas?

    Un saludo y gracias, muy buen artículo.

    • eSandra

      Hola Antonio,

      en el caso de usar un framework necesitarías personalizar las clases del mismo o sólo descargar la parte del framework que vas a usar. Por ejemplo, Bootstrap 3 te permite personalizar la descarga. Yo he creado ahora una web en Bootstrap 3 que a nivel visual no se parece en nada al framework porque he reescrito muchas de sus clases. Lo que saco partido del grid y de otras cosas que me son útiles, como formularios, tablas, etc.
      El tema de las columnas es algo personal. Yo estoy acostumbrada a diseñar en 12 columnas con el framework de Bootstrap, pero eso ya es cada uno. No te recomiendo más de 12 columnas, se vuelve todo muy complicado de calcular.
      Un abrazo.

  • palitor

    Hola hace poco encontre un framework css llamado ED-GRID, completamente en español http://escueladigital.pe/ed-grid me parece buena opción

  • Guillermo

    Sandra felicitaciones por el post. He leído en mas de un lugar (de tu post) que mencionas sobreescribir los estilos que bootstrap propone. Tengo la duda de cual es la mejor práctica para “sobreescribir” los estilos:
    1. Modificar de manera directa la hoja de estilos de boorstrap
    2. Crear una hoja de estilos escribiendo ahí los cambios y dejar intacto los estilos bootstrap

    La duda me surge en caso tenga que actualizar una nueva versión de bootstrap y si los cambios los hiciste en la propia hoja de estilos pues se perderían.

    Quedo atento a tus sabios consejos