Grid CSS responsive (adaptable) construido con SCSS

Pablo

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? :D

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.

Comentarios 0

Realizar un comentario