960 grid system, un framework para css – parte 2

01Feb10

Desde la página oficial del framework, http://960.gs/ , descargamos la última versión disponible. Una vez hecho lo anterior, la descomprimimos en la carpeta raiz de nuestro sitio.

Básicamente trabajaremos con clases.  Las clases en cuestión son:

  • container_yy : Donde “yy” puede ser 12 o 16, que son el número de columnas con las que trabajaremos.
  • grid_xx: Donde “xx” será el número de anchos de columnas que ocupará nuestro <div>.
  • prefix_xx: Esto se utilizará para mover “xx” columnas a la izquierda.
  • suffix_xx: Es muy parecido a prefix_xx, pero hacia la derecha.
  • alpha: Se usa para eliminar el margen de 10px en el lado izquierdo.
  • omega: Similar al aterior, pero para eliminar el margen derecho de 10px.

Para darnos una idea de como quedaría nuestro código, acá va un div con un ancho de 4 columnas y con 8 columnas de espacio antes del div.

<div class="grid_4 prefix_8" id="footer">
        <p>hola mundo</p>
</div><!--footer-->

En el próximo post, veremos una pequeña aplicación de lo anterior.

Anuncios


No Responses Yet to “960 grid system, un framework para css – parte 2”

  1. Dejar un comentario

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s


A %d blogueros les gusta esto: