960 Grid System

960 Grid System
Información general
Tipo de programa	Framework
Autor	Nathan Smith
Licencia	GPL and MIT
Información técnica
Programado en	CSS
Enlaces
	Sitio web oficial
	[editar datos en Wikidata]

960 Grid System es una biblioteca de CSS enfocada a la maquetación de una página web.

960 píxeles

La biblioteca utiliza un contenedor (div) principal de un tamaño fijo de 960 píxeles, 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.; Meyer, Kathryn S. (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

Datos: Q5653134

[ResetMeyer-1] Meyer, Eric A.; Meyer, Kathryn S. (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.»

[1]