Tecnoaficiones

Las nuevas tecnologías al alcance de todos.

Calculador 960 Grid System, utilidad para sistema rejilla variable 960GS.

Hoy os traigo una herramienta OnLine que  he bautizado Calculator Grid System. Básicamente es un calculador, para el cada vez más popular y utilizado ​960 Grid System.
Esta herramienta nos va a permitir hacer el calculo de la rejilla, visualizar como seria la distribución y  crear el código CSS.

Una vez accedemos a su web nos encontraremos directamente en la aplicación, que tiene un aspecto como el de la siguiente imagen.

Imagen 960 Grid SystemComo podréis apreciar en la imagen, si no es así hacer doble click en la misma, podemos jugar con los valores de anchura de la columna, numero de columnas y la separación entre columnas.

Justo al lado nos da los resultados. El superior correspondería  al ancho útil para el contenido y el inferior al ancho total con los margenes incluidos.

Pulsando en Preview podéis ver distintas visualizaciones de la distribución y medidas de la rejilla, basada en 960px fija y fluido.

Y también podéis descargar el código CSS necesario para esa distribución en Grid System​. En el superior nos da un código para un sistema basado en 960px fijo, mientras que en el inferior nos lo da para uno basado en el 960px pero fluido en este caso. Si visualizáis las preview y reducís la ventana del navegador veréis claramente la diferencia.

Como nuestro propósito solo era presentar la herramienta en si, os dejo un el enlace a un tutorial de Introducción a 960 Grid System, que no siendo nada complejo si os puede dar una idea de que es y su utilización.

Esto es todo por el momento, aunque si tengo la intención de escribir algo más sobre el tema, pero más concretamente sobre Omega para Drupal, que es un tema que puede trabajar con este sistema 960GS y en modo fluido. Un saludo A.Lliso.

Añadir nuevo comentario

CAPTCHA
Esta pregunta se hace para comprobar que es usted una persona real e impedir el envío automatizado de mensajes basura.
CAPTCHA de imagen
Introduzca los caracteres mostrados en la imagen.