960 Grid System, un framework para CSS




960.gs es un framework orientado a maquetar sitios web (o incluso aplicaciones) con el mínimo esfuerzo posible, pero limitados a (de ahí el nombre) 960 píxeles de ancho.
Hacía tiempo que andaba buscando un sistema para montar aplicaciones web de estructura no orientada a columnas iguales y típicas, que es donde muchos tenemos un gran handicap.
Y además no se mete en el diseño, y no es “tirar de plantillas” que ya vienen con estilos de tablas, inputs y demás elementos que es más que probable queramos personalizar por otro lado.



Este framework divide la pantalla en 12 o 16 columnas que vamos combinando según las necesidades pudiendo montar de una forma sencilla webs con múltiples secciones diferentes en tamaño, zonas para cajas, etc.
Estas divisiones se configuran de forma natural, donde simplemente tendremos que ir sumando los tamaños que vamos concatenando para llegar a esas columnas que estamos usando como guía.






Dispone de un generador de layouts en HTML usando esta estructura de bloques, el cual es muy sencillo, aunque podríamos hacer todo el proceso desde el HTML usando las clases CSS que nos proporciona.
También nos facilita modificar los CSS o incluso generar unos a medida usando su “Variable Grid System”, donde podemos definir el grid donde vamos a montar el layout de la web.




Si queremos verlo en acción, aquí tenemos un video tutorial que nos explica cómo hacerlo paso a paso usando únicamente un editor y las clases CSS de 960.gs.
Como veréis es bastante sencillo y no es necesario “contaminar” nuestro proyecto con decenas de ficheros ni supone dejar la página muy pesada.

Más información| 960.gs

Portada de Genbeta