Share
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 un instante..
A 960 Grid System Master-eso es lo que serás después de haber revisado este artículo. Y, aunque vamos a utilizar la variante de 24 columnas de 960 g, también entenderá cómo funcionan los dos tipos más antiguos (es decir, 12 y 16 columnas), aplicando los mismos principios que aprenderá aquí. . Pero primero, eche un vistazo a la demostración de 24 columnas en el sitio de 960gs, ya que es todo lo que necesitaremos en nuestro salto hacia el dominio de este popular marco CSS.
Primero debemos verificar el código HTML de la demostración, así que vea su fuente. Si está usando Chrome, Firefox u Opera, solo presione Ctrl + U; Si está utilizando Internet Explorer, cambie su navegador! :) (en la Mac, use cmd + U para Firefox y opt + cmd + U para Safari y Opera; Chrome sólo hace la opción de clic derecho). Mantenga la ventana del código fuente HTML en su escritorio, ya que lo consultaremos de vez en cuando.
A continuación, deberá descargar los archivos 960.gs (si aún no lo ha hecho) y abrir el archivo CSS sin comprimir. 960_24_col.css. Debemos hacer esto porque el CSS de la demostración está comprimido y será difícil de inspeccionar. (Si eres del tipo masoquista, siéntete libre de usar el CSS de la demostración en su lugar.
Eso es casi todo lo que necesitamos preparar, aparte de un cerebro semi-funcional. Ahora encontrará que la página de demostración es la clave para comprender completamente el sistema de cuadrícula, y comenzaremos examinando sus tres secciones.
Las tres secciones constan de lo siguiente:
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.
A continuación, tenemos una sección 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.
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.
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 un conocimiento firme del sistema de cuadrícula 960. ¿No es genial? Examinemos cada sección más adelante..
Accentsconagua
grid_1 a cuadrícula_24 clasesMirar el código fuente de esta sección nos muestra que, primero, antes de cualquiera de los grid_xx las clases fueron asignadas, la clase container_24 fue dado a la división de envoltura general:
Cuadrícula de 24 columnas
...
La importancia de esta clase no se puede exagerar, en parte dicta el ancho de las columnas donde se grid_xx la clase esta asignada Y como habrás adivinado, también "divide" el ancho de 960px en 24 columnas.
(Del mismo modo, poniendo container_12 o container_16 en la parte superior se "divide" el ancho en 12 y 16 columnas, respectivamente. La palabra dividir está entre comillas porque en realidad no hace eso; Verás más adelante cómo se logra este proceso.
Continuando, notará que la fila más alta tiene un solo div con una clase de cuadrícula_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 correctos van desde cuadrícula_23 Abajo a grid_12; La suma de las dos clases en cada fila es 24..
950
30
910
70
430
510
470
470
Así es como el asignado. grid_xx las clases se verían como si intentáramos visualizar el nombre de clase de cada div:
Es posible que haya notado en el código que después del último div en una fila, tenemos un div vacío con una clase de claro. Ignóralo por ahora, lo trataremos más tarde..
A continuación, echemos un vistazo a lo que sucede detrás de escena, es decir, en el CSS, cuando asignamos el container_24 clase:
.container_24 margen izquierdo: auto; margen derecho: auto; ancho: 960px;
Como puede ver, esta clase, que se asignó a la división de envoltura general del documento, centra nuestra área de trabajo y le da un ancho de 960px. Suficientemente fácil.
A continuación, aquí están los grid_xx Clases, que fueron colocadas en los divs principales de la sección superior:
.grid_1, .grid_2, .grid_3,… grid_23, .grid_24 display: inline; flotador izquierdo; margen izquierdo: 5px; margen derecho: 5px;
Vemos que el grid_xx las clases 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 flotándolos todos a la izquierda.
Además, se les da una monitor de en línea, para evitar que el error de flotación de doble margen se active en nuestro querido navegador. (Aparentemente, se activa cuando flotas un elemento que tiene márgenes asignados).
Por último, tenemos los selectores descendientes formados por una combinación de container_24 y grid_xx clases:
.container_24 .grid_1 ancho: 30px; .container_24 .grid_2 ancho: 70px; … Container_24 .grid_23 ancho: 910px; .container_24 .grid_24 ancho: 950px;
Como puede ver, estas declaraciones de CSS son las que realmente determinan el ancho de las columnas en las que grid_xx la clase esta asignada Así es como se asigna. container_24 en la parte superior "divide" el ancho en 24 columnas, los tamaños de ancho preestablecidos se asignan de acuerdo a lo que container_xx clase A grid_xx la clase se combina con.
Para propósitos de comparación, aquí está cómo se ven sus declaraciones de CSS de contraparte en la variante de 16 columnas:
.container_16 .grid_1 ancho: 40px; .container_16 .grid_2 ancho: 100px; .container_16 .grid_3 ancho: 160 px;
Si compara el código fuente HTML de la demostración para las columnas de 12 y 16 con la demostración de 24 columnas, notará que no hay diferencia en cómo grid_xx Las clases fueron asignadas. Y ahora sabes por qué esto es así, no es el grid_xx clase que determina el ancho de las columnas, pero su combinación con un container_xx clase, como se muestra en el CSS anterior.
Otra cosa que vale la pena mencionar aquí es el tamaño real de cada contenedor cuando asigna un grid_xx clase. Aunque esta etiquetado 30, 70, 110, Y así en la demo, es en realidad 10px más Debido a los márgenes izquierdo y derecho a cada lado del contenedor.
Como puedes ver,
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 justo 30px, 70px, 110px, y así sucesivamente (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 para cada fila no es igual a 960px. (Solo equivale a 940 px, excepto en la primera fila, asignada una cuadrícula_24, que se extiende por 950px. El 20px "perdido" 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 para cada fila.)
Pero Aquí está la cosa más práctica para recordar: Siempre que use la plantilla psd de 24 columnas cuando cree sus diseños (o las plantillas psd de 12 o 16 columnas, si lo desea), puede solo cuente el número de columnas que desea para un elemento de diseño en particular, use ese número para su grid_xx clase, y la columna se establece. Por ejemplo, si su logotipo ocupa cuatro columnas, asigne a su div conteniendo cuadrícula_4 clase.
Aquí hay un ejemplo de cómo usarlo:
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 puede 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, cuente el número de columnas que ocupan, establezca eso como nuestro grid_xx número de clase, y hemos terminado.
¿Pero qué pasa si quieres muchos espacios vacíos en tu diseño? O bien, si quiere centrar un elemento de diseño pequeño y tener espacios en blanco a su alrededor?
Introducir el prefijo_xx y sufijo_xx clases.
prefijo_xx y sufijo_xx clasesSi verifica el marcado de la sección central, verá las variaciones de este código:
30
… dónde prefijo_xx + sufijo_xx = 23. (Es decir, 0 + 23, 1 + 22, 2 + 21, 3 + 20, etc.)
Que esta pasando aqui?
Primero, notará que las asignaciones de cada clase de fila ascienden a 24 columnas (grid_1 + valores combinados de prefijo_xx y sufijo_xx clases, que es 23).
A continuación, verás que el prefijo_xx las clases son en orden ascendente (del 1 al 23) mientras que sufijo_xx Las clases son descendientes (de 23 a 1). Además, cuando prefijo_xx o sufijo_xx Tiene un valor de 23, no tiene contraparte. sufijo_xx o prefijo_xx clase, porque ya no lo necesita (el valor ya es 23).
Por último, cada una de estas unidades es de 30 px de ancho, y como hemos visto en el grid_xx Las clases anteriores, también tienen márgenes horizontales de 10px..
Ya sabemos que asignando un elemento a grid_1 La clase le da un ancho de 30px y acolchados de 5px en cada lado. Pero que hace el prefijo_xx y sufijo_xx las clases hacen?
Como ya habrás adivinado, dan izquierda adicional (prefijo_xx) y derecha (sufijo_xx) relleno, aumentando el tamaño de un grid_xx unidad de clase. Así, prefijo_1, prefijo_2, y prefijo_3 le dará a su elemento rellenos izquierdos 40px, 80px, y 120px, respectivamente; mientras que la misma cantidad de rellenos se dan a su sufijo_xx Contrapartes, pero en el lado opuesto..
.container_24 .prefix_1 padding-left: 40px; .container_24 .prefix_2 padding-left: 80px; … Container_24 .suffix_1 padding-right: 40px; .container_24 .suffix_2 padding-right: 80px;
Para espacios en blanco en sus diseños, simplemente agregue el prefijo_xx y sufijo_xx clases Bloquean su contenido a un cierto ancho (determinado por el grid_xx clase que asigne), mientras que el espacio de cada lado se rellena con relleno.
Para un ejemplo simple, simulemos una vez más 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.
Podemos ver que ocupa tres columnas, por lo que le damos una cuadrícula_3 clase. Supongamos también que no hay otros elementos a lo largo de su fila. Por lo tanto, también le daríamos una sufijo_21 clase (3 + 21 = 24), ya que el relleno adicional debe abarcar todo el ancho.
Obviamente, si hay otros elementos en esa fila, necesitamos ajustar la sufijo_xx clase para crear algo de espacio para otro elemento que abarca algunos grid_xx clases (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 deba agregar un prefijo_xx clase.
Recuerde siempre: los números utilizados en las clases para cada fila (ya sea cuadrícula, prefijo, o sufijo) debiera ser igual a 24.
A continuación, realizaremos un poco de 'magia', ya que el siguiente conjunto de clases permite que su contenido se vea diferente a lo que el marcado predice que lo haría..
pull_xx y Para esta sección, si no está usando Firefox en este momento, me gustaría pedirle que lo cambie temporalmente, ya que entenderá 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é ejecutando Firefox con el WDT ya instalado, regrese a la página de demostración de 24 columnas y desplácese hacia abajo hasta la parte inferior. Verás los dos grupos de cajas 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:
230
230
30
430
30
430
230
230
Compáralo de nuevo con lo que ves en la página de demostración..
¿Que esta pasando aqui? ¿No debería el primer grupo de cajas (230-230-30-430) aparecer antes del último grupo (30-430-230-230), como en el marcado?
Bueno, ese es el poder de la push_xx y pull_xx clases Pero antes de entrar en ellos, vaya a la WDT, haga clic en el Información botón y elija Display Div Order, Solo para asegurarse de que está viendo correctamente cómo afecta el CSS al marcado..
Aquí hay una captura de pantalla de lo que deberías ver:
Necesitaba mostrar esto para demostrar que los dos grupos se dividen en izquierda y Correcto Laterales, y no superior e inferior. 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:
.push_1, .pull_1, .push_2, .pull_2,… push_22, .pull_22, .push_23, .pull_23 posición: relativo; … Container_24 .push_1 izquierda: 40px; .container_24 .push_2 izquierda: 80px; … Container_24 .push_22 izquierda: 880px; .container_24 .push_23 izquierda: 920px; … Container_24 .pull_1 left: -40px; .container_24 .pull_2 izquierda: -80px; … Container_24 .pull_22 left: -880px; .container_24 .pull_23 izquierda: -920px;
Primero, al dar estas dos clases a los elementos HTML, se colocan esos elementos relativamente, de modo que podamos mover los divs a la izquierda, Correcto, parte superior, o fondo en relación a donde normalmente ocurriría en el documento. (Más sobre posicionamiento CSS aquí.)
A continuación, en combinación con el container_24 clase, la pull_xx las clases dan el div a negativo Relleno izquierdo, que permite "tirar" el contenido del div hacia la izquierda. Por otro lado, la push_xx Las clases, como se esperaba, hacen lo opuesto y le dan al div a (positivo) el relleno izquierdo para "empujar" su contenido hacia la derecha (dando paso al relleno izquierdo).
"Pero, ¿por qué la molestia?", Podría 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 parte).
En el sitio de 960gs, Nathan Smith muestra el encabezado como un buen ejemplo de cómo usó estas clases:
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 usted probablemente sepa, este arreglo también tiene beneficios de SEO. Por lo tanto, el marcado para el encabezado en realidad es algo así como:
Sistema de rejilla 960
Descargar - Plantillas: Acorn Fireworks, Flash,…
Como puede ver, el logotipo viene primero, y luego, el enlace de descarga. (El marcado para el logo de Twitter se encuentra después del pie de página, se le dio una identificación de gorjeo, y está absolutamente posicionado. No se le dio una clase de 960.gs, por lo que no nos preocuparemos por eso.)
También vio 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:
Y así es como usas el empujar o Halar clases: sepa que le dan a sus divs un relleno negativo o positivo a la izquierda, luego "arrastre" o "empuje" su contenido de acuerdo con el número de columnas que necesita para que su contenido sea extraído o empujado.
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.
alfayomegaLas clasesSi ha leído tutoriales o artículos en 960.gs anteriormente, probablemente ya sepa que alfa y omega Las clases cancelan los rellenos horizontales establecidos por grid_xx clases Y lo más probable es que también sepas que su uso principal es cuando tienes grid_xx clases 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:
.alfa margen izquierdo: 0; .omega margen derecho: 0;Bastantes sencillos: simplemente ponen a cero la izquierda (alfa) y derecha (omega) márgenes. Y como hemos visto hace un tiempo, cuando asignamos un elemento a grid_xx Clase, automáticamente le damos márgenes horizontales de 5px en ambos lados. Con divs anidados, no queremos duplicar estos márgenes, por lo que damos una alfa o un omega clase, o ambos, en consecuencia.
A un div anidado que toca el borde izquierdo de su div padre se le daría el alfa clase. Del mismo modo, el omega la clase 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 pueda ver cómo se hace..
Aunque no se muestra en la demostración de 960.gs, aquí hay un ejemplo de cómo se logra un diseño complejo con la ayuda de alfa y omega clases (y divs anidados con grid_xx clases):
Aquí tenemos columnas que abarcan varias filas en ambos lados, con filas y cuadros en el medio. También puede 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:
- Recuerda que 960.gs hace posible el diseño flotando divs a la izquierda.
- Crea tus divs anidados a partir de esos divs flotantes iniciales-. Esto significa que habrás flotado divs dentro de divs flotados.
Aquí hay una forma de abordar nuestro diseño: agrúpelas primero en tres columnas y asigne las adecuadas grid_xx clases:
A continuación, asigne el adicional grid_xx clases para los divs anidados (tenga en cuenta que no tenemos ningún div anidado para la columna derecha):
Como tenemos al menos dos niveles de grid_xx clases dentro de divs anidados, también necesitamos agregar el alfa y omega clases apropiadamente:
Los divs anidados dentro de la columna izquierda tocan ambos bordes de su div principal, por lo que necesitamos agregar ambos alfa y omega. Lo mismo es válido para los divs con cuadrícula_8 Clases en la sección media. Pero cada uno cuadrícula_4 div en la parte superior solo tiene que tener alfa o omega, ya que solo toca el borde izquierdo o derecho de su div principal.
Como puede haber llegado a la conclusión de este sencillo ejemplo, puede anidar divs con grid_xx clases tan profundas como desee (si su diseño lo exige), siempre que las marque correctamente y les dé las clases correctas de 960.gs, de modo que se floten correctamente y se cancele cualquier margen en exceso.
Y hablando de flotadores, el último grupo de clases de 960.gs, aunque no es exclusivo de 960.gs, lo hace todo posible: borran los flotadores que se crean automáticamente cuando asignas un grid_xx clase.
Nivelando el campo: el
claroLas clasesAnteriormente, notamos esto en el marcado: cada div que recibió un grid_xx clase, que también fue el último div para su fila, fue seguido por un div vacío con una clase de claro.
190
750
230
710
La razón obvia para esto es que necesitamos limpiar 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 de claro, que hace lo siguiente:
.claro claro: ambos; bloqueo de pantalla; desbordamiento: oculto; visibilidad: oculta; ancho: 0; altura: 0;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ó el clearfix solución en el 960.gs CSS, discutido por primera vez en PositionIsEverything.net. Elimina el div adicional, ya que puedes colocarlo junto al grid_xx Clases y lograr el mismo efecto:
190
750
230
710
Ese es el mismo ejemplo de marca anterior con los divs extra eliminados, y el clearfix clase añadida Eso será haga lo mismo, para que pueda elegir este método de limpieza si lo encuentra a su gusto. Aquí está el CSS para ello:
.clearfix: después de clear: both; contenido: "; pantalla: bloque; fuente-tamaño: 0; línea-altura: 0; visibilidad: oculta; anchura: 0; altura: 0; / * La siguiente regla de zoom: 1 es específicamente para IE6 + IE7. Mover a hoja de estilo separada si el CSS no válido es un problema. * / * html .clearfix, *: first-child + html .clearfix zoom: 1;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 original de clearfix, 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í), le mostré cómo funcionan cada una de sus clases y cómo podría usarlas para convertir sus diseños basados en 960 en HTML y CSS.
Cada sección de la demostración imparte lecciones para aprender, y una vez que vea lo que las clases hacen con su marca al examinar el CSS, el misterio de 960.gs desaparece, y obtiene una mejor comprensión de lo que sucede detrás de la escena. Incluso podrías encontrar nuevas formas de usar las clases, ya que ahora sabes lo que hacen..
Aplicar su nuevo conocimiento se vuelve fácil, porque una vez que haya configurado sus columnas con 960.gs, solo tendrá 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 dentro.
