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.

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

Pablo: Programador desde hace más de 11 años, adicto a internet, cafeinómano, fanático de la información, intento de emprendedor, trabaja de forma compulsiva solo en lo que ama. Sueña con tener una aplicación con más de 1 millón de usuarios.
Entradas relacionadas