Fundación (marco)

Foundation es un framework front-end responsivo y gratuito que ofrece una cuadrícula responsiva y componentes de interfaz de usuario HTML y CSS , plantillas y fragmentos de código, que incluyen tipografía, formularios, botones, navegación y otros elementos de 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, Foundation ha sido mantenido por voluntarios. ^[2]

Foundation surgió como un proyecto de 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 muy probablemente dejará de brindar soporte para navegadores más antiguos e implementará tecnologías más nuevas como flexbox o tal vez un sistema de cuadrícula calculada.

Foundation for Emails, anteriormente conocida como ZURB Ink, se lanzó en septiembre de 2013.

La Fundación para Aplicaciones se lanzó en diciembre de 2014.

Foundation fue diseñado y probado en numerosos navegadores y dispositivos. Es un marco responsivo creado con Sass/SCSS . El marco incluye los patrones más comunes necesarios para crear un prototipo de sitio responsivo.

Desde la versión 2.0 también se admite el diseño responsive . ^[6] Esto significa que el diseño gráfico de las páginas web se ajusta de forma dinámica, teniendo en cuenta las características del dispositivo utilizado (PC, tableta, teléfono móvil). La versión 4.0 ha adoptado un enfoque mobile-first, 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 a realizar sus propias contribuciones a la plataforma.

Foundation es modular y consiste básicamente en una serie de hojas de estilo Sass que implementan los distintos componentes del kit 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 en sí, seleccionando los componentes que desean utilizar en su proyecto.

Foundation viene de serie con un diseño de cuadrícula flexible de 940 píxeles de ancho (diseño gráfico) . El kit de herramientas es totalmente adaptable para utilizar distintas resoluciones y tipos de dispositivos: teléfonos móviles, formato vertical y horizontal, tabletas y PC con resolución baja y alta (pantalla panorámica). Esto ajusta el ancho de las columnas automáticamente.

Foundation ofrece un conjunto de hojas de estilo que brindan definiciones de estilo básicas para todos los componentes HTML clave. Estas brindan una apariencia moderna y uniforme para el navegador y el sistema para dar formato a texto, tablas y elementos de formulario. ^[8]

Además de los elementos HTML habituales, Foundation contiene otros elementos de interfaz de uso común, como botones con funciones avanzadas (por ejemplo, agrupación de botones o botones con opción de menú 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, funciones tipográficas avanzadas y formato para mensajes como advertencias.

Los componentes JavaScript de Foundation 4 se trasladaron de la biblioteca jQuery JavaScript a Zepto, con la suposición de que la alternativa a JQuery, físicamente más pequeña pero compatible con API, 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", explica el blog oficial de ZURB ^[9] y el autor anónimo afirma que el cambio se debió a problemas de compatibilidad con los esfuerzos personalizados; y que se descubrió que el rendimiento no era tan bueno en las pruebas de uso con la versión más reciente 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 descargas e instalarlos en las carpetas del servidor web correspondientes. 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 la fuente en CSS para su uso 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]

• Sitio web oficial
• Documentación oficial de los componentes de JavaScript