960 Grid System

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

  1. 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


Wikimedia foundation. 2010.

Игры ⚽ Нужен реферат?

Mira otros diccionarios:

  • Grid (page layout) — A typographic grid is a two dimensional structure made up of a series of intersecting vertical and horizontal axes used to structure content. The grid serves as an armature on which a designer can organize text and images in a rational, easy to… …   Wikipedia

  • 960 (desambiguación) — El término 960 puede hacer referencia a: El año 960 de la era cristiana. La biblioteca de CSS 960 Grid System de desarrollo web. Esta página de desambiguación cataloga artículos relacionados con el mismo título. Si llegaste aquí a través de …   Wikipedia Español

  • CSS-фреймворк — CSS Framework  фреймворк, созданный для упрощения работы верстальщика, быстроты разработки и исключения максимально возможного числа ошибок вёрстки (проблемы совместимости различных версий браузеров и т. д.). Как и библиотеки… …   Википедия

  • CSS Framework — это заранее подготовленная css библиотека, созданная для упрощения работы верстальщика, быстроты разработки и исключения максимально возможного числа ошибок вёрстки (проблемы совместимости различных версий браузеров и т.д.). Так же как и… …   Википедия

  • List of CSS frameworks — A list of CSS frameworks.Client side* [http://960.gs/ 960 Grid System] * [http://www.blueprintcss.org/ Blueprint] (for [http://ariejan.net/2007/08/27/blueprintcss rails generator/ Rails] ) * [http://code.google.com/p/css boilerplate/ Boilerplate] …   Wikipedia

  • Song Dynasty — This article is about the Northern and Southern Song Dynasties. For the Southern Dynasty, see Liu Song Dynasty. Song 宋 ← …   Wikipedia

  • Dynastie Song/Traduction à faire — Modèle:Otheruses Sommaire 1 0 2 Histoire de la dynastie Song 2.1 Les Song du Nord 2.2 Les Song du Sud …   Wikipédia en Français

  • Manhattan — New York Island redirects here. For the Pacific island, see Teraina. For other uses, see Manhattan (disambiguation). Manhattan   Borough of New York City   New York County …   Wikipedia

  • History of cartography — The Fra Mauro map, one of the greatest memorial of medieval cartography, was made around 1450 by the Venetian monk Fra Mauro. It is a circular world map drawn on parchment and set in a wooden frame, about two meters in diameter Cartography (from… …   Wikipedia

  • Chinese geography — See also: Geography of China The oldest surviving Chinese world map, Da Ming Hun Yi Tu Native Chinese geography begins in the Warring States period (5th century BC). It expands its scope beyond the Chinese homeland with the growth of the Chinese… …   Wikipedia

Compartir el artículo y extractos

Link directo
Do a right-click on the link above
and select “Copy Link”