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
[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

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

Enlaces externos

Content Disclaimer

Informasi ini disarikan dari Wikipedia dan disajikan kembali untuk tujuan edukasi. Konten tersedia di bawah lisensi CC BY-SA 3.0. Kami tidak bertanggung jawab atas ketidakakuratan data yang bersumber dari kontribusi publik tersebut.

  1. The information displayed on this website is sourced in part or in whole from Wikipedia and has been adapted for the purpose of restating it. We strive to provide accurate and relevant information, however:
  2. There is no guarantee of absolute accuracy. Wikipedia is an open, collaborative project that can be edited by anyone, so information is subject to change.
  3. It is not intended to constitute professional advice. The content displayed is for informational and educational purposes only. For important decisions (e.g., medical, legal, or financial), please consult a professional.
  4. Content copyright. Wikipedia is licensed under the Creative Commons Attribution-ShareAlike License (CC BY-SA). This means that content may be reused with appropriate attribution and shared under a similar license.
  5. Responsible use. Any risk arising from the use of information from this website is entirely the responsibility of the user.