Grid CSS responsive (adaptable) construido con SCSS

ProfoundGrid es un pequeño sistema de grids para diseños fijos y flexibles, construido utilizando SCSS.

Para el que no lo conoce SCSS (Sassy CSS) es una sintaxis muy similar a la que utilizamos al escribir SASS, pero que a diferencia de esta última, es completamente compatibles con CSS3. Otra diferencia es que la sintaxis de SCSS corresponde a la nueva propuesta por SASS en su tercera versión.

sistema grid escrito en SCSS

Volviendo a ProfoundGrid, sus principales características son tres:

  • Adaptable (responsive): compatible con la mayoría de los dispositivos posibles: teléfonos móviles, tablets, computadoras de escritorio, etc.
  • Semantico: Muy fácil de personalizar y de implementar en cualquier proyecto.
  • Preciso: ProfoundGrid hace mucho uso de los márgenes negativos para calcular las columnas, esto hace que se vea exactamente igual en la mayoría de los navegadores.

Otro detalle que me parece interesante comentar es que este sistema de grid, a diferencia de otros similares, cuenta con la particularidad de permitir crear sitios tanto flexibles como fijos, de una forma muy sencilla y con apenas unas lineas de código.

Al utilizar SCSS, personalizar un sitio con este sistema se resume en el uso de algunas variables, por ejemplo:

//Definimos el numero de columnas:
$total-colums: 12;
//Configuramos el ancho máximo:
$total-width: 960px;
//Definimos el margen del contenedor:
$container_margin: 1%;

Muy simple verdad? 😀

Web: ProfoundGrid

Categorizado en: