Sistema de retículas para diseño web
Para diseñar páginas web hacemos uso de un recurso tan antiguo como útil: el sistema de retículas. En este artículo comentamos cómo surgió este sistema, sus ventajas y algunos frameworks CSS para ponerlos en práctica.
Una retícula está formada por columnas divididas por un espacio llamado medianil (que define si el contenido se ve más compacto o más fluido). También es llamada “grilla”, grid o cuadrícula. Sirve para acomodar los elementos de nuestra página web.
Imagen de: Sitepoint.com
Cómo surgió
Originalmente los libros se escribían a mano. Para facilitar esta enorme tarea, los monjes o escribas tenían un sistema de retículas, que utilizaban para guiarse y dar al libro una estructura consistente a lo largo de la obra, si acaso solo hacían pequeños cambios en el tamaño y color de la fuente.
Imagen de: Arquehistoria.com
Cuando se inventó la imprenta se mantuvo la idea de retículas, es por eso que las primeras publicaciones tienen el mismo estilo o estructura visual de las publicaciones escritas a mano.
Imagen de: Wikiwand.com
Los primeros diseñadores formalizaron el sistema de retículas y desde entonces los libros, revistas y posters se diseñan utilizando éste sistema.
Ventajas
Los sistemas de retículas constituyen una respuesta a un problema de diseño por complejo que éste sea. Algunas de sus ventajas son:
- Toda la lectura del sitio es similar y consistente
- El diseño se ve equilibrado
- Agiliza el proceso de diseño (acomodar las cosas)
Cuando alguien entra a una web “lee visualmente” da un vistazo y obtiene un mensaje. Es por eso que debemos considerar: ¿La composición está bien hecha? ¿Es legible visualmente?
Sistema de retículas en Frameworks CSS
Prácticamente cualquier framework CSS utiliza algún tipo de sistema de retículas para organizar los elementos de diseño. A continuación mostramos solo algunos.
Retícula de Leaf
Trabaja con todos los navegadores modernos, smartphones y tablets. Es responsive y ampliamente configurable.
Retícula de Essence
Basado en un sistema de 12 columnas, muy flexible y permite una amplia variedad de diseños.
Retícula de Bootstrap
Sus sistema de retícula es responsive, orientado a mobile first, basado a 12 columnas, que escala dependiendo el dispositivo o tamaño de la pantalla.
Retícula de Semantic UI
Su sistema de retícula es muy completo y extenso, basado en un modelo de 16 columnas, permite personalizar casi cualquier aspecto de la retícula.
Retícula de Bulma
Bulma tiene un sistema de retícula muy simple y fácil de usar, con nombre de clase sencillos y una amplia variedad en formas de implementación.
Para finalizar
Observamos que cada uno de los Frameworks CSS tiene una forma distinta de implementar su sistema de retícula. La mayoría están basados a 12 columnas, pero se pueden encontrar algunos a 16 columnas. Cualquiera de ellos nos permite colocar fácilmente los elementos que deseemos en la página web.
Un sistema de retículas para diseño web nos facilita mucho el trabajo y permite obtener resultados rápidamente.
Tu comentario
