Share
Grid 960 es un marco CSS que permite a los desarrolladores crear prototipos rápidamente. Son excelentes herramientas para crear maquetas. ¿Por qué? Porque hacen todo el trabajo pesado que te permite obtener resultados más rápidos..
Eso suena bien, pero ¿cómo hacemos eso? Hay una gran cantidad de artículos en Internet que soplan o respaldan los marcos de CSS, pero ninguno tiene contenido que ayude a los lectores inexpertos a decidir. Esta es diferente. Este artículo cubre todo el proceso de creación de prototipos. Imagina que te dan un diseño y necesitas una maqueta para el cliente. Este artículo explica los conceptos básicos de Grid 960, la planificación de la cuadrícula para un diseño y la codificación del prototipo. El diseño de muestra aprovechará la mayoría de las capacidades de Grid 960, lo que le dará una base de conocimientos firme para trabajar. Después de haber visto el diseño a continuación, es hora de aprender cómo funciona Grid 960.
Grid 960 funciona utilizando clases a través de la herencia. Grid 960 proporciona dos grillas: 12 y 16 columnas. El contenedor principal es siempre de 960px de ancho. El uso de 960 permite la mayoría de las combinaciones de columnas y es fácil trabajar con ellas. Usaremos la cuadrícula de 12 columnas para codificar este diseño, pero no usaremos las 12 columnas. Cada celda de cuadrícula tiene una margen: 0 10px. Esto crea un canal de 20px. Al crear una fila, el ancho total de todos los elementos se suma a 960. Echa un vistazo a la página de demostración de Grid 960. Verás una bonita cuadrícula con todo tipo de combinaciones. Cada celda de la cuadrícula tiene una clase que especifica qué ancho será. Aquí está el desglose de los anchos de columna para una cuadrícula de 12 columnas.
Cada ancho corresponde a un nombre de clase formado así: cuadrícula_X donde X es un número de la lista anterior. Si quieres un bloque con ancho 940 utiliza clase. grid_12. ¿Cómo sabe Grid 960 qué ancho debe ser? Cada grid_x es un selector container_Y .grid_X donde Y es 12 o 16 para columnas. Vamos a sumergirnos en algún código. Aquí se explica cómo crear una cuadrícula de dos filas en un contenedor de 12 columnas. Deje que la primera fila sea 940px, y la segunda fila contenga dos columnas iguales.
940px
460px
460px
Al crear una fila en la cuadrícula, asegúrese de que todos los números secundarios de grid_X se sumen al número de columnas que está utilizando. Esto asegura el ancho correcto. Dos grid_6 div suman hasta 12. No estás limitado a los mismos números. También puede usar 6, 4 y 2. Ahí lo tiene, una cuadrícula rápida lista para el contenido. Ahora que sabe cómo funciona Grid 960, veamos cómo crear la maqueta..
Visualizar la cuadrícula del diseño es fácil. Hay una fila para la imagen del encabezado, una fila para la barra de navegación, una fila con 2 columnas para la historia del titular y un póster, un espaciador, 4 columnas, un espaciador, que un pie de página con 3 columnas. Pincha en la imagen para ver el código..
Después de revisar lo visual, debes entender cómo crear la cuadrícula de la maqueta. Usando los anchos, relaciona los # de clase de la lista y vamos a juntar algunos códigos. Recuerde agregar la división de compensación al final de cada fila. No olvide incluir las hojas de estilo incluidas en el paquete Grid 960.
El esqueleto está listo. Es hora de empezar a superponer el diseño. Las barras verdes son solo divs con un color de fondo y altura. La barra de navegación no tiene una altura establecida. En su lugar, será controlado por el tamaño de los enlaces en el interior. No te olvides de agregar la imagen del encabezado también.
div.spacer background-color: # 8FC73E; altura: 1em; div # navbar background-color: # 8FC73E; relleno: 10px 0;
Aplique la clase para corregir grid_12 divs y establezca la ID.
Las columnas del medio no requieren ningún efecto. Agrega algún texto de marcador de posición para completar el diseño. Puedes hacer algo aquí. Antes de abordar la sección superior, mueva al pie de página. En la captura de pantalla, el pie de página es un color sólido. No puedes lograr esto con el código actual. Un div envoltorio alrededor de las tres columnas inferiores resuelve el problema. Así que piensas, no es gran cosa, solo inserta un div. Eso rompe la cuadrícula ya que Grid 960 se basa en que los padres y los niños apliquen los estilos (¿recuerdas el selector container_12 .grid_4?) Una subcuadrícula resuelve el problema. Grid 960 permite grillas anidadas. Cree un subgrid agregando un grid_12 div, luego coloque el grid_4 dentro de él. Cuando se usan grillas anidadas, los elementos de los niños requieren clases especiales. El primer niño necesita una clase "alfa" y el último niño una clase &qout;omega "Edite el marcado para reflejar los cambios y aplique cambios de estilo al pie de página.
div # footer background-color: # e5e5e6;
¡Excelente! Ahora el pie de página tiene un color de fondo sólido y puede ajustar el tamaño de las columnas si es necesario. Agregue un poco de texto ficticio a las columnas del pie de página por ahora y movamos a la barra de navegación. La barra de navegación es una simple lista desordenada. Añadir algunos enlaces y un estilo adecuado.
div # navbar ul estilo de lista: ninguno; bloqueo de pantalla; margen: 0 10px; div # navbar ul li float: left; margen: 0 1.5em; fuente: negrita 1em Arial;
Dulce. La página realmente se está juntando. Todo lo que queda es crear los efectos de bloque en la sección superior. Esto es más siniestro de lo que parece. Antes de comenzar, debes darte cuenta de algunas cosas sobre los marcos de Grid 960 y CSS en general..
Los lectores astutos pueden haberse dado cuenta de algo. La página es extremadamente rígida. Todo tiene un tamaño definido y cambiar el tamaño crea problemas o potencialmente rompe el diseño. Los diseñadores también sacrifican algunos de nuestros objetivos de diseño porque lo que permite Grid 960. Por ejemplo, el diseño de la muestra fue de 1000px de ancho. Grid 960 solo crea grillas de 960px de ancho, por lo que se pierde el tamaño adicional. ¿Qué pasa si quieres hacer tu página 1000px en lugar de 960? En resumen, no se puede hacer una modificación pesada del código. El marco bloquea a los diseñadores en un conjunto de restricciones. Digamos que el cliente quiere un diseño que sea más ancho o más delgado. Lo más probable es que el diseñador tenga que desechar el código que ha escrito para lograr los nuevos objetivos. Hay otro problema que aún no se ha revelado: columnas de igual altura. Dado que todas las columnas del medio comparten el mismo fondo, parecen ser alturas iguales. En el pie de página, una envoltura div pone un fondo detrás de las 3 columnas. La cuadrícula 960 no te da columnas de igual altura. Por supuesto, hay una forma en que puede lograr esto por su cuenta. Ya que estamos creando un prototipo de un diseño, no pierdas el tiempo preocupándote por los detalles más precisos sobre cómo funcionará el diseño cuando esté en producción. Sólo estás tratando de transmitir las ideas en esta etapa. También hay otro aspecto de Grid 960 a tener en cuenta antes de abordar la sección superior. La cuadrícula 960 se basa en elementos de tamaño y márgenes para crear una fila del tamaño correcto. Si aplica relleno o bordes, el diseño se rompe. Si lo hace, debe ajustar el tamaño de la div para reflejar los cambios. Estar cansado de esto Ajustar los tamaños de los elementos en dos lugares siempre generará confusión y hará que el diseño sea más difícil de mantener. Habiendo dicho eso. Acabemos la sección superior..
Afortunadamente, puede maniobrar alrededor de columnas de igual altura en la sección superior. Dado que la imagen de la derecha tiene una altura y una anchura determinadas, conocemos el tamaño de la otra columna. Cree el efecto de bloque agregando un nuevo div con un borde dentro de los divs existentes. No olvides poner las alturas. No coloque el relleno en los divs porque eso cambiará el ancho del bloque y romperá la cuadrícula. En su lugar, especifique un margen en un elemento secundario. Esto no cambiará el ancho del bloque. Aplicar un margen a un elemento en línea. Esto crea el efecto deseado y el texto se ajusta para ajustarse.
Use una clase en lugar de ID porque la clase topSection se aplica a dos divs. Esto también nos permite cambiar las alturas más fácilmente. Elija una altura (este número depende realmente de usted) y cree una clase.
div.topSection div border: solid 10px # e5e5e6; altura: 280px; div.topSection div p margin: 10px;
¡Guay! Echemos un vistazo al progreso.
Listo para llenar las dos cajas? Adelante, rellena el de la izquierda con texto de ejemplo. No hagas demasiado o se desbordará la caja. Esto crea un problema potencial en el diseño final. ¿Cómo sabes cuánto texto es demasiado? Para el diseño de producción, el diseñador necesitaría crear una función para permitir que solo X cantidad de palabras detenga el exceso de flujo. Es hora de tener lista la imagen del cartel. Antes de insertar una imagen determina las dimensiones. Si eres un buen matemático y entiendes el modelo de caja, lo más probable es que ya sepas cuán grande debería ser. Si no lo hace, encienda FireBug y haga un pico en el DOM. Haga clic en Inspeccionar. Baje al div en cuestión y haga clic en él. Abra la pestaña Diseño. FireBug mostrará una referencia de modelo de caja útil. Echa un vistazo a la imagen para obtener ayuda. Click en la imagen para ver en tamaño completo.
La captura de pantalla muestra que el div de póster es 360x280. Encuentra una imagen y crea un estilo. Decidí dejar que la imagen llene toda la división (a diferencia del diseño de muestra). Si desea crear un margen de 10 px asegúrese de reducir las dimensiones en 20 px en cada lado.
img # poster width: 360px; altura: 280px;
Deberías conseguir esto. La maqueta está completa. Siéntase libre de lanzar un texto real y cambiar la imagen.
Ahora que el prototipo está terminado, para hacer un balance de lo que se ha hecho. Has conseguido crear rápidamente un prototipo de diseño. Grid 960 creó fácilmente la grilla para nosotros. ¿A dónde ir desde aquí? Naturalmente nos mostraríamos al cliente y veríamos lo que piensan. Hay algunas advertencias sin embargo. ¿Has probado este diseño en IE6 o IE7? No. ¿Deberíamos? No. Esto es un prototipo. Esto es lo que se vería en producción. Es natural que cualquier peculiaridad del navegador sea resuelta antes de la producción. ¿Qué pasa si los clientes quieren crear un diseño más complejo? En este caso, rápidamente comenzará a ver los límites del marco. ¿Qué pasa si el diseño necesita ser líquido o elástico? El marco no hará eso. Tendrías que empezar desde cero. Recuerde que los marcos de CSS no resuelven todos sus problemas, pero sí ayudan con algunos. Grid 960, así como otros, son excelentes para armar prototipos. Puede utilizar los conceptos de Grid 960 en el código de producción, pero no se recomienda mantener un marco en todo el proceso de producción. Los marcos CSS son como cualquier herramienta, tienen sus usos. Con eso en mente, avanza y prototipo.!
Accentsconagua