Flexbox Grid: Sistema de grillas flexibles

flexbox-grid

Hola, hace tiempo que no publico nada pero hoy me he tomado un tiempo para una nueva entrada. Hoy te comentaré sobre Flexbox Grid. Hoy el CSS cuenta con un elemento que antes no existía, el elemento Flex, también conocido como Flexbox, y se trata de cajas flexibles que se ajustan a algún contenedor. Este elemento es excelente para el nuevo diseño y reemplaza el uso de float, que aunque aún existe, no será necesario para diseñar.

Flexbox Grid es un sistema de grillas basado en estos elemntos flex, usando una sintáxis parecida a la de Bootstrap, solo que Bootstrap se basa en los float. Este sistema de grillas lo recomiendo para el diseño de tus nuevas aplicaciones web, ya que se adaptarán según el tamaño de su contenedor ya que además es responsive.

Te dejo un enlace para que visites la página del creador, que contiene un Getting Started para que vayas viendo como se usa este framework frontEnd.

Visitar Flexbox Grid

¿Cómo se usa Flexbox Grid?

Bien, si alguna vez ya haz usado el sistema de grillas de Bootstrap, usar Flexbox Grid se te hará un poco familiar ya que parte de su sintaxis es similar. Empecemos viendo como obtener éste Framework.

  1. Primero vamos al Sitio Web Oficial y descargamos los archivos haciendo clic en el botón ‘Download‘.
  2. Luego, teniendo  el archivo lo descomprimimos y copiamos los archivos CSS que están contenidos en la carpeta dist (flexboxgrid.css y flexboxgrid.min.css), en nuestra carpeta proyecto (donde tengamos la web que estemos trabajando). Es todo lo que necesitamos, los archivos que están contenidos en la carpeta dist, son dos archivos que en realidad son los mismos solo que uno está comprimido para que pese menos, el otro es para editarlo si quieres.
  3. Luego, suponiendo que tenemos el archivo flexboxgrid.min.css en nuestra carpeta css de nuestro proyecto lo enlazamos a nuestro documento HTML como si enlazáramos una hoja de estilos cualquiera.

Bien, ya tenemos el framework “instalado”, ahora solo hace falta usarlo. Para eso revisamos la documentación de uso en el Sitio Web Oficial, sigue esos ejemplos y ve familiarizándote poco a poco.

Flexbox Grid es un framework alternativo a Bootstrap, en lo personal me gusta porque extrae lo más potente de Bootstrap que es su sistema de grillas, solo que Flexbox Grid lo ha adaptado a la nueva “tecnología” Flex de CSS.

Teniendo este sistema de grillas, sin todos los demás estilos, me da libertad de estilizar mi página web a como yo quiera, sin tener en mi hoja de estilos clases que no vaya a utilizar.

¿Has usado ya éste sistema de grillas? ¿Qué te parece? 😀

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *