Foundation (framework)
Foundation es un framework de interfaz de usuario responsive. Foundation proporciona una cuadrícula responsive e incluye componentes de interfaz de usuario HTML y CSS, plantillas, y fragmentos de código, incluyendo tipografía, formularios, botones, barras de navegación y otros componentes de interfaz usuario, así como extensiones de JavaScript opcionales. Foundation está mantenida por zurb.com y es un proyecto de código abierto.
Origen
Foundation surge como un proyecto de ZURB para desarrollar código de interfaz de usuario más rápido y mejor. En octubre de 2011, ZURB liberó Foundation 2.0 como código abierto bajo licencia de MIT License.[1] En junio de 2012 ZURB liberó una actualización importante, Foundation 3.0.[2] En febrero de 2013 ZURB liberó otra actualización importante, Foundation 4.0.[3] En noviembre de 2013 ZURB liberó otra actualización importante, Foundation 5.0. El equipo está trabajando en la próxima versión de Foundation para Sitios la cual tendría que ser liberado en la primavera del 2015.
Foundation para Email fue publicado en septiembre del 2013.
Foundation para Aplicaciones fue publicado en diciembre del 2014.
Características
Foundation fue diseñado para y probado en numerosos dispositivos y navegadores. Es el primer framework mobile first responsive construido con Sass/SCSS dando buenas prácticas a diseñadores para el desarrollo rápido. El framework incluye los patrones necesarios más comunes para rápidamente maquetar un sitio responsive. A través del uso de Sass mixins, los componentes de Foundation son fácilmente estilizados y sencillos de extender.
Desde la versión 2.0 también soporta el diseño responsive.[4] Esto significa el diseño gráfico de las páginas webs se ajusta dinámicamente, teniendo en cuenta las características del dispositivo utilizado (PC, tableta, teléfono celular). Además, desde 4.0 ha tomado un enfoque mobile-first, diseñando y desarrollando para dispositivos móviles primero, y mejorando las páginas web y aplicaciones para pantallas más grandes.[5]
Foundation es código abierto y está disponible en Github. Los desarrolladores están animados para participar en el proyecto y hacer sus contribuciones propias a la plataforma.
Estructura y función
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. Los desarrolladores pueden adaptar el archivo de Foundation en sí, seleccionando los componentes que se desean utilizar en su proyecto.
Los ajustes son posibles a través de una hoja de estilos central de configuración. Cambios más profundos son posibles modificando las variables de Sass.
El uso del lenguaje de las 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 "Personaliza" en la documentación. Además, los desarrolladores utilizan un formulario para elegir los componentes deseados y ajustar, si fuera necesario, los valores de las distintas opciones a sus necesidades. El paquete posteriormente generado ya incluye la hoja de estilos CSS preconstruida.
Sistema de cuadrícula y diseño responsive
Foundation viene por defecto con un diseño de cuadrícula flexible de 940 píxeles de ancho. El conjunto de herramientas es totalmente responsive permitiendo hacer uso de diferentes resoluciones y tipos de dispositivos: teléfonos móviles, formato vertical y horizontal, tabletas y PC con una resolución baja y alta (pantalla ancha). Esto ajusta la anchura de las columnas automáticamente.
Entender la hoja de estilos CSS
Fundation ofrece un conjunto de hojas de estilo que proporcionan definiciones de estilo básicas para todos los componentes HTML clave. Estos proporcionan un navegador y todo un sistema uniforme, aspecto moderno para el formato de textos, tablas y elementos de formulario.
Componentes reutilizables
Además de los elementos HTML regulares, Fundation tiene otros elementos comunes de interfaz. Estos incluyen botones con funciones avanzadas (por ejemplo, agrupación de botones o botones con opción desplegable, listas de navegación y make lists, pestañas horizontales y verticales, la navegación, ruta de navegación, la paginación, etc.), etiquetas, capacidades tipográficas avanzadas y formato para los mensajes tales como advertencias.
Componentes de Javascript y plugins
Los componentes de JavaScript de Foundation 4 fueron trasladados desde la biblioteca de Javascript jQuery a Zepto, en una presunción de que esta alternativa físicamente más pequeña, pero compatible con la API de jQuery resultaría más rápida para el usuario. Sin embargo, Foundation 5 se trasladó de nuevo a la más reciente versión de JQuery-2. "jQuery 2.x tiene la misma API como jQuery 1.x, pero no es compatible con Internet Explorer 6, 7 u 8." el blog oficial Zurb explica, ¿Por qué dejamos caer Zepto?; y el escritor sin firma alega que el cambio hacia atrás se debió a problemas de compatibilidad con los esfuerzos personalizados; y que se encontró que el rendimiento en realidad no es tan bueno, en las pruebas de uso con el más reciente jQuery-2.
Los componentes Foundation jQuery proporcionan elementos de interfaz de usuario generales y extensiones de marca. La lista incluye: cuadro de diálogos, tooltips, carruseles, alertas, clearing, cookies, listas desplegables, formularios, joyride, magellan, órbita, placeholder, reveal, sección, barra superior, vídeos flexibles, y muchos otros.
Los plug-ins que utilizan jQuery puede ser instalados incorporándose en el framework Foundation para proporcionar funcionalidad avanzada en cualquier área de interfaz de usuario, incluyendo la animación y elementos "offcanvas" como menús deslizables.
Elementos JQuery como formularios tendrán que ser conectados a una infraestructura de backend (base de datos y scripts basados en servidor), utilizando herramientas y métodos fuera del framework Foundation con el fin de trabajar. Servicios externos como Mailchip todavía se instalan para cualquier página HTML estática, y no requieren de un home-rolled backend.
JQuery se ha convertido en una componente estándar reconocido de la evolución de la web. Wikipedia afirma que el 65% de los top 100 sitios de Javascript emplean la misma. Sí Javascript se considera el estándar para el trabajo de desarrollo frontend web, con HTML y CSS (por consenso general.)
Uso
Hay tres niveles de integración para Foundation: CSS, SASS, y Ruby on Rails con la Gema de Rails de Foundation.[6]
CSS
Para usar Foundation CSS, los paquetes por defecto o de CSS personalizado se pueden descargar desde la página de descarga e instalados en las carpetas del servidor web apropiados. Foundation está integrado entonces en el marco de página HTML.[7]
SASS
El instalador de Foundation SASS usas Ruby, NodeJS, y Git para instalar los fuentes de Fundation. Foundation entonces proporciona una CLI para modificar y compilar el código fuente a CSS para usarlo en el marco de página de HTML.[8]
Gema de Rails para Foundation
La gema de Rails para Foundation puede ser instalada agregando "gem 'fundation-rails'" a Rails Gemfile.[9]
Véase también
Referencias
- "Announcing Foundation by ZURB".
- "ZURB Launches Foundation 3 To Take On Twitter's Bootstrap Framework".
- "Responsive Design Framework Foundation 4 Goes Mobile-First, Switches From jQuery To Zepto".
- "A List Apart: Dive into Responsive Prototyping with Foundation".
- "Zurb releases Foundation 4, a mobile-first, ‘forward-thinking dev/designer’s dream’".
- Foundation Documentation el 28 de octubre de 2015 en Wayback Machine. on Thursday, April 30, 2015
- Foundation Getting Started el 29 de octubre de 2015 en Wayback Machine. on Thursday, April 30, 2015
- Foundation Getting Started el 31 de octubre de 2015 en Wayback Machine. on Thursday, April 30, 2015
- Foundation Getting Started el 27 de octubre de 2015 en Wayback Machine. on Thursday, April 30, 2015