 | Este artículo puede ser demasiado técnico para que la mayoría de los lectores lo comprendan . ( Marzo de 2017 ) ( Obtenga información sobre cómo y cuándo eliminar este mensaje de plantilla ) |
| Desarrollador (es) | ZURB |
|---|---|
| Versión inicial | Septiembre de 2011 |
| Lanzamiento estable | 6.6.3 / 8 de abril de 2020 [1] |
| Repositorio | Repositorio de la Fundación |
| Escrito en | HTML , CSS , Sass y JavaScript |
| Tipo | desarrollo web |
| Licencia | Licencia MIT |
| Sitio web | obtener |
Foundation es un marco front-end receptivo . Foundation proporciona una cuadrícula receptiva 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 la interfaz, así como funcionalidad opcional proporcionada por las extensiones de JavaScript . Foundation es un proyecto de código abierto y anteriormente era mantenido por ZURB. Desde 2019, la Fundación ha sido mantenida por voluntarios. [2]
Origen [ editar ]
Foundation surgió como un proyecto ZURB para desarrollar código front-end más rápido y mejor. 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 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.
Funciones [ editar ]
 | Esta sección contiene una redacción que promueve el tema de manera subjetiva sin impartir información real . ( Abril de 2021 ) ( Obtenga información sobre cómo y cuándo eliminar este mensaje de plantilla ) |
Foundation fue diseñado y probado en numerosos navegadores y dispositivos. Es un marco receptivo construido con Sass / SCSS. El marco incluye los patrones más comunes necesarios para crear un prototipo de un sitio receptivo. Mediante el uso de mixins Sass, los componentes de la Fundación se pueden diseñar y extender fácilmente. [ prosa de pavo real ]
Desde la versión 2.0, también es compatible con el diseño receptivo . [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). Además, desde 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 las 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.
Estructura y función [ editar ]
Esta sección no cita ninguna fuente . ( Agosto de 2012 ) ( Obtenga información sobre cómo y cuándo eliminar este mensaje de plantilla ) |
Foundation es modular y consiste esencialmente en una serie de hojas de estilo Sass que implementan los diversos 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.
Los ajustes son posibles a través de una hoja de estilo de configuración central. Es posible realizar cambios más profundos cambiando las variables de Sass.
El uso del lenguaje de hojas de estilo Sass permite el uso de variables, funciones y operadores, selectores anidados, así como los llamados mixins.
Desde la versión 3.0, la configuración de Foundation también tiene una opción especial "Personalizar" en la documentación. Además, los desarrolladores utilizan un formulario para elegir los componentes deseados y ajustar, si es necesario, los valores de varias opciones a sus necesidades. El paquete generado posteriormente ya incluye la hoja de estilo CSS prediseñada.
Sistema de cuadrícula y diseño receptivo [ editar ]
Foundation viene de serie con un diseño de cuadrícula flexible de 940 píxeles de ancho. El kit de herramientas es totalmente sensible para hacer uso de diferentes resoluciones y tipos de dispositivos: teléfonos móviles, formato vertical y horizontal, tabletas y PC con baja y alta resolución (pantalla panorámica). Esto ajusta el ancho de las columnas automáticamente.
Comprensión de la hoja de estilo CSS [ editar ]
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, uniforme en todo el sistema y del navegador para formatear texto, tablas y elementos de formulario.
Componentes reutilizables [ editar ]
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 marcas y de 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.
Componentes y complementos de JavaScript [ editar ]
Página principal de documentación oficial de la Fundación Zurb para JavaScript
Los componentes 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, [8] y el escritor sin firmar afirma que el cambio se debió a problemas de compatibilidad con esfuerzos personalizados; y se encontró que el rendimiento no era tan bueno, en las pruebas de uso con el jQuery-2 más nuevo.
Los componentes de Foundation jQuery proporcionan elementos generales de interfaz de usuario y extensiones de marca. La lista incluye: diálogo, información sobre herramientas, carruseles, alertas, borrado, cookies, menú desplegable, formularios, joyride, magellan, órbita, marcador de posición, revelación, sección, barra superior, video flexible y muchos otros. Se pueden instalar complementos de jQuery adicionales en el marco Foundation para proporcionar funcionalidad avanzada en cualquier área de la interfaz de usuario, incluida la animación y elementos "fuera del lienzo", como menús deslizantes.
Utilice [ editar ]
Hay tres niveles de integración para Foundation: CSS, SASS y Ruby on Rails con Foundation Rails Gem. [9]
CSS [ editar ]
Para utilizar Foundation CSS, se pueden descargar paquetes de CSS predeterminados o personalizados desde la página de descarga e instalarlos en las carpetas del servidor web correspondientes. Luego, Foundation se integra en el marcado de la página HTML. [10]
SASS [ editar ]
La instalación de Foundation SASS usa Ruby, Node.js y Git para instalar las fuentes de Foundation. Foundation luego proporciona una interfaz de línea de comandos para modificar y compilar el código fuente en CSS para su uso en el marcado de páginas HTML. [11]
Gema de rieles de fundación [ editar ]
La gema Foundation Rails se puede instalar agregando "gem 'foundation-rails'" al Gemfile de la aplicación Rails. [12]
Referencias [ editar ]
- ^ "Lanzamientos · fundación / sitios de fundación · GitHub" . GitHub . Consultado el 24 de abril de 2020 . CS1 maint: parámetro desalentado ( enlace )
- ^ "¿Está la Fundación Zurb en desarrollo activo?" . Consultado el 21 de noviembre de 2019 . CS1 maint: parámetro desalentado ( enlace )
- ^ "Anunciando la Fundación por ZURB" . Consultado el 22 de agosto de 2012 . CS1 maint: parámetro desalentado ( enlace )
- ^ "ZURB lanza Foundation 3 para asumir el marco Bootstrap de Twitter" . Consultado el 22 de agosto de 2012 . CS1 maint: parámetro desalentado ( enlace )
- ^ "Responsive Design Framework Foundation 4 va primero en dispositivos móviles, cambia de jQuery a Zepto" . Consultado el 28 de febrero de 2013 . CS1 maint: parámetro desalentado ( enlace )
- ^ "Una lista aparte: sumergirse en la creación de prototipos receptivos con Foundation" . Consultado el 22 de agosto de 2012 . CS1 maint: parámetro desalentado ( enlace )
- ^ "Zurb lanza Foundation 4, un ' sueño de diseñador / desarrollador con visión de futuro' para dispositivos móviles ' " . Consultado el 28 de febrero de 2013 . CS1 maint: parámetro desalentado ( enlace )
- ^ "Por qué dejamos caer Zepto" .
- ^ Documentación de la Fundación el jueves 30 de abril de 2015
- ^ Fundación Getting Started el jueves 30 de abril de 2015
- ^ Fundación Getting Started el jueves 30 de abril de 2015
- ^ Fundación Getting Started el jueves 30 de abril de 2015
Enlaces externos [ editar ]
- Página web oficial
