La Grid
Crea poderosos diseños multi-dispositivo rápido y fácilmente con el grid de 12-columna. Si está familiarizado con los sistemas de la grid, usted se sentirá como en casa.
Los Fundamentos
La red se basa en dos elementos clave: filas y columnas. Filas crear un max-width y contener las columnas, las columnas de crear la estructura real. Para los diseños para que funcione correctamente, coloque siempre el contenido de la página dentro de una fila y una columna.
Lo que usted necesita saber es que las columnas no tienen un ancho fijo. Ellos pueden variar en función de la resolución de la pantalla, o el tamaño de la ventana. Diseñe teniendo esto en mente.
<div class="row">
<div class="eight columns">
Main content...
</div>
<div class="four columns">
Sidebar...
</div>
</div>
Detalles técnicos
La Grid de Foundation 3, como todo en Foundation 3, está construido con box-sizing: border-box, una potente propiedad CSS que indica al navegador que considere la frontera y el relleno, como parte de la anchura de un objeto y no como una adición. Esto nos permite construir la red sumamente sencilla.
Ahora, los gutters son creados simplemente con el padding de las columnas. Eso significa que las columnas tienen anchos simples, como el 25% o 50%. Ajustando el padding se ajusta a los gutters, y esto puede ser controlado ya sea a través de variables SCSS, el personalizador de descargas, o a través de la propia CSS.
Apoyo a la jerarquización
La grid permite la anidación hacia abajo tanto como guste, aunque en un momento determinado se obtendrá un resultado absurdo si anida demasiado. Puede utilizar esta anidación para crear diseños muy complejos, así como algunos otros trucos como el diseño del formulario o elementos visuales.
<Div class = "row" >
<Div class = "ocho columnas" >
<Div class = "row" >
<Div class = "seis columnas" >
Seis columnas (anidada)
</ Div>
<Div class = "seis columnas" >
Seis columnas (anidada)
</ Div>
</ Div>
</ Div>
</ Div>
Ejemplos
A continuación se muestra un ejemplo visible de la grid. Cada bloque tiene un tamaño de columna en función de las 12 columnas que se necesitan para llenar completamente cada fila, y donde se ven más gruesas de las fronteras es porque se están ejecutando dos columnas de unos contra otros.
La grid de Foundation 3 utiliza box-sizing: border-box en cada elemento, incluyendo la grid. Por lo tanto las propias columnas comprenden tanto el contenido como el padding, lo que crea las gutters.
Nota: Con el fin de evitar las diferentes conductas de los navegadores en cuestión al redondeo, Foundation va a hacer flotar la última columna en una fila alineandola a la derecha. Si la fila tiene un ancho que no deba cubrir 12 columnas se pueden etiquetar la última columna con class = "end" con el fin de que las columnas se alineen a la izquierda.
Offsets
Los offsets le permiten crear un espacio adicional entre las columnas en una fila. Los offsets van desde la columna uno hasta la columna once. Al igual que el resto de la grid son encajables.
Centrados en las columnas
Las columnas se colocan en el centro de la fila. Esto no centra su contenido, pero centra el elemento de la grid en sí. Esta es una manera conveniente para asegurarse de que un bloque se centra, incluso si cambia el número de columnas que contiene.
Nota: para que esto funcione, no puede haber ningún bloque de otra columna en la fila.
Source Ordering
A veces, dentro de la cuadrícula que desea que el orden de los espacios en la fila se muestren primero de derecha a izquierda para que cuando el sitio se muestre en una pantalla pequeña como la de un teléfono el primer elemento de la derecha se muestre por encima del elemento de la izquierda, en otras palabras los elemento fluyen hacia la izquierda, este efecto es apreciado en los teléfonos por el ancho que estos tienen, por otro lado en las tablets demás computadores se aprecia los elementos de derecha a izquierda
La sintaxis para lograr este resultado de empujar y tirar de dos a diez columnas, se añade directamente a las propias columnas.
<divclass="row">
<divclass="two columns push-ten">
.two.columns
</div>
<divclass="ten columns pull-two">
.ten.columns (last)
</div>
</div>
<divclass="row">
<divclass="seven columns push-five">
.seven.columns
</div>
<divclass="five columns pull-seven">
.five.columns (last)
</div>
</div>
Grid Móvil
La grid tiene dos modos de adaptación para las pantallas pequeñas, como los teléfonos.El primero no requiere ningún trabajo en absoluto - la grid se linealizar en un pequeño dispositivo ya que sus columnas se apilan verticalmente. Esto es útil para adaptarse rápidamente de un diseño de escritorio a un diseño de desplazamiento móvil sencillo. La otra opción es utilizar algunas clases simples de implementar una grid móvil de cuatro columnas.
Grid de cuatro columna móvil
Al crear su diseño si lo desea, puede adjuntar las clases que toman los elementos de la grid existente y adjuntarlos a una grid de teléfono de cuatro columnas.
<divclass="row display">
<divclass="three mobile-one columns">
.three.mobile-one.columns
</div>
<divclass="nine mobile-three columns">
.nine.mobile-three.columns
</div>
</div>
Source Ordering de móviles
Usted puede utilizar el mismo empuje y tire de las clases de estilo en la parrilla de la columna 4 del teléfono. La sintaxis incluye .pull-one-phone, .pull-two-phone, .pull-three-phone, así como .push-one-phone, .push-two-phone, .push-three.phone.
Block Grids
Block grids son
UL con los estilos de two-up, three-up, four-up y five-up. Estos son ideales para blocked-in contenido generado por una aplicación, ya que no requieren filas o incluso números de elementos para mostrarse correctamente.Por defecto, estos bloques se quedará en su N-up de configuración en los dispositivos móviles, pero usted puede agregar una clase de "móvil" para hacer que se ajusten en los teléfonos en colocando un elemento por línea, al igual que la grid.
