960 Grid System, un framework para CSS

960 Grid System, un framework para CSS
Facebook Twitter Flipboard E-mail




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.



Ejemplo de división en columnas de 960.gs




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.



Panel de configuración de un custom CSS en 960.gs


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

Comentarios cerrados
Inicio