El Origen del Framework: Foundation

Foundation comienza como  un proyecto de ZURB para desarrollar código de interfaz de usuario más confiable y veloz. En octubre 2011, ZURB ofreció Foundation 2.0 como open source bajo licencia de MIT License. En junio 2012 ZURB ofreció una revisión  importante, Foundation 3.0. En febrero 2013 ZURB liberó otra actualización importante, Foundation 4.0. En noviembre 2013 ZURB liberó otra actualización importante, Foundation 5.0. Actualmente e está revisando la próxima versión de Foundation prevista para primavera de 2.015, foundation para Email fue liberado en septiembre del 2013. Foundation para Aplicaciones fue liberado en diciembre del 2014.

Algunas Características

Foundation se pensó y fue probado para numerosos dispositivos y navegadores. Tiene el honor de ser el precursor framework mobile first responsive basado en Sass/SCSS reportando buenas sensacionesa los desarrolladores para el diseño rápido. El framework añade las estructuras  necesarias más normales, maquetando un sitio responsive rápidamente. Mediante Sass mixins, las bases de Foundation son sumamente sencillos de entender.

A partir de la versión 2.0 se soporta el diseño responsive.con la consecuencia de que el diseño gráfico de las páginas webs se ajusta de forma dinámica, en función de las  características del terminal de uso (PC, tablet, mobile phone). Será, desde 4.0 cuando tomó un enfoque mobile-first, diseñando y desarrollando en primer lugar para terminales móviles, mejorando los sitios web y apps para pantallas más grandes.

Foundation es open source y está disponible en Github. Las especiales características del proyecto animan a los desarrolladores a colaborar y a contribuir a la mejora continua de la plataforma.

Estructura y funciones

Foundation es modular lo que conlleva que sean básicamente una serie de hojas de estilo Sass que implementan los diferentes componentes de la caja de herramientas. Estas hojas de estilo pueden ser añadidas a través de Sass o a través de la personalización de la primera descarga de Foundation.  De esta manera los desarrolladores adaptan el archivo de Foundation en sí, eligiendo los componentes que se desean utilizar en su proyecto.

Esta selección de componentes se hace mediante una hoja de estilos central de configuración. Si optamos por realizar cambios más profundos habría que modificar las variables de Sass.

Las variables del  lenguaje de las hojas de estilo Sass permite el uso de funciones y operadores, selectores anidados, así como los llamados mixins.

A partir de la versión 3.0, la configuración de Foundation añade una opción especial “Personaliza  en la documentación. No obstante, los desarrolladores usan un formulario en el que eligen los componentes deseados y afinar, si lo creen conveniente, los valores de las distintas variables a sus necesidades. El paquete generado a posteriori incluye la hoja de estilos CSS pre diseñada.

Entendiendo la Hoja de estilos CSS

Fundation incluye una serie de hojas de estilo que ofrecen definiciones de estilo básicas para todos los componentes HTML claves. Estos a su vez, proporcionan un navegador y todo un sistema lineal, un aspecto más  actual para el formato de textos, tablas y elementos de formulario.

Sistema de cuadrícula y diseño responsivo

La configuración inicial de Foundation consiste en un diseño de cuadrícula flexible de 940 píxeles de ancho. La serie de herramientas es absolutamente responsive de forma que permite hacer uso hacer uso de diferentes resoluciones y tipos de dispositivos: mobile phones, formato vertical y horizontal, tablets y PC con una resolución baja y alta (pantalla ancha). El ajuste de la anchura de las columnas es automático.

 

Componentes reutilizables

Además de los elementos HTML usuales, Fundation añade otros elementos comunes de interfaz, como pueden ser 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, navegación, ruta de navegación,  paginación, etc.), etiquetas, capacidades tipográficas avanzadas y formato para los mensajes tales como advertencias.

Componentes de Javascript y plugins

Los añadidos de JavaScript de Foundation 4 se transvasaron desde la biblioteca de Javascript jQuery a Zepto, con la idea  de que esta variación físicamente menor,  pero adaptable con la API de jQuery conllevaría más rapidez para el usuario.

Los componentes Foundation jQuery añaden variables de interfaz de usuario generales y extensiones de marca. El listado 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 otros más.

Los plug-ins que usan jQuery se pueden instalar añadiendose incorporándose al framework Foundation proporcionando escalabilidad  avanzada en cualquier área de interfaz de usuario, incluso en la  animación y variables “offcanvas” como menús deslizables.

Componentes JQuery como formularios se añadirán a una infraestructura de backend (base de datos y scripts basados en servidor), utilizando herramientas y componentes fuera del framework Foundation con el fin de trabajar. Otros Servicios como Mailchip aun se instalan para páginas HTML estáticas, y no necesitan de un home-rolled backend.

JQuery se ha pasado a ser una variable más reconocida en la evolución de la web. Wikipedia concluye que el 65% de los top 100 sitios de Javascript la usan. definitivamente Javascript se considera como el estándar para el desarrollo frontend web, con HTML y CSS (por acuerdo general.

Usos

Existen tres alternativas de integración para Foundation: CSS, SASS, y Ruby on Rails con la Gema de Rails.

CSS

Para el uso de Foundation CSS, los paquetes de base o de CSS personalizado se pueden descargar desde su sitio web y ser instalados en las carpetas y directorios correspondientes del servidor web.  De esta forma Foundation pasará a intergrarse en el marco de página HTML.

SASS

El configurador de Foundation SASS usas Ruby, NodeJS, y Git para instalar los fuentes de Fundation de esta forma proporciona una CLI para modificar y compilar el código fuente a CSS para usarlo en el marco de página de HTML.

Gema de Rails para Foundation

La gema de Rails para Foundation puede ser instalada agregando “gem ‘fundation-rails”.

¿Eres Empresa y necesitas candidatos con Foundation? Entra aquí y te ayudaremos a encontrar a los mejores http://iwantic.com/formulario-de-contacto/

Eres un candidato con Foundation y quieres un nuevo proyecto o empleo, entra en nuestras ofertas de empleo y apúntate http://iwantic.com/ofertas-de-empleo-digital/#/jobs

Share This