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

Cómo elegir la cuadrícula de la fundación correcta

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Juan Pablo Diaz Cuartas (you can also view the original English article)

En el video de hoy vamos a hablar sobre los tres sistemas de cuadriculas que se encuentran actualmente en el marco de la Fundación ZURB. Más específicamente, examinaremos cuál deberíamos usar en diversas situaciones. ¡Comencemos!

Hemos creado una guía completa para ayudarlo a aprender Foundation, ya sea que recién esté comenzando o si desea explorar temas más avanzados, consulte Learn Foundation.

Elegir una cuadricula base

1. La cuadricula flotante 

La primera y más larga porción de las cuadriculas de la Fundación es la cuadrícula flotante. Como su nombre lo sugiere, usa columnas flotantes para crear diseños.

El marcado probablemente te sea familiar; usa la misma estructura de filas y columnas que se encuentra en otros sistemas:

2. La cuadricula flexible 

El segundo ejemplo se introdujo en Foundation 6 y se conoce con el nombre de "flex grid". Está alimentado por CSS flexbox, y aunque se comporta de manera muy similar a la red plana, tiene algunas características únicas, como la alineación vertical y horizontal, y el tamaño automático. 

El marcado es exactamente lo mismo que la cuadricula flotante; usted define filas y columnas, y usando clases especiales puede determinar el tamaño de esas columnas. Sin embargo, debido a que esta cuadricula está basada en flexbox, tenemos acceso a algunas capacidades más avanzadas. Autosizing es una de esas características; si dejamos fuera una clase de tamaño en una columna, se expandirá para llenar el espacio disponible:

Alternativamente, el uso de una clase de contracción reducirá la columna al tamaño mínimo que su contenido necesita:

Para ver más ejemplos, mira el video de arriba.

3.La cuadricula XY

Nuestro tercer ejemplo es la cuadrícula más reciente (y en mi opinión la más impresionante); la cuadricula XY , introducido en Foundation 6.4. Aunque también está siendo alimentado por flexbox, tiene algunas similitudes con la red flexible, pero también hay algunas diferencias importantes.

La primera diferencia significativa es que la cuadrícula XY puede representar elementos tanto horizontal como verticalmente.

La segunda diferencia es el marcado. Aquí definimos un elemento contenedor (ya sea con una clase de cuadricula-x o cuadricula-y) y luego lo llenamos con elementos de celda:

Por defecto, no hay ningún canal, por lo que todas las celdas estarán alineadas con las celdas circundantes. En cambio, definimos el margen en el elemento cuadricula-x: cuadricula-margen-x o cuadricula-relleno-x (reemplazando la x por una y si estamos tratando con una cuadricula vertical). Los valores que estos llevan se pueden establecer usando las variables Sass $ grid-margin-gutters y $ grid-padding-gutters, respectivamente.

¿Qué cuadricula de base debe elegir?

Al elegir qué cuadricula usar, la decisión debe tomarse en función de algunos factores.

  1. El soporte del navegador es el más importante, ya que flexbox no tiene soporte universal (IE es el navegador cuestionable en este caso). La cuadrícula flotante no se ve afectada por el soporte de flexbox en los navegadores.
  2. En segundo lugar, ¿necesitas diseño de cuadrícula vertical? Si es así, deberás buscar la cuadrícula XY.
  3. Por último, ¿qué tan importante es para usted la velocidad y el mantenimiento de la escritura del código? La cuadrícula XY utiliza una sintaxis mucho más simple que sus predecesores, por lo que será mucho más fácil trabajar con ella.

Para obtener más información, ¡consulta el video de más arriba o echa un vistazo a mis cursos más recientes!

Advertisement
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.