Foundation es un marco de interfaz de usuario receptivo y gratuito que proporciona una cuadrícula receptiva y componentes, plantillas y fragmentos de código de interfaz de usuario HTML y CSS , que incluyen tipografía, formularios, botones, navegación y otros elementos de la interfaz, así como funcionalidad opcional proporcionada por extensiones de JavaScript . Foundation es un proyecto de código abierto y anteriormente lo mantenía ZURB. Desde 2019, la Fundación es mantenida por voluntarios. [2]
Foundation surgió como un proyecto ZURB para desarrollar código front-end de manera más eficiente. En octubre de 2011, ZURB lanzó Foundation 2.0 como código abierto bajo la licencia MIT . [3] ZURB lanzó Foundation 3.0 en junio de 2012, [4] 4.0 en febrero de 2013, [5] 5.0 en noviembre de 2013 y 6.0 en noviembre de 2015. El equipo comenzó a trabajar en la próxima versión de Foundation for Sites 7, que probablemente elimine el soporte para navegadores más antiguos e implemente tecnologías más nuevas como flexbox o tal vez un sistema de cuadrícula calculado.
Foundation for Emails, anteriormente conocida como ZURB Ink, se lanzó en septiembre de 2013.
Foundation for Apps se lanzó en diciembre de 2014.
Foundation fue diseñado y probado en numerosos navegadores y dispositivos. Es un marco responsivo construido con Sass/SCSS . El marco incluye los patrones más comunes necesarios para crear un prototipo de un sitio responsivo.
Desde la versión 2.0 también soporta diseño responsivo . [6] Esto significa que el diseño gráfico de las páginas web se ajusta dinámicamente, teniendo en cuenta las características del dispositivo utilizado (PC, tableta, teléfono móvil). La versión 4.0 ha adoptado un enfoque centrado en los dispositivos móviles, diseñando y desarrollando primero para dispositivos móviles y mejorando las páginas web y aplicaciones para pantallas más grandes. [7]
Foundation es de código abierto y está disponible en GitHub . Se anima a los desarrolladores a participar en el proyecto y hacer sus propias contribuciones a la plataforma.
Foundation es modular y consiste esencialmente en una serie de hojas de estilo Sass que implementan los distintos componentes del conjunto de herramientas. Las hojas de estilo de los componentes se pueden incluir a través de Sass o personalizando la descarga inicial de Foundation. Los desarrolladores pueden adaptar el archivo Foundation, seleccionando los componentes que desean utilizar en su proyecto.
Foundation viene de serie con un diseño de cuadrícula (diseño gráfico) flexible y de 940 píxeles de ancho . El conjunto de herramientas es totalmente responsivo para utilizar diferentes resoluciones y tipos de dispositivos: teléfonos móviles, formato vertical y horizontal, tabletas y PC con baja y alta resolución (pantalla ancha). Esto ajusta el ancho de las columnas automáticamente.
Foundation proporciona un conjunto de hojas de estilo que proporcionan definiciones de estilo básicas para todos los componentes HTML clave. Estos proporcionan una apariencia moderna y uniforme para el navegador y todo el sistema para formatear texto, tablas y elementos de formulario. [8]
Además de los elementos HTML habituales, Foundation contiene otros elementos de interfaz de uso común. Estos incluyen botones con funciones avanzadas (por ejemplo, agrupación de botones o botones con opción desplegable, listas de creación y navegación, pestañas horizontales y verticales, navegación, navegación con ruta de navegación, paginación, etc.), etiquetas, capacidades tipográficas avanzadas y formato. para mensajes como advertencias.
Los componentes de JavaScript de Foundation 4 se trasladaron de la biblioteca jQuery JavaScript a Zepto, con la presunción de que la alternativa físicamente más pequeña, pero compatible con API, a JQuery resultaría más rápida para el usuario. Sin embargo, Foundation 5 volvió a la versión más reciente, JQuery-2. "jQuery 2.x tiene la misma API que jQuery 1.x, pero no es compatible con Internet Explorer 6, 7 u 8". el blog oficial de ZURB explica [9] y el escritor anónimo afirma que el cambio se debió a problemas de compatibilidad con esfuerzos personalizados; y se descubrió que el rendimiento no era tan bueno en las pruebas de uso con el nuevo jQuery-2.
Hay tres niveles de integración para Foundation: CSS, SASS y Ruby on Rails con Foundation Rails Gem. [10]
Para utilizar Foundation CSS, se pueden descargar paquetes CSS predeterminados o personalizados desde la página de descarga e instalarlos en las carpetas apropiadas del servidor web. Luego, Foundation se integra en el marcado de la página HTML. [11]
La instalación de Foundation Sass utiliza Ruby, Node.js y Git para instalar las fuentes de Foundation. Luego, Foundation proporciona una interfaz de línea de comandos para modificar y compilar el código fuente en CSS para usarlo en el marcado de páginas HTML. [12]
La gema Foundation Rails se puede instalar agregando "gem 'foundation-rails'" al Gemfile de la aplicación Rails. [13]