Foundation

Webinar Desarrollo web 2022

Un poco de Historia
ZURB

ZURB es una agencia de diseño estadounidense que ayuda a las empresas a crear sus páginas
web y servicios online.

En el 2008 deciden tomar todos sus proyectos y elegir los mejores diseños y fragmentos de
código para crear un Framework para la creación de prototipos y acortar el tiempo de desarrollo

Así nació Foundation en el 2011 como un proyecto Open Source

Foundation

Foundation es un marco para diseño frontend con una gran variedad de HTML y CSS.

Cuenta con extensiones opcionales para JavaScript para aumentar su efectividad.

Es un Framework con una filosofía “Mobile First” la cual guía a hacer el desarrollo para
dispositivos móviles primero y conforme se avanza en el proyecto se implementan las interfaces
con más resolución y espacio en pantalla.

Cuenta con gran cantidad de fragmentos de código, componentes y plantillas para acelerar el
proceso de desarrollo sin sacrificar el apartado visual.
Importancia

Foundation al tener un enfoque “Mobile First” es muy útil para desarrollar aplicaciones móviles
ya sea desde el sitio web o utilizándolo como tecnología para las PWA.

Es uno de los frameworks más utilizados para el diseño FrontEnd y esto se traduce en un
requisito en varias ofertas laborales ya que también es utilizado por grandes empresas como:

● Adobe
● Disney
● Amazon
● Cisco
● Mozilla
● Entre otros

Si se quiere diseñar un sitio web altamente responsivo, Foundation es un candidato a tener en

cuenta.
Importancia

Foundation es modular y consiste esencialmente en una serie de hojas de estilo Sass que
implementan los distintos componentes de la caja de herramientas. Las hojas de estilo de
componentes pueden ser incluidas a través de Sass o mediante la personalización de la
descarga inicial de Foundation.
Características

● Formularios mejorados: Podemos crear formularios atractivos con

diversas disposiciones de campos y etiquetas.
● Grilla: Podemos dividir el contenido en un conjunto de divs, que, en el
caso de estar navegando desde un dispositivo móvil, podrán apilarse
para ocupar menos espacio horizontal.
● Semántica: Gracias al uso de mixins de Sass, un preprocesador de CSS,
podemos utilizar los componentes ya implementados de Foundation
pero utilizando nuestros propios nombres de clases. Así, cada porción
de código tendrá un significado reconocible.
● Personalización: Tenemos la opción de descargar sólo las
características de Foundation que nos interesen, de manera de utilizar
una versión lo más liviana posible.
Ventajas

● El hecho de tener acceso a la variante Sass de Foundation framework conlleva las

siguientes ventajas:

● Una sintaxis simplificada (Sass o SCSS) que facilita la escritura de hojas de estilo.
● La posibilidad de definir plantillas (mixins) para almacenar centralmente patrones
repetitivos e incluirlos donde se desee.

● El uso de variables y funciones para modificar los colores, el espaciado, las fuentes, etc.
Desventajas

●Demanda gran inversión de tiempo y de trabajo.

●La falta de soporte para las versiones más antiguas.
●Se pierde la libertad de codificación.
●El código no es semántico por lo que será difícil de implementar.
Elementos de
Foundation
Framework
∙ XY Grid
La estructura de la cuadrícula XY utiliza .grid-x, .grid-y y .cell como base. Sin definir un tipo de canaleta, las celdas
simplemente dividirán el espacio sin canaletas.

11
∙ Float Grid
Comience agregando un elemento con una clase de .row. Esto creará un bloque horizontal para contener
columnas verticales. Luego agregue elementos con una clase .column dentro de esa fila. Especifique los anchos
de cada columna con las clases .small-#, .medium-# y .large-#.
∙ Flex Grid
La estructura de la rejilla flexible es idéntica a la de la rejilla flotante. Las filas usan la clase .row y las columnas
usan la clase .column (o .columns). El tamaño básico basado en porcentajes también se puede realizar utilizando
las mismas clases de cuadrícula a las que está acostumbrado: .small-6, .medium-12, etc.
∙ Forms
La creación de un formulario en Foundation está diseñada para ser fácil pero extremadamente flexible. Los formularios se
crean con una combinación de elementos de formulario estándar, así como filas y columnas de cuadrícula o celdas.
Utiliza entradas de texto como:
text, date, datetime, datetime-local, email, month, number, password, search, tel, time, url, and week.
∙ Button
Se puede crear un botón básico con un marcado mínimo. Debido a que los botones se pueden usar para muchos
propósitos, es importante usar la etiqueta correcta.
Utilice la etiqueta <a> si el botón es un enlace a otra página o un enlace a un ancla dentro de una página.
Generalmente, los anclajes no requieren JavaScript para funcionar.
Use la etiqueta <button> si el botón realiza una acción que cambia algo en la página actual. Los elementos
<button> casi siempre requieren JavaScript para funcionar.
∙ Menú
Todas las versiones del menú son un <ul> lleno de elementos <li> que contienen enlaces. De forma
predeterminada, un menú está orientado horizontalmente.
Agregue la clase .vertical a un menú para cambiar su orientación.
∙ Menú responsivo
El menú tiene algunas clases de CSS receptivas incorporadas, que le permiten reorientar un menú en diferentes
tamaños de pantalla.
El menú se puede ampliar con uno de los tres complementos diferentes: menú desplegable o menú
acordeón. Sin embargo, estos patrones tienden a funcionar mejor en tamaños de pantalla específicos.
 Foundation for Sites

Frameworks Foundation for E-mails

Foundation for Apps

 Descarga Manual

Foundation CLI

git clone
https://github.com/foundation/foundatio
n-sites-template basic-project
Formas de Instalar cd basic-project

yarn install

Manejador de paquetes

npm install foundation-sites

 front-end responsivos.

¿Para quién está Priorizan el “mobile-first”.

destinado Foundation?
Hacer uso de prototipos.
¿Quienes utilizan Foundation?