Maquetación CSS con 960 Grid System

Explicaciones y ejemplos de uso del Framework CSS 960 Grid System, con el que veremos como maquetar una página con CSS paso a paso y de manera sencilla.

Si te parece útil este manual ayúdanos compartiendo!! :)

1.- Presentación de 960 Grid System

Introducción a la maquetación de páginas web usando CSS con el sistema 960 Grid.

2.- Primeras notas de uso de 960 Grid System

Primera demo de uso del framework CSS 960 Grid, para aprender lo más básico acerca de maquetar con CSS utilizando este sistema de rejilla.

3.- Clases definidas en el framework CSS 960 Grid System

Conociendo y explotando las distintas clases (class de CSS) disponibles para la maquetación CSS con 960 Grid System.

4.- Aplicación de clases CSS de 960 Grid System

Veremos un ejemplo de maquetación CSS utilizando las clases disponibles en 960 Grid System, para que nos sirva de práctica.

5.- Descargas de la plantilla Photoshop del manual Diseño desde cero

Diversos archivos para descarga que serán de utilidad para seguir el vídeo del diseño web desde cero con Photoshop y el manual de maquetación CSS 960 Grid System.

6.- Maquetación CSS con 960 Grid System, caso real

Desarrollo de la maquetación de una web con 960 Grid System, paso a paso y desde cero, a partir de una imagen diseñada con Photoshop. Con vídeotutorial.

7.- Maquetación CSS con 960 Grid System, Parte II

Continuamos mostrando un caso real de maquetación con CSS usando el framework CSS 960 Grid System.

8.- Maquetación CSS 960gs, fin del ejemplo

Terminamos de crear en XHTML y CSS la plantilla del diseño de ejemplo para mostrar el funcionamiento de 960 Grid System, con vídeo incluido para ilustrar el proceso.

9.- Traducción a porcentajes de 960.gs para Responsive Design

Archivos CSS del framework CSS 960 Grid System, pero traducidos a porcentajes, en lugar de medidas en píxeles, pensando en el "Responsive Web Design".

Descargas

Este manual puedes descargarlo en formato amigable para impresión y lectura en dispositivos a través de la App de DesarrolloWeb.com.

Compartir

Comentarios

cjlasluisa

10/6/2009
manual botones estilo
Es un manual muy claro, que permite al diseñador visualizar ampliamente el todo el codigo que puede encontrarse detras de un boton.

Gracias!!

Grafeno

19/6/2009
Manual
Gracias por compartir este Manual.

protofuck

24/6/2009
se agradece
muchas gracias por el manual, me sera de mucha utilidad.

Laura

06/8/2009
Evitar los div clear
Primero, muy bueno el manual, está bien explicado y desarrollado par conseguir empezar a trabajar y sacarle todo el partido al framework.
Personalmente, no me gusta tener codigo "sucio" en mis páginas y después de probar he visto que se puede evitar el uso de un clear para el salto de página con un simple añadido en css:

#fondo_cajas{
overflow: hidden;/* Evitamos el "Div="clear"" de la maquetación y mejoramos el código y la usabilidad*/
width: 75%;

Causa el mismo efecto y en páginas con muchas cajas evitamos errores de anidamiento. El width se puede ajustar a lo que deseamos se muestre, por si ponemos colores o imagenes de fondo. En mi caso es el contenedor del cuerpo principal, que debe ir centrado y por lo tanto con espacios "vacios" a derecha e izquierda.

Espero que os sirva.

akbert

15/10/2009
problemas con el grid_12
Hola buenas, el problema es el siguiente. si creo una fila que contiene este codigo:

<div id="animado" class="container_12">
<div id="l1" class="grid_4"><p>1</p></div>
<div id="l2" class="grid_8"><p>2</p></div>
<div class="clear"></div>
</div>

el problema es que el 2 aparece en la siguiente linea y no al lado del 1. alguien me puede decir porque? en teoria suma 960 pixels y no deberia saltar de linea.

gabrielbeaven

19/11/2009
problemas con transparencia de png en IE6
hola a todos el manual esta excelente muy claro y completo.
yo me encontre con el preoblema de querer visualizar la pagina con IE6 las imagenes transparentes salen de un color gris horrible( lo hice con este navegador porque es el que tiene las maquinas cuando le acabas de istalar el XP)
El Problema se Soluciono con un SCRIPT, La imagen ya era transparente pero el problema despues fue que ponia un espacio para 1 imagen que no entiendo de donde el IE6 saca esto.

Ivan Arango

17/12/2009
IE6 Gran Problema con la Transparencia & Padding para evitar colisión de Containers en 960
1. Para todos lo que tengan problemas con IE y desean resolver esto de la transparencia o capa gris. les recomiendo que googoleen estas palabras magicas:

"5 Easy Ways to Tackle IE6?s Transparency Issues": Encontrarán un video de Jeffrey Way, el famoso editor de Nettuts+. EN este video nos da 5 formas de evitar este incomo problema de IE.

2. Para los que tiene inconveniente con las grillas o rejillas de 960 y sienten que no les cuadra el asunto. les recomiendo googoleen:

"A Detailed Look at the 960 CSS Framework": Otro espectacular videotutorial que nos trae jeffrey Way, esta vez nos muestra la forma de crear nuestro "Template Folder" y como empezar a jugar con nuestro 960 Framework.

mabela

07/7/2010
960 grid y ventanas emergentes
hola!

gracias por el manual 960 grid! de verdad es muy facil trabajar con el. Ahora tengo una gran duda, pues ya le movi por mil lados, y no puedo:

como hacer una VENTANA MODAL (tipo light box) usando el grid960? lo he intentado de muchas maneras, y me lo saca de cualquier grid! si es que no se puede usar una ventana modal (co estilos .overlay .modal) saben de alguna otra manera de diseñar ventanas?

Gracias por su respuesta, de verdad ya busqué por varios sitios y no encuentro nada! y ya hice toda la web en 960grid, solo me faltan las ventanas y sería una pena tener que repetir la web en puro y duro css .....

Gracias de antemano, y gracias de nuevo por los tutoriales, geniales!

MarceloGracia

05/8/2010
Bug encontrado con IE8
Hola a todos. antes que nada, el manual y los videos, son excelentes... He estado aprendiendo mucho.
Traté de hacer una maquetación web. no la del curso, sino una propia y me he encontrado con que siguiente error en el IE8. Utilizando una página como Template en el DWCS5, si pongo los div class clear, no me los toma y por esa razón, me genera unos espacios entre las capas separadoras del class container...
Ahora si la misma página, la abro en IE8 sin que sea derivada desde un Template de DW, si me respeta el class div clear del framwork!

Quisiera saber si se puede resolver o existe alguna solición?. Muchas Gracias.

todonormal

25/2/2011
Maquetacion con 960grid
Excelente trabajo. Mi única sugerencia, es realizar el mismo ejemplo con http://www.dmxzone.com/go?18032 en dreamwever

Alberto

20/6/2011
Zen Ninesixty de Drupal
Hola, primero que todo quiero dar las gracias (y mi enahorabuena) por estos fantásticos manuales y videotutoriales. Me han sido muy muy útiles para dar los primeros pasos con el framework 960 grid.
Después de haber hecho mi primera web usando este sistema estoy aprendiendo Drupal, que tiene un theme para integrar el 960 grid, llamado Zen Ninesixty. Pero de momento no consigo que me funcione...

Sería una buena idea hacer un tutorial para migrar webs hechas en 960 grid a la plataforma Drupal.

Un saludo.

Cristian22

20/7/2011
Problema de Compativilidad de navegadores
Hola buena hice una web para mi empresa la cual le agregue un container_12 de 960 grid para poder centrar mi pagina web cuando lo vi en Google Chrome queda perfecto no tenia problema alguno con la web pero en internet explorer la web queda a la mitad y no se ve bien ustedes pueden ver mi web en www.disemaqchile.cl y hacer la prueba les agradeceria mucho si me puedes dar alguna solución o un tips para este problema, de antemano muchas gracias .

jperamas

19/1/2012
contribución
muy buenos articulos!. Quería contribuir, e desarrollado una extensión para google chrome para probar y medir maquetados con una grilla 960px, solo tiene que configurar tu grid :
https://chrome.google.com/webstore/detail/hgiogamnenmgeeaemjebknmlbleeedjl

mili_07

18/7/2012
¿Se puede usar 960 grid system en una página ya desarrollada?
Muy buenos los videotutoriales, el material y el manual, son de mucha ayuda y de gran utilidad! Mi pregunta es que si el framework se puede usar en una pagina desarrollada, tengo una página con marcos desarrollada, y queria saber si se le puede aplicar este frmaework sin necesidad de volver a comenzar a desarrollar desde 0 Desde ya muchas gracias...

herbert136

01/8/2012
No hay descargas
Y para descargar los materiales?, llevo una semana tratando de hacerlo y la descarga no se inicia..

jaime

08/8/2013
Se desalinea la pagina en cada navegador
Hola, estan muy buenos los tutoriales felicidades, tengo un problemita, he diseñado esta pagina www.takenoya.com.mx pero en los difetentes navegadores se de desalineado, me gustaría estandarizar la alineacion para los navegadores IE, Crome, fireworks y safari sin perder el carrusel de imagenes.


Gracias

Gerardo

04/9/2014
código empotrado
Muchas gracias, me ha sido de mucha ayuda. Sin embargo tengo un problema y no sé como resolverlo. Yo quiero usar este framework para una parte del sitio web para el que laboro, no puedo aplicarlo a todo el sitio pues es algo grande y se complica un poco. La parte donde lo ocupo está digamos que "empotrada" dentro del sitio maestro, con menú en la parte superior, otro menú a la izquierda y un footer; los cuales no los puedo modificar. Algo así:
<******************************>
<******************************>
<*****>
<*****>
<*****>
<*****>
<*****>
<******************************>

Lo que quiero modificar usando este framework está empotrado en la parte blanca. Si incluyo el <container_12> a mi html que está empotrado, la página se me alarga y desconfigura, supongo porque las otras secciones no están usando el framework. No se si me explico bien.
Hay alguna forma sencilla de poderlo hacer sin modificar las otras secciones?

fede

14/11/2014
link
esta caido el link!

Miguel Enriquez

23/2/2015
Ayuda con este Grid.
Hola amigo como esta, es excelente su tutorial.

http://postimg.org/image/priwvy6xz/

como podria yo hacer esto?

Nomas no me queda.

La columna anaranjada que es grid_3 me imagino que con un height la hago mas ancha, pero las otras columnas las grid_9 se me van abajo de esa....

El Footer queda siemrpe abajo de todo o se puede poner en una posicion estatica?

Gracias.
Le agradezco, saludos.