En el pasado, hemos hablado bastante de Twitter Bootstrap. Mucho más que su competidor más digno: la Fundación Zurb. Ahora, en su tercera versión, Foundation es un marco de front-end robusto y sensible utilizado por cientos de desarrolladores todos los días.
A lo largo de varios artículos, vamos a saltar y echar un vistazo a sus diversos aspectos desde la perspectiva de un principiante completo. El tema de hoy es mi parte favorita: la cuadrícula. ¡Sigue para ver cómo funciona!
Grid Crazy
Si eres un lector habitual de Design Shack, entonces probablemente ya sabes que soy un poco loco. El diseño es el aspecto de CSS que más me fascina y simplemente me encanta explorar y jugar con los diferentes sistemas de grilla que las personas crean. No, no siempre son perfectamente semánticos (aunque algunos lo son), pero pueden ser una manera increíblemente útil de sacar diseños muy complejos con muy poco esfuerzo.
La cuadrícula que viene incorporada en Foundation no es una excepción a esta regla. Es muy fácil de usar, tiene todas las características que podría desear y se adapta bastante bien a diferentes vistas. Vamos a ver.
The Foundation Grid
Al igual que muchas otras cuadrículas, la cuadrícula de base se basa en un sistema de doce columnas. Por defecto, el ancho de la cuadrícula es de 940px de ancho cuando está en todo su ancho. Sin embargo, la cuadrícula es fluida, por lo que su ventana gráfica se vuelve más estrecha que 940px, la cuadrícula se adaptará.
Lo que esto significa a nivel de código es, por supuesto, que cada columna de la cuadrícula no tiene un ancho estático, sino que se asigna utilizando porcentajes. Si abrimos el CSS, podemos ver que este es el caso:
Sensible
La naturaleza fluida de la cuadrícula de la Fundación lo ayuda a adaptarse a medida que la ventana gráfica se estrecha, pero una vez que alcanza los 767 píxeles, una consulta de medios inicia y simplifica su diseño complejo en una sola columna. Obviamente, una solución tan simple podría no ser siempre deseable, por lo que hay formas de hacer que su diseño fluya de manera intencional en una red móvil de cuatro columnas. Veremos cómo hacer esto más tarde.
Empezando
Si está acostumbrado a los sistemas de red, Foundation debería ser realmente fácil de aprender. Si eres completamente nuevo en las redes, no te preocupes, te guiaré a través de él y te daré prisa en poco tiempo.
Básicamente, Foundation ha hecho la mayor parte del trabajo pesado de diseño de CSS por ti. El centro de 940 píxeles de la página se divide en doce columnas y varias combinaciones de columnas posibles se asignan a las clases. Esto significa que, para realizar un diseño básico, no es necesario escribir un solo carácter de CSS. Todo lo que tienes que hacer es usar las clases correctas en tu HTML.
Creando una fila
Lo primero que debe hacer al agregar contenido a la página es crear una fila. Esto es exactamente lo que suena, un fragmento de contenido que se mostrará en el mismo plano horizontal. Se han solucionado todos los elementos de flotación, relleno, márgenes y diversas complejidades de diseño para que pueda centrarse en su contenido.
Para comenzar una fila, simplemente cree un div con una clase de "fila".
¿Qué tan fácil fue eso? Ahora veamos como agregar en algunas columnas.
Agregando Columnas
Para agregar columnas de contenido, cree un nuevo div y asigne dos clases. La primera clase es un número que corresponde al número de columnas que desea que abarque este contenido. Entonces, si desea que su contenido ocupe tres de las doce columnas disponibles, asigne? Tres? como una clase.
La segunda clase que aplicas es? Columnas? (o? columna?). Esto se aplica de manera uniforme a todos los divs que desea que tengan el tratamiento estándar de columna de Foundation. Combina estas dos clases y deberías tener algo como esto:
Aquí tengo un pequeño contenedor que establecerá automáticamente límites en el contenido para que no ocupe más de ocho columnas. Ahora, normalmente (aunque no siempre), querrá comerse las doce columnas completas en una fila dada. Ya hemos usado ocho columnas en nuestro primer div, así que si queremos una más, ¿escribiremos cuatro columnas? en el área de clase (8 + 4 = 12).
Despues de escribir solamente este código en el cuerpo de un documento HTML, si echamos un vistazo a nuestra página en un navegador, veremos esto:
Como puede ver, efectivamente hemos creado dos trozos de texto con una relación de ancho de 2: 1. Esto tiene mucho sentido porque usamos las clases. ocho y cuatro, que también tienen una relación 2: 1. Cuando esto realmente hace clic en tu cerebro, se convierte en un concepto poderoso porque de repente puedes sacar casi cualquier diseño que quieras con solo unos pocos nombres de clase simples.
Tenga en cuenta que no tiene que rellenar las doce columnas. Usa el? Fin? clase si desea que un div sea el último en una fila que no abarque doce columnas.
Ir más lejos
Usando los principios que acabamos de aprender, podemos lograr todo tipo de diseños diferentes. Digamos que queríamos una fila dividida en cuatro secciones iguales. Todo lo que tenemos que hacer es usar los? Tres? clase.
Por ahora, deberías entender cómo funciona esto. Si tienes la habilidad matemática para dividir las cosas en doce, entonces puedes usar este marco. Así que podemos ver cómo funciona esto en una escala más grande, saltemos a un diseño de página completo y complejo.
No deje que este gran trozo de código lo intimide, utiliza los mismos principios que hemos estado usando en los ejemplos más pequeños.
Esto creará una división que abarca seis columnas y la centrará en la página. Si lanzáramos una regla horizontal aquí, tendríamos una pequeña línea divisoria centrada en seis columnas.
Además de centrar divs, también puede desplazarlos y reorganizarlos. Para compensar un div, use "offset-by" Entonces, ¿compensado por uno? lo compensará con una ranura y? offset-by-two ?, bueno, obtendrás el punto.
Aquí puede ver que los números de clase solo suman hasta diez, lo que deja dos lugares a la izquierda. Esto cuenta con un desplazamiento de dos columnas. Aquí está el resultado.
Para reorganizar los divs de forma diferente en la salida de la que aparecen en el orden de origen, se usan clases de inserción y extracción, similares a las del antiguo sistema de cuadrícula 960.
Ahora mira el resultado. Aunque los tres? ¿Columna viene antes de las nueve? En la columna de la fuente, la vista previa en vivo muestra el reverso de esto.
La lógica detrás de esto es usualmente relacionada con SEO. Digamos que deseaba que el nombre de su compañía fuera un encabezado en medio de la página entre otras dos columnas, podría ser mejor para SEO si el nombre de la compañía es más alto en la jerarquía de origen.
Usando la cuadrícula móvil de cuatro columnas
De forma predeterminada, Foundation responde, pero el comportamiento de este aspecto del marco es muy simple. Volviendo a nuestra gran demostración en vivo en la sección "¿Yendo más lejos?" En la sección anterior, cuando la ventana gráfica se vuelve demasiado estrecha, todo se coloca en una cuadrícula de una sola columna:
Esto funciona, pero no es muy bonito ni robusto. Afortunadamente, hay una segunda cuadrícula a la que tiene acceso que se activa con la consulta de medios móviles. Esta cuadrícula es de cuatro columnas y utiliza las siguientes clases:
- móvil-uno
- móvil-dos
- móvil-tres
- cuatro móviles
Estas clases se implementan exactamente como las de la cuadrícula de tamaño completo. ¿Aplicando? ¿Móvil-tres? hará que un elemento abarque tres de las cuatro columnas disponibles en la red móvil. Con esto en mente, repasemos el diseño anterior: