Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Foundation for Apps

Foundation para principiantes: El sistema de cuadrícula

by
Length:MediumLanguages:
This post is part of a series called Foundation for Beginners.
Foundation for Beginners: Getting Started
Foundation for Beginners: Navigation

Spanish (Español) translation by Steven (you can also view the original English article)

En la parte inicial de esta sesión sobre el Framework Foundation, echamos un vistazo a cómo podrías hacer uso de este framework, qué puedes hacer y cómo puedes diseñar una construcción personalizada. En esta parte veremos en detalle el sistema de cuadrícula, mostrando algunos ejemplos a medida que avanzamos. También cambiaremos un poco las cosas y echaremos un vistazo al complemento Orbit Slider de JavaScript; un gran control deslizante para mostrar todo tipo de contenido.

foundation-2-1

El sistema de cuadrícula

Solo usamos un punto de interrupción importante para la cuadrícula en Foundation y así cambiar los diseños de las pantallas de más de 768px de ancho.

Foundation es un framework moderno que favorece el enfoque del diseño en móviles primero. Esto significa que el código mínimo y los recursos se cargan primero para ayudar a la velocidad de procesamiento de la página. Como ocurre con la mayoría de los frameworks modernos, Foundation es completamente adaptable a todas las pantallas. A diferencia de la mayoría, solo hace uso de un punto de quiebre para el cambio estructural. El punto de interrupción define el ancho de la ventana gráfica en la que se pone en acción la cuadrícula grande, esto sucede a los 768px.

El sistema de cuadrícula en sí tiene tres partes; la cuadrícula de escritorio, la cuadrícula móvil y la cuadrícula de tipo bloque. Y dado que Foundation es "móviles primero", comencemos con la cuadrícula móvil.


La cuadrícula pequeña

foundation-2-2

El código anterior se compone de tres clases importantes; la primera es la clase "row" que contiene nuestras columnas, de la misma manera que una fila en una hoja de cálculo contiene columnas de celdas. En esta demostración, usamos una cuadrícula de doce columnas, por lo que doce es el número máximo de columnas que podemos tener en una fila. Dicho esto, si necesitas más, Foundation admite hasta dieciséis columnas que puedes seleccionar en el formulario de compilación personalizado.

La clase que define las columnas aquí es small-12, cambiando el número en esta clase se define el ancho de dicha columna. Sin embargo, el uso de "small-12" solo define el ancho. Para crear realmente una columna, necesitamos emparejarla con la clase "columns". Estas tres clases son la base del sistema de cuadrícula.

Simplemente, el marcado anterior dicta que hay una fila, con un div que ocupará doce columnas de espacio (el 100% del ancho). Dentro de las doce columnas está nuestro contenido. Echemos un vistazo a una versión un poco más compleja.

En este código podemos ver que hay dos divs con la clase "columns". Cada uno se combina con una clase (como "small-4") para dictar el tamaño específico. Foundation luego alinea estas columnas una al lado de la otra en lugar de una encima de la otra, como lo harían en el flujo normal de documentos HTML. Nuestras dos columnas ocupan el ancho de cuatro columnas y ocho columnas respectivamente. Los dos suman un ancho completo de doce columnas; “small-4” ocupa alrededor del 33,3% y “small-8” ocupa aproximadamente el 66,6% del ancho del body.

Lo que es importante a tener en cuenta aquí es que estos divs encajan prácticamente de manera infinita. Esto ofrece una gran flexibilidad, por ejemplo:

Puedes ver que hemos agregado algo de contenido a la barra lateral usando una fila, en una columna, en una fila, esta vez haciendo uso de tres columnas de diferentes tamaños. Muy genial, ¿no?. Bueno, probablemente es hora de incluir un código de pantalla grande para aprovechar al máximo el sistema de cuadrícula.


La cuadrícula grande

foundation-2-3

Aquí hemos agregado una clase adicional a cada una de nuestras columnas large-3 y large-9. Esto le dice a Foundation que cuando el sitio se ve en una pantalla más grande, debe cambiar el ancho de la barra lateral de small-4 con 33,3% a large-3, lo que equivale a alrededor del 25% del ancho del body. Así, nuestra área principal puede crecer, dando más espacio al contenido. Este es un ejemplo simplista pero resulta muy útil cuando se trata de reorganizar tu diseño para diferentes tamaños de pantalla.

Mientras miramos el sistema de cuadrícula, vale la pena mencionar que al usar large-centered y small-centered puedes centrar una columna rápida y fácilmente, aunque solo puedes hacer esto si hay una columna en la fila. También puedes manipular el orden de los elementos utilizando las clases push y pull.

Esto toma el segundo div, que normalmente se mostraría después del primero, y lo arrastra hacia el frente mientras empuja el primero para que aparezca después. Por lo tanto, puedes tener una lista a la izquierda y el contenido a la derecha en pantallas grandes, pero empújala hacia abajo en pantallas pequeñas.


La cuadrícula de tipo bloque

foundation-2-4

Habiendo cubierto los entresijos de los sistemas de cuadrícula, podemos mirar la cuadrícula de bloques que se usa para mantener los elementos de la lista espaciados uniformemente, sin importar el tamaño de la pantalla. Son ideales para contenido bloqueado (como el generado por una aplicación) ya que no requieren filas o incluso columnas para mostrarse correctamente. Si tu diseño está destinado a ser el mismo en el escritorio y en el móvil, solo necesitas usar las clases small-block-grid-#.

Este es también el caso de las cuadrículas de las que hablamos anteriormente. En lugar de usar small-12 y large-12, solo necesitarías small-12. Bastante fácil a decir verdad.

Eso concluye los sistemas de cuadrícula que Foundation tiene para ofrecer en sus formas básicas. Recuerda, la cuadrícula pequeña cambiará a la cuadrícula grande una vez que el ancho de la pantalla alcance el punto de interrupción principal. Utiliza la cuadrícula pequeña para apuntar a dispositivos más pequeños y la grande para lo que normalmente son computadoras de escritorio y pantallas más grandes.


El complemento Orbit

Vamos a cambiar un poco las cosas ahora, presentando uno de los muchos complementos útiles de Foundation; Orbit.

foundation-2-5

Este práctico complemento se puede utilizar como control deslizante, lo que te permite deslizar imágenes, videos o contenido HTML normal. Con un marcado simple, es fácil de manejar y es un verdadero placer para la vista cuando se usa correctamente.

Orbit usa una estructura de lista; cada elemento de la lista se muestra como una diapositiva. Aquí, junto con las etiquetas de imagen normales, los elementos de nuestra lista contienen un div con la clase orbit-caption que nos permite colocar un título en cada imagen. Orbit toma este código y agrega más marcado para que todo funcione. También incluye un montón de opciones para mostrar paginación, controles e incluso un temporizador.

Echa un vistazo a algunos ejemplos de parámetros que puedes cambiar en Orbit:

Estos incluyen velocidades, paginación de viñetas y la opción de apilar en pantallas pequeñas. Es importante tener en cuenta que estos se transmiten en la inicialización, por lo que deberás tomar tu $(document).foundation(); estándar, que se encuentra en la parte inferior del index.html incluido en la descarga:

y después pasar las opciones de Orbit.

Además de las opciones que se muestran aquí, puedes agregar clases a todos los elementos producidos por el complemento. Estas opciones adicionales (y más) se pueden encontrar en la documentación de Foundation.

Nota: La descarga de Foundation incluirá todos los bits y piezas de JavaScript que elegiste, compilados en un archivo minificado. Se hace referencia a esto en la parte inferior de index.html, pero también puedes optar por descomentar archivos JavaScript individuales si lo prefieres:


Herramienta útil

¿Quieres jugar con Foundation ahora mismo sin descargarlo? ¿O quizás deseas un entorno limpio para probar nuevas ideas? Entonces echa un vistazo a este práctico jsfiddle. Utiliza la última versión de Foundation e incluye todos los componentes.


A continuación

En esta parte de la guía Foundation cubrimos los sistemas de cuadrículas y hablamos brevemente sobre el complemento Orbit. En la próxima entrega veremos la navegación y el complemento de la sección, junto con otra herramienta útil.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.