Hace un par de semanas, el famoso Marco de la Fundación lanzó su cuarta versión. Si nunca ha oído hablar de Foundation, lo guiaremos a través del uso de este marco receptivo.

Dado que la versión 3 de Foundation se desarrolló desde cero utilizando SASS, un preprocesador de CSS que ayuda a escribir CSS más eficientes, esta nueva versión también es amigable para dispositivos móviles y brinda muchas características en su cuadrícula que usted no usa. obtener de otros marcos.

Sumérgete en Foundation y ve por qué es tan popular ...

La cuadrícula

Foundation utiliza una rejilla apilable de 12 columnas que se adaptará a cualquier pantalla de tamaño. Si ya ha utilizado las rejillas, todo esto le resultará muy familiar. Todos los divs en Foundation usan tamaño de caja: border-box para que los bordes y el relleno no afecten el ancho y alto del elemento, lo que hace que las matemáticas sean un poco más fáciles para nosotros. Pero lo sorprendente de la grilla de la Fundación es que en realidad obtienes 2 cuadrículas, una cuadrícula grande para cuando la pantalla tiene más de 768px de ancho y una cuadrícula más pequeña que puedes controlar con la misma sencillez. Para ello, Foundation utiliza las clases small- # y large- #, así:

Lorem Ipsum
Lorem Ipsum
Lorem Ipsum

En este código creamos una fila en la que hay 3 divs que tienen exactamente el mismo ancho cuando el navegador es más ancho que 768px, pero cuando es más pequeño, como puede ver por esa pequeña clase en los divs, el último ocupará la mitad mientras que los otros dos ocuparán el 25% cada uno, esto le da un inmenso control de cómo se verá nuestro sitio web en todas las pantallas.

Foundation también le permite compensar una columna, lo que significa que puede tener una fila con 2 columnas que tienen solo 3 columnas de ancho, pero puede compensar la segunda que flota a la derecha y para hacer eso usamos el tamaño grande. clase de compensación o la clase de compensación pequeña:

3, offset 6

Cuadrícula

La cuadrícula de bloque es simplemente un pequeño extra, es una forma de dividir el contenido de una lista dentro de la cuadrícula, es útil cuando desea que esta parte particular de su sitio web permanezca espaciada uniformemente, sin importar el tamaño del navegador. Este tipo de cuadrícula usa las clases cuadrícula pequeña y cuadrícula grande, si solo establece la primera, la cuadrícula mantendrá el espaciado deseado sin importar cuál sea la ventana gráfica, pero si solo utiliza el bloque grande. grid class cuando la ventana gráfica alcanza el punto de interrupción de 768px, los elementos de la grilla se apilarán uno encima del otro, siempre puede tener más control usando estas dos clases, de esta forma:

Al usar esto, las imágenes estarán espaciadas uniformemente sin importar el tamaño. Cuando la ventana gráfica es más grande que 768px, solo ocuparán una fila, y cuando sea más pequeña ocuparán dos filas con 2 imágenes cada una.

La navegación principal

Ahora que hemos cubierto la grilla en Foundation y que le da mucho control en todos los entornos, hablaremos sobre algo que casi siempre usaremos en nuestros sitios: una barra de navegación superior. Y, por supuesto, esta navegación también puede ser flexible con poco o ningún trabajo utilizando este marco. Para crear una navegación sencilla y sensible utilizando Foundation, utiliza:

Este bit de HTML crea una barra de navegación simple que tiene el título del sitio web a la izquierda y luego a la derecha tiene cuatro elementos de menú. También tenga en cuenta que cuando la ventana gráfica es más pequeña que 768px, este menú se reemplazará por un icono de lista que haga que este menú responda. Si desea que esta cuadrícula tenga su posición fija mientras se desplaza hacia abajo de la página, solo tiene que ajustarla en un div con una clase de arreglos fijos. Para agregar menús desplegables a su navegación, solo tiene que agregar algo como esto al lugar donde desea su menú desplegable:

#">  Submenú, elemento 1
Submenú, elemento 1
Submenú, elemento 3

También existe la posibilidad de agregar un divisor a su elemento de la lista agregando una pequeña línea vertical gris, para hacer eso solo necesita colocar un elemento de la lista con la clase de divisor entre los dos elementos de la lista que desea dividir.

Botones

Ningún marco estaría completo sin algunos botones predefinidos y Foundation tiene en realidad más de un estilo de botón predefinido, tiene el predeterminado que usa un color azul y luego agrega el éxito, la alerta y los estilos secundarios. Al agregar la clase de radio, le da a este botón un poco de radio de borde y al darle la clase de ronda , hace que el botón sea casi completamente redondo. También puede agregar la clase deshabilitada al botón y hay 4 clases de tamaño para que el botón sea tan grande como lo necesite.

Botón predeterminadoBotón minúsculoBotón pequeñoBotón grandeBotón secundarioBotón de éxitoBotón de alertaBotón de radioBotón redondoBotón deshabilitado

Para crear un simple botón desplegable solo necesita agregar la clase desplegable después de la última clase, de esta manera:

  h1.subheader 
  h1.  Menor 
  Artículo de lista 
  Artículo de lista 
  Enlace 1
Enlace 2

Como puede ver, cuando se trata de tipografía, Foundation nos brinda cierta ayuda básica y luego algunas clases adicionales para satisfacer todas nuestras necesidades.

Otros componentes

Si esta demostración del marco de Foundation le ha abierto el apetito para obtener más información y comenzar a construir con Foundation, debería echarle un vistazo a la documentación porque Foundation también ofrece componentes CSS adicionales como:

• Cajas de alerta
• Paneles
• Tablas de precios
• Barras de progreso
• Mesas
• Miniaturas
• Flex Video

Y también algunos JavaScript auxiliares como:

• Claro
• Desplegable
• Excursión en coche
• Magallanes
• Orbita
• Revelar
• Sección
• Información sobre herramientas

Como puede ver, hay muchas bases para explorar y le recomiendo que revise todas sus propiedades de CSS y JavaScript.

Conclusión

Cubrimos lo suficiente en este artículo para ver cómo Foundation puede ayudar a construir sitios web más rápidos y con mayor capacidad de respuesta. Con su cuadrícula, usted tiene mucho más control sobre la estructura de su sitio web que cuando usa una red flexible normal y Foundation también le brinda muchos ayudantes. para crear tu sitio web Espero que este artículo te haya dado la fuerza para aprender y utilizar Foundation para tu próximo proyecto.

¿Has usado Foundation para un proyecto? ¿Qué características le parecieron más útiles? Háganos saber en los comentarios.