- 960 Grid System
-
960 Grid System Autor Nathan Smith
http://960.gs/Información general Género Framework Programado en CSS Licencia GPL and MIT En español ? 960 Grid System es una biblioteca de CSS enfocada a la maquetación de una página web.
Contenido
960 pixels
La biblioteca utiliza un contenedor (div) principal de un tamaño fijo de 960 pixels, de ahí su nombre. Se eligió este tamaño por ser fácilmente divisible entre 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 y 480.
Uso
Para poder usar la biblioteca en una página, debemos añadirla en el código:
<link rel=stylesheet href="ruta/960.css" type="text/css">Una página se estructura usando la etiqueta HTML div. Primero se crea un contenedor principal que contendrá el resto de capas y estará dividido en 12 o 16 columnas. El número de columnas y cuántas ocuparán cada capa se define mediante el atributo class.
Para el div contenedor se pueden utilizar las clases container_12 o container_16 para especificar si contendrá 12 o 16 columnas.
Para las capas interiores se usa la clase grid_X, dónde X es el valor de columnas que ocuparán.
Con el siguiente código se crearía una página con una cabecera para un título que ocuparía 12 columnas. En la siguiente fila se crearían dos capas, una para un menú con una anchura de 4 columnas y otra para el contenido de 8 columnas. Al final habría una capa como pie de página ocupando las 12 columnas.
<div class="container_12"> <div class="grid_12">Cabecera</div> <div class="grid_4">Menú</div> <div class="grid_8">Contenido</div> <div class="grid_12">Pie de página</div> </div>
También existen las siguientes clases complementarias:
- alpha y omega: Se utilizan para crear capas dentro de capas.
- prefix_XX y suffix_XX: Para crear capas en blanco antes o después de la capa actual.
Resetear estilos CSS
La biblioteca viene con el archivo reset.css, desarrollado por Eric Meyer, que sirve para eliminar algunos valores de estilo preestablecido que los navegadores web asignan a algunos elementos, evitando así ciertas inconsistencias de los mismos en la visualización del documento.[1] El archivo (reset.css), si se enlaza como externo, debe añadirse antes de cualquier otro archivo CSS externo:
<link href="ruta/reset.css" rel="stylesheet" type="text/css"/> <link href="ruta/960.css" rel="stylesheet" type="text/css"/>
Licencia
960 Grid System está licenciado bajo GPL y MIT.
Referencias
- ↑ Meyer, Eric A. (2011). «CSS Tools: Reset CSS» (en inglés). Consultado el 11 de marzo de 2011. «(en inglés) The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.».
Enlaces externos
Categoría:- Bibliotecas de CSS
Wikimedia foundation. 2010.
