Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS

Dominando el sistema de cuadrícula 960

by
Difficulty:BeginnerLength:LongLanguages:

Spanish (Español) translation by Steven (you can also view the original English article)

Ya estamos familiarizados con las variantes de 12 y 16 columnas de 960.gs, pero ¿sabías que también existe una alternativa de 24 columnas? En este artículo, dominarás el sistema de cuadrícula 960 mediante la disección de la versión demo de 24 columnas. Si solo has usado 960gs antes para las maquetas de Photoshop, considera que es tu día de suerte. Al final de este artículo, podrás convertir tus diseños a HTML y CSS en poco tiempo.


Introducción

Un maestro en cuadrícula 960: eso es lo que serás después de haber leído este artículo. Y, aunque vamos a utilizar la variante de 24 columnas de 960gs, también entenderás cómo funcionan los dos tipos más antiguos (es decir, 12 y 16 columnas), aplicando los mismos principios que aprenderás aquí. Pero primero, echa un vistazo a la demo de 24 columnas en el sitio de 960gs, ya que es todo lo que necesitaremos en nuestro salto hacia el dominio de este popular framework CSS.


Un vistazo a la demostración de 24 columnas

Primero debemos verificar el código HTML de la demostración, así que ve a su fuente: si estás usando Chrome, Firefox u Opera, simplemente presiona ctrl + U; si estás utilizando Internet Explorer, ¡cambia tu navegador! :) (en Mac, usa cmd + U para Firefox y opt + cmd + U para Safari y Opera; en Chrome solo haz clic con el botón derecho). Mantén la ventana del código fuente HTML en tu escritorio, ya que nos referiremos a ella cada cierto tiempo.

A continuación, deberás descargar el archivo 960.gs (si aún no lo has hecho) y abrir el archivo CSS sin comprimir 960_24_col.css. Debemos hacer esto porque el CSS de la demo está comprimido y será difícil de inspeccionar. (Si eres del tipo masoquista, puedes utilizar el CSS de la demo en su lugar.

Eso es casi todo lo que necesitamos preparar, aparte de un cerebro semi-funcional. Ahora encontrarás que la página de la demo es la clave para comprender completamente el sistema de cuadrícula, y comenzaremos examinando sus tres secciones.


Inspeccionando el Framework: las tres secciones de la demo

Las tres secciones constan de lo siguiente:

1: Sección superior

Primero, tenemos un área superior que muestra dos columnas para cada fila, donde la columna de la izquierda se ensancha a medida que la columna de la derecha se estrecha, hasta que tienen el mismo tamaño.

top section of the 24-column 960 demo

2: Sección media

A continuación, tenemos una sección media o central que muestra un cuadrado de 30px moviéndose progresivamente de izquierda a derecha, mientras que el espacio en blanco antes y después extiende la fila para ocupar todo el ancho de 960px.

mid-section of the 24-column 960 demo

3: Sección inferior

Finalmente, hay una sección inferior que muestra dos filas de rectángulos con diferentes tamaños, que dividen el ancho de 960px en dos mitades.

bottom section of the 24-column 960 demo

Lo creas o no, entender por completo lo que hacen las clases asignadas detrás de estas columnas es todo lo que necesitas para tener una comprensión firme del sistema de cuadrícula 960. ¿No es genial? Examinemos cada sección más adelante.


Sección superior: Clases grid_1 a grid_24

Echar un vistazo al código fuente de esta sección nos muestra que, primero, antes de que se asignara cualquiera de las clases grid_xx, la clase container_24 se asignó a la división de ajuste general:

La importancia de esta clase no se puede exagerar, ya que determina en parte el ancho de las columnas donde se asigna una clase grid_xx. Y como habrás adivinado, también "divide" el ancho de 960px en 24 columnas.

(De manera similar, colocar container_12 o container_16 en la parte superior “dividirá” el ancho en 12 y 16 columnas, respectivamente. La división de palabras está entre comillas porque en realidad no lo hace; más adelante veremos cómo se logra este proceso.)

Continuando, notarás que la fila superior tiene un solo div con una clase de grid_24. Las filas restantes en la sección superior tienen dos divs cada una: los divs de la izquierda van desde la clase grid_1 hasta grid_12, y los divs de la derecha van desde grid_23 hasta grid_12; la suma de las dos clases en cada fila es 24.

Así es como se verían las clases grid_xx asignadas si intentamos visualizar el nombre de clase de cada div:

top section of the 24-column 960 demo with grid classes labeled

Es posible que hayas notado en el código que después del último div en una fila, tenemos un div vacío con una clase clear. Ignóralo por ahora, lo trataremos más tarde.

A continuación, echemos un vistazo a lo que sucede detrás de escenas, es decir, en el CSS, cuando asignamos la clase container_24:

Como puedes ver, esta clase, que se asignó al DIV del 'wrapping' general del documento, centra nuestra área de trabajo y le da un ancho de 960px. Suficientemente fácil.

A continuación, aquí están las clases grid_xx, que se colocaron en los divs principales de la sección superior:

Vemos que las clases grid_xx dan a las columnas márgenes izquierdo y derecho de 5px cada una, que forman un margen de 10px cuando se colocan las columnas una al lado de la otra. Esto, a su vez, se logra flotando todos hacia la izquierda.

Además, se les da un display de tipo inline, para evitar que el Error de Flotador de Doble Margen se active en nuestro querido navegador. (Aparentemente, se activa cuando flotas un elemento que tiene márgenes asignados).

top section: what the CSS does

Por último, tenemos los selectores descendientes formados por una combinación de clases container_24 y grid_xx:

Como puedes ver, estas declaraciones de CSS son las que realmente determinan el ancho de las columnas donde se asigna una clase grid_xx. Así es como la asignación de container_24 en la parte superior "divide" el ancho en 24 columnas: los tamaños de ancho preestablecidos se asignan según la clase de container_xx con la que se combina una clase grid_xx.

the container and grid classes in 24-col combined sets the width of the columns

Para propósitos de comparación, aquí está cómo se ven sus declaraciones de CSS de contraparte en la variante de 16 columnas:

the container and grid classes in 16-col combined sets the width of the columns

Si comparas el código fuente HTML de la demo para las 12 y 16 columnas con la demo de 24 columnas, notarás que no hay diferencia en cómo se asignaron las clases grid_xx. Y ahora sabes por qué esto es así: no es la clase grid_xx la que determina el ancho de las columnas, sino su combinación con una clase container_xx, como se muestra en el CSS anterior.

Otra cosa que vale la pena mencionar aquí es el tamaño real de cada contenedor cuando asignas una clase grid_xx. Aunque está etiquetado como 30, 70, 110, y así sucesivamente en la demostración, en realidad es 10px más debido a los márgenes izquierdo y derecho a cada lado del contenedor.

actual size of the containers is 10px more than its label

Como puedes ver,

  • grid_1 tiene un ancho de 30px + 10px márgenes horizontales (ancho total: 40px)
  • grid_2 tiene un ancho de grid_1 (40px) + 30px ancho + 10px márgenes (ancho total: 80px)
  • grid_24 tiene un ancho de grid_23 (920px) + 30px ancho + 10px márgenes (ancho total: 960px)

Verlo de esta manera satisface los cálculos que tenemos para el ancho: que 24 columnas de 40px de ancho es igual a 960px (es decir, 40px * 24 = 960px).

Esta vista muestra con mayor precisión lo que el CSS realmente hace al marcado. Aunque el tamaño del contenedor es realmente de 30px, 70px, 110px, etc. (como está etiquetado en la demostración), es útil saber que los márgenes horizontales son la razón por la cual la suma de los anchos de cada fila no es igual a 960px. (Solo equivale a 940px, a excepción de la primera fila, asignada a un grid_24, que abarca 950px. El "perdido" 20px para todos los demás divs se explica por los márgenes de 5px más a la izquierda y más a la derecha, y el margen de 10px entre las 2 columnas por cada fila.)

Pero esto es lo más práctico que debes recordar: siempre que uses la plantilla PSD de 24 columnas cuando crees tus diseños (o las plantillas PSD de 12 o 16 columnas), puedes contar el número de columnas que deseas para un elemento de diseño en particular, usa ese número para tu clase grid_xx y la columna está establecida. Por ejemplo, si tu logotipo ocupa cuatro columnas, entonces asigna a tu div que contenga una clase grid_4.

Aquí hay un ejemplo de cómo usarlo:

example application of grid_xx classes

Aunque el sitio 960.gs (que se muestra arriba) en realidad usa la variante de 12 columnas, también podríamos superponer el patrón de 24 columnas y aún se ajustará perfectamente al diseño (porque la versión de 24 columnas es, por supuesto , solo la versión de 12 columnas con columnas divididas por dos).

Como puedes ver, saber que tenemos un ancho de 960px dividido en 24 columnas hace la vida más fácil, ya que solo necesitamos alinear nuestros elementos de diseño a lo largo de los bordes de las columnas, contar el número de columnas que ocupan, establecer eso como nuestro grid_xx número de clases, y hemos terminado.

¿Pero qué pasa si quieres muchos espacios vacíos en tu diseño? O, ¿qué sucede si deseas centrar un elemento de diseño pequeño y simplemente tener espacios en blanco a su alrededor?

Introduce las clases prefix_xx y suffix_xx.


Sección media: Clases prefix_xx y suffix_xx

Si verificas el marcado de la sección central, verás las variaciones de este código:

...donde prefix_xx + suffix_xx = 23. (Es decir, 0 + 23, 1 + 22, 2 + 21, 3 + 20, y así sucesivamente ..)

¿Que esta pasando aqui?

Primero, notarás que las asignaciones de cada clase de fila suman 24 columnas (grid_1 + valores combinados de las clases prefix_xx y suffix_xx, que es 23).

A continuación, verás que las clases prefix_xx están en orden ascendente (de 1 a 23), mientras que las clases suffix_xx están descendiendo (de 23 a 1). Además, cuando prefix_xx o suffix_xx tiene un valor de 23, no tiene una clase contraparte suffix_xx o prefix_xx, porque ya no lo necesita (el valor ya es 23).

Finalmente, cada una de estas unidades tiene un ancho de 30px, y como hemos visto en las clases grid_xx anteriores, también tienen márgenes horizontales de 10 px.

classes added for the 30px boxes

Ya sabemos que al asignar un elemento a una clase grid_1 le da un ancho de 30px y un relleno de 5px en cada lado. Pero, ¿qué hacen las clases prefix_xx y suffix_xx?

Como ya habrás adivinado, le dan un relleno adicional a la izquierda (prefix_xx) y a la derecha (suffix_xx), lo que aumenta el tamaño de una unidad de clase grid_xx. Por lo tanto, prefix_1, prefix_2 y prefix_3 le darán a tu elemento rellenos a la izquierda de 40px, 80px y 120px, respectivamente; mientras que se da la misma cantidad de rellenos a sus contrapartes sufijo_xx, pero en el lado opuesto.

Para espacios en blanco en tus diseños, solo agrega las clases prefix_xx y suffix_xx. Bloquean tu contenido a un cierto ancho (determinado por la clase grid_xx que asignas), mientras que el espacio de cada lado se rellena con el padding.

additional horizontal paddings in grid_xx units

Para un ejemplo simple, simulemos nuevamente que la página de inicio de 960.gs está usando la variante de 24 columnas, y que el gráfico de twitter-bird es el logotipo del sitio.

suffix class in use: 960 gs homepage

Podemos ver que ocupa tres columnas, por lo que le damos una clase grid_3. Supongamos también que no hay otros elementos a lo largo de su fila. Por lo tanto, también le daríamos una clase suffix_21 (3 + 21 = 24), ya que el relleno adicional debe abarcar todo el ancho.

Obviamente, si hay otros elementos en esa fila, debemos ajustar la clase suffix_xx para crear un espacio para otro elemento que abarque algunas clases grid_xx (por ejemplo, un formulario de búsqueda). Además, dependiendo de la ubicación de los elementos de diseño en relación con el borde izquierdo de la fila, es posible que también debas agregar una clase prefix_xx.

Recuerda siempre: los números utilizados en las clases para cada fila (ya sea cuadrícula, prefijo o sufijo) deben ser iguales a 24.

A continuación, realizaremos un poco de "magia", ya que el siguiente conjunto de clases permite que su contenido aparezca de forma diferente a lo que el marcado predice.


Sección inferior: Clases pull_xx y push_xx

Para esta sección, si no estás usando Firefox en este momento, me gustaría pedirte que lo cambies temporalmente, ya que entenderás mejor los siguientes conceptos con la extensión de la Barra de herramientas de desarrollo web (WDT) de Chris Pederick para Firefox. (Si aún no lo has instalado, este es el momento de descargarlo e instalarlo. Entiendo que ya existe una versión de Google Chrome del WDT, pero en mi opinión, no está cerca de su contraparte de Firefox).

Una vez que estés ejecutando Firefox con el WDT ya instalado, regresa a la página de la demo de 24 columnas y desplázate hacia abajo hasta la parte inferior. Verás los dos grupos de cuadros que te mostré hace un tiempo: de diferente tamaño, pero que se unen para formar esta última sección de la demostración.

Ahora revisa el código HTML para esta sección:

Compáralo de nuevo con lo que ves en la página de demostración.

¿Que esta pasando aqui? ¿No debería mostrarse el primer grupo de cuadros (230-230-30-430) antes del último grupo (30-430-230-230), como en el marcado?

Bueno, ese es el poder de las clases push_xx y pull_xx. Pero antes de entrar en ellos, ve a WDT, haz clic en el botón Información y elige Mostrar orden de división, solo para asegurarte de que estás viendo correctamente cómo afecta el CSS al marcado.

web developer toolbar's display div order command chosen

Aquí hay una captura de pantalla de lo que deberías ver:

bottom section with display div order command activated

Necesitaba mostrar esto para demostrar que los dos grupos están divididos en lados izquierdo y derecho, y no arriba y abajo. Ese error de percepción es fácil de hacer (como lo hice) porque: (1) estamos acostumbrados a ver grupos div que estiran todo el ancho de 960px; y (2) los dos grupos tienen cajas de tamaño similar que son fáciles de confundir entre sí.

(Nathan Smith, el creador de 960gs, probablemente podría haber usado cajas con diferentes tamaños, por ejemplo, 70-390-190-270 y 230-230-30-430) para lograr el mismo efecto y habría evitado la posible confusión, pero no lo hizo...)

Pero ahora que has visto cómo el primer grupo (como aparece en el marcado) fue "empujado" y cómo el segundo grupo fue "tirado" por estas clases, revisa el CSS para ver cómo lo están haciendo:

Primero, al asignar estas dos clases a los elementos HTML, estos elementos se ubican relativamente, de modo que podamos mover los divs a la izquierda, a la derecha, a la parte superior o inferior en relación con el lugar donde normalmente se produciría en el documento. (Más sobre posicionamiento CSS aquí.)

A continuación, en combinación con la clase container_24, las clases pull_xx dan al div un relleno negativo hacia la izquierda, lo que hace posible "arrastrar" el contenido del div hacia la izquierda. Por otro lado, las clases push_xx, como se esperaba, hacen lo contrario y le dan al div un relleno (positivo) en la izquierdo para "empujar" su contenido hacia la derecha (dando paso al relleno izquierdo).

bottom section with display div order command activated

"¿Pero por qué la molestia?", Podrías preguntar. "¿Por qué no solo ponerlos en el orden correcto en el marcado en primer lugar, para que no tenga que usar estas clases innecesarias?"

Buena pregunta. La respuesta radica en la búsqueda de tener un marcado semántico y accesible: nuestros diseños no deben forzar el marcado a una estructura que no tenga sentido o que no esté a la altura de los estándares cuando los estilos están desactivados. Y se ha comprobado que CSS maneja estas situaciones con elegancia, nos permite lograr el aspecto de nuestros diseños, independientemente de cómo se haya escrito el marcado (bueno, en gran medida).

En el sitio de 960gs, Nathan Smith muestra el encabezado como un buen ejemplo de cómo usó estas clases:

960.gs header

En la superficie, podríamos pensar que el marcado mostrará primero el logotipo de Twitter, luego el enlace de descarga y, finalmente, el logotipo 960. Pero eso no sería semántico: el título del sitio (es decir, el logotipo 960) debería aparecer primero. Y como probablemente sepas, este arreglo también tiene beneficios de SEO. Entonces, el marcado para el encabezado en realidad es algo así como:

Como puedes ver, el logotipo viene primero, y luego, el enlace de descarga. (El marcado para el logotipo de Twitter se encuentra después del pie de página, se le dio un ID de twitter y está en una posición absoluta. No se le dio una clase de 960.gs, por lo que no nos preocuparemos por ello).

También viste en el marcado (como se predijo) que se empujó el logotipo y se eliminó la sección del enlace de descarga. Para visualizarlo más claramente:

960.gs header labeled with classes

Y así es como se usan las clases push o pull: debes saber que le dan a tus divs un relleno negativo o positivo a la izquierda, luego "pull" o "push" a tu contenido de acuerdo con la cantidad de columnas que necesitas para tu contenido. .

Hay un último conjunto de clases que son integrales a 960.gs, y te permiten crear diseños complejos. Una columna que abarca varias filas, por ejemplo. Vamos a abordarlos a continuación.


Clases alfa y omega

Si has leído tutoriales o artículos en 960.gs anteriormente, probablemente ya sepas que las clases alfa y omega cancelan los rellenos horizontales establecidos por las clases grid_xx. Y lo más probable es que también sepas que su uso principal se encuentra cuando tienes clases grid_xx dentro de divs anidados.

Para el beneficio de aquellos que aún no lo saben, vayamos a nuestro CSS y veamos qué hacen estas clases con los elementos a los que están asignados:

Bastante sencillos: simplemente ponen a cero los márgenes izquierdo (alfa) y derecho (omega). Y como hemos visto hace un tiempo, cuando asignamos a un elemento una clase grid_xx, automáticamente le damos márgenes horizontales de 5px en ambos lados. Con divs anidados, no queremos duplicar estos márgenes, por lo que asignamos una clase alfa o omega, o ambas, según corresponda.

bottom section div group showing alpha and omega classes

Un div anidado que esté tocando el borde izquierdo de su div padre recibiría la clase alfa. De manera similar, la clase omega se asigna al div anidado que se coloca en el borde derecho del div principal. Pero, ¿qué pasa si tenemos un div anidado que toca ambos bordes de su div principal? Así es, le asignamos ambas clases.

Veamos un ejemplo para que puedas ver cómo se hace.

Aunque no se muestra en la demostración de 960.gs, aquí hay una instancia de cómo se logra un diseño complejo con la ayuda de las clases alfa y omega (y divs anidados con clases grid_xx):

blocks of content to demonstrate alpha & omega and nested divs

Aquí tenemos columnas que abarcan varias filas en ambos lados, con filas y cuadros en el medio. También puedes visualizarlo como un diseño típico de 3 columnas; pero para nuestro ejemplo, solo estamos usando 15 columnas. Por supuesto, puedes expandirlo fácilmente a 24 columnas.

La clave para crear diseños como estos en 960.gs es:

  1. Recuerda que 960.gs hace que el diseño sea posible mediante divs flotantes a la izquierda.
  2. Crea tus divs anidados a partir de esos divs iniciales flotados—. Esto significa que habrás flotado divs dentro de divs flotados.

Esta es una forma de abordar nuestro diseño: agrúpalas primero en tres columnas y asigna las clases grid_xx apropiadas:

blocks of content to demonstrate alpha & omega and nested divs

A continuación, asigna las clases grid_xx adicionales para los divs anidados (ten en cuenta que no tenemos ningún div anidado para la columna derecha):

blocks of content to demonstrate alpha & omega and nested divs

Como tenemos al menos dos niveles de clases grid_xx dentro de divs anidados, también necesitamos agregar las clases alfa y omega de manera apropiada:

blocks of content to demonstrate alpha & omega and nested divs

Los div anidados dentro de la columna izquierda tocan ambos bordes de su div principal, por lo que necesitamos agregar alfa y omega. Lo mismo se aplica a los divs con grid_8 en la sección central. Pero cada grid_4 div en la parte superior solo debe tener alfa u omega, ya que solo toca el borde izquierdo o derecho de su div principal.

Como puedes haber llegado a la conclusión de este sencillo ejemplo, puedes anidar divs con clases grid_xx tan profundas como desees (si tu diseño lo exige), siempre que las marques correctamente y le des las clases correctas de 960.gs, para que se floten correctamente y se cancelen los márgenes sobrantes.

Y hablando de flotantes, el último grupo de clases de 960.gs, aunque no es exclusivo de 960.gs, lo hace todo posible: Borran los flotantes que se crean automáticamente cuando asignas una clase grid_xx.


Nivelando el campo: Las clases clear

Anteriormente, notamos esto en el marcado: a cada div que se le dio una clase grid_xx, que también fue el último div para su fila, fue seguido por un div vacío con una clase de claro.

La razón obvia para esto es que necesitamos despejar los divs flotantes, porque una vez que los flotamos, ya no ocupan espacio, lo que hace que los elementos que se encuentran debajo se "levanten", lo que finalmente lleva a un diseño roto.

Como hemos visto en la demostración, una solución para este problema potencial es colocar una división extra no semántica con una clase clear, que haga lo siguiente:

El código anterior es básicamente la propia solución de Nathan Smith al problema, como se explica en su blog. Muchos de los diseñadores web no tienen ningún problema con eso, excepto probablemente por los standardistas que podrían temblar ante la idea de usar divs extra no semánticos en el marcado para un problema de estilo.

Afortunadamente, Nathan Smith también incluyó la solución Clearfix en el CSS 960.gs, que se discutió por primera vez en PositionIsEverything.net. Elimina el div adicional, ya que puedes colocarlo junto a las clases grid_xx y lograr el mismo efecto:

Ese es el mismo ejemplo de marcado anterior con los divs adicionales eliminados y la clase clearfix agregada. Hará lo mismo, por lo que puedes elegir este método de eliminación si lo encuentras a tu gusto. Aquí está el CSS para ello:

El código puede ser un poco diferente de lo que estás acostumbrado. Esto se debe a que Nathan Smith lo basó en una entrada de blog de Jeff Star, que supuestamente actualiza el hack de clearfix original, para eliminar el código destinado a un navegador que ahora está extinto (es decir, IE para macs), y lo ajusta para los más nuevos (es decir, IE6 y IE7).


Conclusión

Usando solo la demostración de 24 columnas de 960.gs (y en algunos casos, el sitio 960.gs en sí), te mostré cómo funcionan cada una de tus clases y cómo podrías usarlas para convertir tus diseños basados en 960 en HTML y CSS.

Cada sección de la demostración imparte lecciones para aprender, y una vez que veas lo que las clases hacen con tu marcado al examinar el CSS, el misterio de 960.gs desaparece, y obtienes una mejor comprensión de lo que sucede detrás de escena. Incluso podrías encontrar nuevas formas de usar las clases, ya que ahora sabes lo que hacen.

Aplicar tu nuevo conocimiento se vuelve fácil, porque una vez que hayas configurado tus columnas con 960.gs, solo tendrás que asignar los identificadores a los divs (según lo justifique la situación) como ganchos para ajustar aún más los rellenos de los divs o los tamaños de su texto en el interior.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.