Crash Course YUI Grids CSS

La biblioteca de interfaz de usuario de Yahoo es un conjunto bastante extenso de herramientas de JavaScript para desarrolladores. A menudo, se dejan pasar desapercibidos otros componentes útiles de la biblioteca que acelerarán la codificación: algunas bibliotecas CSS. Hoy, me gustaría mostrarle la biblioteca de CSS de YUI Grids.

---

Por qué?

¿Por qué debería considerar el uso de la biblioteca CSS de YUI Grids (en lo sucesivo, "grillas YUI")? ¿Qué lo hace destacar? No he mirado extensivamente otras bibliotecas de grillas, pero estas cosas me parecen convincentes:

• Buenas convenciones de nomenclatura

  Las cuadrículas YUI utilizan ids y clases fáciles de recordar y un marcado limpio; Una vez que lo aprendas, puedes volver a tu código en un mes y saber qué partes son de YUI y qué hace cada pieza..

• Alojamiento de archivos gratuito

  Esto reduce su carga dos veces: no es necesario alojar el archivo en su servidor, así como una carga de páginas más rápida si el cliente tiene el archivo en caché.

• Compatibilidad con tamaños de anuncios comunes

  Yahoo ha incorporado anchos de barra lateral que se corresponden con las pautas publicitarias de Interactive Advertising Bureau..

• Muchas opciones de diseño

  Con múltiples plantillas y la capacidad de anidar regiones de página, Yahoo afirma ofrecer más de 1000 combinaciones de diseños ... todo en menos de 5kb.

Por supuesto, las rejillas YUI no son perfectas. Es un poco limitante cuando se trata de los anchos de barra lateral precocidos; Sin embargo, si se ajustan a sus necesidades, ahorrará mucho tiempo, codificación y dolores de cabeza al diseñar su sitio..

---

Recursos

Como comenzamos, aquí hay algunos recursos que serán de ayuda..

• La página de inicio de YUI Grids CSS: el lugar al que ir después de leer este artículo
• The Grids Builder: una herramienta que te permite crear tu página con unos pocos clics, una gran ayuda para dominar las cuadrículas YUI rápidamente!
• La hoja de trucos: un PDF de una sola página con todas las convenciones de grillas YUI

---

Bloques de construcción

Antes de entrar en el cuadrilátero, echemos un vistazo a los bloques de construcción de las cuadrículas YUI. Hay cinco estructuras diferentes con las que trabajará para desarrollar su diseño; cada una de estas estructuras está definida por un id o una clase (generalmente una clase). Son los siguientes:

1. Documento
2. Modelo
3. Bloques
4. Rejillas
5. Unidades

---

Documento

Obviamente, su archivo HTML completo es el documento, pero en nuestro caso, también es el div inmediatamente dentro del cuerpo, el div que lo contiene todo. Aquí es donde se define el ancho de su sitio. Las cuadrículas YUI te ofrecen 4 opciones de ancho: 750px, 950px, 100% o 974px. Estos anchos no son en realidad píxeles codificados; son ems, por lo que la página se ajustará de forma fluida cuando el usuario ajuste el tamaño de la fuente. Si esto no lo corta, Yahoo ha hecho que la definición de un ancho personalizado sea una brisa. Aquí está el código para crear un documento de 800px de ancho:

# custom-doc margin: auto; / * estos dos valores son necesarios, como * / text-align: left; / * ayudan a las cuadrículas YUI a centrar la página * / ancho: 61.54em; / * 800px / 13 = valor-em para la mayoría de los navegadores * / * ancho: 60.00em; / * 800px / 13.333 = valor-em para IE * / min-width: 800px; / * opcional, pero recomendado * /

Para establecer el ancho, simplemente use id de doc, doc2, doc3 o doc4, respectivo a los valores dados anteriormente.

---

Modelo

Hay siete plantillas para elegir. Los seis primeros definen un diseño de dos columnas; Cada uno tiene un ancho u orientación diferente para la barra lateral, y la columna de contenido principal ocupa el resto del ancho del documento. Las plantillas son 1) 160 píxeles a la izquierda, 2) 180 píxeles a la izquierda, 3) 300 píxeles a la izquierda, 4) 180 píxeles a la derecha, 5) 240 píxeles a la derecha y 6) 300 píxeles a la derecha. Para obtener la plantilla que desee, simplemente agregue una clase de yui-t # al mismo div en el que definió su documento (reemplace el # con los números anteriores). Como mencioné anteriormente, estas barras laterales son anchos de anuncios web estándar, por lo que cualquier publicidad debe caber cómodamente dentro de ellos..

La séptima plantilla-yui-t7-no está tan bien documentada (extrañamente, no está en la hoja de trucos que vinculé anteriormente, pero está en esta versión anterior). Resta la barra lateral, simplemente le da una columna de ancho completo (que puede dividirse en columnas más adelante).

---

Bloques

Los bloques son la manifestación real de las columnas que definió en la plantilla. Son simplemente dos divs dentro de la div doc, ambos clasificados con yui-b. Afortunadamente, no tienen que ser hijos inmediatos de la división principal; Yahoo da este ejemplo:

 
 
 <-- Header Content --> 
 
 
 
 <-- Main Content --> 
 
 
 <-- Sidebar Content --> 
 
 
 <-- Footer Content --> 
 
 

Puede ver en el ejemplo que no necesita colocar los bloques directamente dentro del div root. Esto le permite tener un encabezado y pie de página de ancho completo, lo que generalmente es una buena idea. Notará que el bloque de contenido principal está dentro de un div con un id de yui-main; YUI grids hace esto para darle la posibilidad de tener primero su barra lateral o su columna principal en su código, lo que puede ser una ventaja cuando está considerando SEO o accesibilidad.

---

Rejillas y Unidades

He agrupado grillas y unidades porque son muy similares; ambos son divs. Una cuadrícula (definida con la clase yui-g) básicamente le dice a 2 niños (generalmente unidades) que dividan su ancho de manera uniforme. Una unidad (clase yui-u) siempre debe ser el elemento secundario de una cuadrícula y el elemento principal de su contenido.

Entonces, ¿cuál es la diferencia entre un bloque y una cuadrícula??

• Bloques
  • Solo se utilizan para definir columnas de página generales
  • Solo se usan si usas plantillas 1 - 6
  • Solo se utilizan una vez (por lo que nunca debe tener más de 2 divs.yui-b en una página)
• Rejillas
  • Se utilizan para dividir áreas (como su bloque principal u otra cuadrícula) en columnas
  • Se utilizan en cualquier plantilla.
  • Son anidables

Además, siempre que tenga varias cuadrículas o unidades dentro de una cuadrícula, es necesario dar a la primera una clase de primera. Esto se debe a que no todos los navegadores ofrecen la pseudo-clase: primer hijo.

Pero ¿y si quieres dividir una cuadrícula de manera desigual? La vida no siempre es justa, ¿verdad? Afortunadamente, YUI ofrece una serie de opciones alternativas a la clase yui-g. Aquí hay una lista de los otros:

• yui-gb : Toma 3 unidades y divide por igual.
• yui-gc : Toma 2 unidades y divide a 2/3 y 1/3
• yui-gd : Toma 2 unidades y divide como 1/3 y 2/3
• yui-ge : Toma 2 unidades y divide como 3/4 y 1/4
• yui-gf : Toma 2 unidades y divide como 1/4 y 3/4

Eso es todo de ellos; solo golpea 2 o 3 unidades en cada una de las cuadrículas anteriores, y tendrás columnas desiguales.

---

Ejemplo básico

Bueno, ahora que conoces las cuerdas, veamos un ejemplo básico. Digamos que queremos el diseño estándar del sitio, ya sabes, la columna de contenido principal con una barra lateral a la derecha, con un pequeño giro: dividiremos la columna principal en dos más pequeñas y dividiremos una de esas más en dos.

Como mencioné, Yahoo ofrece alojamiento para este marco, y generalmente es una buena idea aprovechar eso. Además, Yahoo recomienda el Doctype estricto de HTML 4.01, así que eso es lo que he puesto. Esto es lo que empezamos con:

---

Paso 1: Docs y Bloques

El primer paso es configurar nuestros div divisiones y bloques. Podemos mantener el primer ancho de documento (750px) e ir con la plantilla 6, que nos da una barra lateral derecha de 300px.

Para los dos segundobloqueos de contenido, necesitamos agregar dos divs.yui-b. Convertiremos la columna superior en la más grande, envolviéndola con div # yui-main.

 
 
 Mi principal contenido div 
 
 
 Mi barra lateral div 
 

¡Súper! Entonces, esto es lo que tenemos hasta ahora: me he tomado la libertad de estilizarlo un poco, para que pueda ver lo que está pasando.

---

Paso 2: Grillas y Unidades

Aún no es muy impresionante, pero lo lograremos. Ahora dividamos la columna más grande en dos. Podemos lograr esto colocando un div.yui-g (que es la crianza de dos unidades) dentro de él:

 
 
 
 Primera sub-columna 
 
 Segunda sub-columna 
 
 
 

Esto nos da dos columnas a la izquierda; no está mal; dividamos la segunda de esas columnas en dos. Para hacer esto, tenemos que cambiarlo a una cuadrícula y ponerle dos unidades..

 Primera sub-columna 
 
 
 Primera sub-sub-columna 
 
 Segunda sub-sub-columna 
 

Este es un gran ejemplo del hecho de que las grillas y las unidades son de igual rango y pueden estar de lado a lado: solo difieren en el uso.

---

A Gotcha

Esto me lleva a un acolchado gotcha (que dará lugar a un gran beneficio de las cuadrículas YUI). Primero, mire el código que hemos escrito hasta ahora, con un texto de relleno:

Su buen gusto debe notar la falta de relleno alrededor de los bordes de nuestras columnas. Pero eso se puede arreglar fácilmente con algo de relleno, por ejemplo, 0.5em-on .yui-u, a la derecha?

¡Ay! Las cuadrículas YUI han establecido los anchos para estos divs, y como el relleno aumenta el ancho de div, tenemos un problema de desbordamiento. Una solución fácil para esto es agregar el relleno a los hijos inmediatos del .yui-u.

Para mantener nuestras columnas en línea y fácilmente legibles, pondremos el relleno en los párrafos dentro de .yui-u. Pero no tengo que mostrarte una imagen de eso para que descubras que nuestras columnas estrechas se han vuelto más estrechas. Aquí es donde podemos aprovechar un punto fuerte de las cuadrículas YUI. Cambiemos el ID en nuestra raíz div de doc a doc2. Aquí hay un antes y un después:

Al agregar un carácter a nuestro HTML, podemos experimentar fácilmente con un diseño más amplio; Esa es la belleza de las rejillas YUI. # doc2 es 200 px más ancho que #doc, así que ahora nuestros párrafos estrechos tienen un ancho cómodo.

---

Ejemplo complejo

Ese es un ejemplo bastante simple; echemos un vistazo a uno más complejo ... que realmente no es más difícil de crear. Comenzaremos con la séptima plantilla, una sola columna, con un documento de 750 píxeles de ancho (#doc) y la dividiremos de forma diferente en varias filas. Esto es lo que comenzamos con:

Debido a que no estamos utilizando las plantillas 1 a 6 (que tienen barras laterales), no necesitamos tener ningún divs.yui-b. Podemos comenzar con algunos divs.yui-g; añadiremos 4: