Share
¿El sistema de cuadrícula 960 ha existido por un tiempo ahora? pero se ha utilizado principalmente en el lado de la codificación de proyectos como un marco HTML / CSS. Hoy, vamos a discutir las ventajas de usar sistemas de rejilla como 960GS al comienzo de un proyecto, incluso antes de abrir Photoshop o Fireworks. Si no ha usado un marco anteriormente, o simplemente desea un buen repaso, este es un excelente lugar para comenzar!
¿Hay muchas posibilidades de que ya hayas escuchado o utilizado algún tipo de marco CSS? pero por si acaso, revisemos los beneficios clave de usar un marco CSS (también conocido como sistema de cuadrícula) en cualquier proyecto web:
En última instancia, un marco CSS debería ayudar a establecer algunas pautas básicas para las columnas de contenido, al tiempo que proporciona a los diseñadores un control total sobre sus diseños..
En este articulo: Voy a explicar qué es un marco CSS y por qué elegí 960. Luego, repasaré los conceptos básicos de cómo aplicar la cuadrícula 960. Para concluir nuestra discusión, le mostraré algunos sitios que utilizan la cuadrícula 960 y cómo están estructurados..
Un CSS Framework es una serie de hojas de estilo creadas para facilitar la vida de un desarrollador web. Son responsables de las diversas peculiaridades de los navegadores, son fácilmente adaptables y aplican principios de diseño básicos (como establecer márgenes visualmente agradables entre los elementos).
A menudo, estos marcos también tienen hojas de estilo tipográficas, que pueden actuar como un excelente lugar para comenzar a trabajar en la tipografía de su sitio (para obtener más información acerca de la tipografía, consulte este artículo).
Hay dos marcos de CSS importantes en este momento: Blueprint y 960. Ambos son marcos perfectamente capaces, con excelentes características y facilidad de uso. Simplemente se reduce a una cuestión de preferencia de qué Framework se siente más cómodo usando.
Antes de comenzar la fase de diseño de un proyecto, es importante discutir la selección de un marco con la persona que va a codificar el sitio. A menudo, los desarrolladores tendrán preferencias hacia un marco CSS particular, y como una de las razones principales por las que usamos marcos durante la fase de diseño es suavizar la transición del diseño a la codificación, es una decisión importante. Si está programando el proyecto usted mismo, asegúrese de estar cómodo con el marco de cuadrícula que elija, no hay nada peor que diseñar un sitio completo basado en un marco que le disguste..
Personalmente, encontré que el Grid 960 se adapta mejor a mis necesidades, así que eso es lo que adopté y eso es lo que discutiremos en este artículo. Sin embargo, los principios generales que discutiremos se aplicarán a cualquier marco, incluido Blueprint.
960.gs se basa en colocar todos los elementos de su sitio en un contenedor de 960px de ancho (chica inteligente) y dividir ese contenedor en 12, 16 o 24 columnas del mismo tamaño. Proporcionan una herramienta para usar anchos alternativos, pero 960 es para lo que se desarrolló todo el sistema y parece que se ve bastante definido..
Por qué 960px? Debido a que 960px es un ancho adecuado para la gran cantidad de plataformas en las que navegamos por la web. Básicamente, permite que un monitor de 1024 píxeles de ancho muestre el sitio con precisión y sin desplazamiento horizontal, lo que explica el ancho del navegador de Chrome, las barras de desplazamiento y un poco de relleno para la legibilidad. Siempre hay un margen de 10px colocado a la derecha e izquierda de la columna de contenido principal, lo que significa que los navegadores más pequeños siempre podrán leer el contenido que se encuentra más a la izquierda, sin el borde de texto pero en contra de la ventana del navegador.
Además, todos los números en el 960GS son números enteros basados en la proporción de oro: no hay puntos decimales ni problemas de espaciado funky. Si ha leído nuestro artículo sobre Matemáticas y Diseño Web, sabe lo importante que es obtener estos números correctamente..
Una de las omisiones evidentes, o características agradables, dependiendo de cómo se mire, es la forma en que el 960 maneja (o no) la tipografía. Se incluye un archivo text.css, pero esto es principalmente para garantizar que haya al menos algo en su lugar, de modo que al hacer prototipos rápidos, elementos comunes como encabezados, párrafos y listas tengan un estilo básico..
No profundizaré mucho aquí, pero vamos a discutir brevemente las diferencias clave entre 960.gs y Blueprint. Primero, Blueprint es un marco CSS que se basa en 950px. Es muy similar a 960 en la forma en que maneja las cosas del diseño básico (BP usa 24 columnas con enfoques similares de relleno y proporciones). Pero ahí es donde Blueprint deja de ser similar..
Blueprint es un sistema de marco mucho más complejo, robusto e integral. Se ha creado como una hoja de estilo completa para casi todos los elementos que se pueda imaginar (botones de radio, tablas, etc.). Hay cosas que me gustan de Blueprint, la más notable es su estilo para elementos de formulario y clases de notificación integradas. Además, incluye un conjunto completo de estilos para:
El problema que tuve con Blueprint es que es demasiado complejo para usar en la fase de diseño. crear un diseño desde cero significa volver a formatear todo lo que proporcionan y, a menudo, es difícil mantenerse al día con la total amplitud que brinda BP. En contraste, 960.gs ofrece solo un diseño, perfecto para permitir que un diseñador se vuelva creativo dentro de límites realistas.
La cuadrícula 960 es casi increíblemente fácil de usar (de hecho, puede comenzar a preguntarse: "¿Por qué no usé esto antes?"), Con solo unas pocas reglas simples que debe cumplir.
Después de descargarlo, eche un vistazo dentro del directorio que acaba de descomprimir. Quiero llamar su atención a dos carpetas: "sketch_sheets" y "templates". La carpeta "hojas de boceto" contiene un PDF de los distintos tamaños de cuadrícula en una ventana del navegador, y la carpeta "plantilla" contiene plantillas para casi todos los programas de gráficos bajo el sol (como GIMP, Fireworks y Photoshop).
El propósito de un Marco de CSS es hacer su vida más fácil, y siempre debe buscar formas de ayudarlo a disminuir el tiempo que toma crear un diseño. Use estas plantillas cuando cree un diseño en Photoshop, imprima copias de las "hojas de boceto" cuando discuta los detalles de un proyecto con un cliente (¡y asegúrese de mirar esto antes de ir!).
De hecho, sugeriría usar estas hojas de boceto cada vez que inicie un proyecto: le permitirán experimentar libremente antes de encerrarse en cualquier diseño. Solo le llevará 5 minutos dibujar para hacer que un diseño funcione o no, en lugar de 50 minutos o más, si lo hubiera diseñado y codificado..
Una vez que haya llegado a un acuerdo básico sobre el concepto de boceto del sitio, es hora de abrir los archivos de plantilla. Esta es probablemente la razón central por la que me gusta usar el sistema 960? viene preempaquetado con plantillas para casi cualquier programa que se pueda imaginar. Resulta que utilizo Photoshop, así que aquí hay una captura de pantalla de la plantilla provista:
El beneficio clave aquí es simple: la plantilla tiene guías predefinidas para todas las columnas de contenido principal que se corresponden directamente con el marco CSS en el lado de la codificación de las cosas. Es fácil dibujar rápidamente sus columnas de contenido principal y mantener todo en su diseño limpio y organizado.
Los diseñadores experimentados pueden ver esto como "diseño con ruedas de entrenamiento", pero francamente, no hay nada de malo en tener un sistema de superposición simple para ayudar a guiar el marco para un diseño web.
Aún tiene que diseñar todo en el sitio (¡por supuesto!), Pero al mantener su diseño en línea con las guías, hará que el desarrollo de las cosas sea mucho más fácil. Como beneficio adicional, tener un enfoque uniforme del relleno entre celdas de contenido es una excelente manera de hacer que su diseño se vea más profesional. Lea más acerca de por qué "Pixel Perfect Comps" aquí.
Ahora que ha definido un diseño, es hora de que hablemos de la sintaxis de cuadrícula 960. Como mencioné en la introducción, puede encontrar mucha más información sobre el uso y creación de prototipos con marcos CSS en Nettuts, así que voy a cubrir los conceptos básicos aquí..
Primero, deberá hacer referencia a los archivos CSS apropiados en su diseño: reset.css (el archivo de restablecimiento que da cuenta de las peculiaridades del navegador), texto.css (la hoja de estilo de tipografía incorporada), y 960.css (o 960_24_col.css si está utilizando una cuadrícula de 24 columnas). Por lo general, coloco todos los estilos específicos de mi sitio en un archivo separado (generalmente llamado style.css), para asegurar que no rompa nada en el Marco.
Consejo rapido: Haga referencia a su propia hoja de estilo después de hacer referencia al Marco, de modo que pueda ajustar aspectos específicos del Marco sin alterar el Marco (y si comete un error, no tiene que volver a descargar y sobrescribir los archivos del Marco). Con estos 4 archivos, ya está listo para comenzar a diseñar su sitio.
Aquí hay una descripción general rápida de la sintaxis, extraída del sitio 960.gs:
????
El primer div es su contenedor, en lo que se almacenará su contenido. Al definir su clase como "container_12", usted está diciendo: "Quiero que este contenedor tenga una cuadrícula de 12 columnas" (la misma práctica se aplica cuando se usa una y cuadrícula de 24 columnas).
Ahora que ha definido el contenedor como un diseño de 12 columnas, comienza a estructurar su sitio de tal manera que se ajuste al diseño. Si observa los siguientes elementos div en la jerarquía (como lo indican las pestañas), verá la sintaxis de sus definiciones. "Grid_7" y "grid_3" son fáciles de entender: estás diciendo que este elemento div ocupará X número de columnas. Sin embargo, 7 + 3 = 10 < 12, which means you'll have 2 empty columns at the end of the container, right? Well, this is where the prefix and suffix aspect of the class definition come into play. With a class definition of "grid_x suffix_y", you're saying: "I want this div to take up X columns, and for there to be Y number of empty columns after it." (This also applies to prefix). So, since "Grid_7" has a prefix of 1, and "Grid_3" has a suffix of 1, 7+3+1+1 = 12!
Por ahora, sé que te estás preguntando sobre los elementos Div anidados en la división "Grid_7". Bueno, puede anidar divs que ocupan un número específico de columnas dentro de otra div, siempre que no exceda el tamaño de su cuadrícula principal. Además, los elementos primero y último deben tener "alfa" y "omega" anexados a su definición de clase, respectivamente. Entonces, en nuestro código de ejemplo: "grid_2 alpha" es el primer div anidado dentro de "grid_7", el siguiente elemento "grid_3" está en el medio (y, por lo tanto, no necesita que se le agregue un "alpha" o "omega"), y finalmente "grid_2_ omega" es el último div anidado dentro de "grid_7". Y como 2 + 3 + 2 = 7, la definición es correcta.
Con el propósito de ilustrar todo este proceso, veamos un ejemplo rápido del uso del Marco 960 durante la fase de diseño de un proyecto personal mío..
El diseño en sí es bastante simple, pero es la manera perfecta de mostrarle cómo el marco puede actuar como una herramienta a través del proceso de diseño..
El sitio web de Cerberus: el ejemplo que usaremos Mass Effect 2 es uno de mis juegos favoritos de los últimos 5 años, y sentí que crear un sitio para la organización ficticia "Cerberus" sería un desafío. Los aspectos principales de la organización son: profesionalidad y destreza tecnológica, que quería transmitir con un diseño limpio que utilizara todo su esquema de color. Para empezar, dibujé el diseño del sitio (sería hipócrita si actuara de otra manera, ¿no?).
Mientras miraba el boceto del diseño, vi cómo hacer que el diseño funcionara en la cuadrícula 960. A continuación se muestra el esqueleto HTML de mi sitio:
LogoCerberus: fuerza para la humanidad
NavegaciónContenidoBarra lateralBarra lateralBarra lateralPie de página
Si te diste cuenta, el logotipo solo cubría 2 columnas, mientras que el encabezado secundario ocupaba los 12 espacios. Dado que el encabezado div tenía 12 columnas de longitud, cualquier subelemento puede tener hasta 12 columnas de longitud. Este truco me permitió hacer el encabezado, ya que el logotipo ocupó 2 columnas y dejó el resto vacío (la imagen es en realidad la imagen de fondo del div del encabezado). Y dado que el encabezado secundario tenía 12 columnas de ancho, llenaba todo el ancho debajo del logotipo (ya que no podía acomodar todo su contenido dentro de los 10 espacios que quedaban después del logotipo).
Esta es realmente una distinción importante que debe hacer, y es otra herramienta de diseño que debe utilizar (y para estar seguro, puede usar "prefijo" o "sufijo" para asegurarse de que se reserva una cierta cantidad de espacio). El resto del sitio es bastante sencillo: 8 columnas para el contenido principal y 4 para la barra lateral. Cada elemento de la barra lateral es un elemento div separado; se apilan uno encima del otro porque están limitados al ancho de 4 columnas.
Para ilustrar cómo se configura el sitio, tomé una captura de pantalla del sitio y marqué claramente las columnas:
Ahora, mi propio ejemplo podría no ser la mejor manera de inspirarte realmente para salir y crear algunos diseñadores web asesinos, por lo que aquí hay solo algunos ejemplos del sistema 960 en acción. Puedes encontrar más en el sitio 960.gs.
Uno de los aspectos más atractivos de un marco CSS es la comodidad que ofrecen a los diseñadores. Sin embargo, como cualquier otra herramienta, debe asegurarse de que la esté utilizando de manera relevante y valiosa. No intente usarlo si no se ajusta al diseño y no permita que restrinja su creatividad. Para la mayoría de los proyectos (especialmente aquellos para diseños complejos de periódicos o inspirados en blogs), un marco CSS puede ser una gran herramienta para ahorrar tiempo, no solo para escupir HTML / CSS rápido, sino para todo el proceso de diseño..
¿Quieres leer más sobre la codificación con marcos de CSS? Consulte la biblioteca de artículos de Nettuts sobre el tema (desplácese hasta la parte inferior para obtener más detalles).
Accentsconagua