En primer lugar, Foundation framework se caracteriza por un alto grado de flexibilidad como consecuencia de su diseño modular. Antes de descargarlo puedes decidirte por los componentes que necesitas y los que no, diseñando así una variante propia de la colección de código sin tener que descargar módulos innecesariamente. Si te das cuenta de que necesitas un componente que no has descargado, puedes añadirlo sin ningún problema posteriormente, de la misma forma que también puedes eliminar aquellos módulos que no utilizas, garantizando, así, tener siempre a disposición las funciones que necesitas para la realización de tu proyecto web.
Con Foundation 6.0, por ejemplo, dispones de una selección de más de 40 componentes en las siguientes siete áreas:
- Grid: el componente crucial para el diseño web responsivo es el valor predeterminado de sus 1200 píxeles de ancho para su cuadrícula (grid) flexible. Aunque puedes prescindir de este módulo, recuerda que este sistema es la base para que eldiseño de tu proyecto web sea de gran resolución y adaptable a diferentes dispositivos. Además, desde la versión 6.0 también tienes la opción de seleccionar el módulo “flex grid”, que permite un posicionamiento más flexible de los elementos sobre la base del modelo flexbox de CSS (por ejemplo, una alineación horizontal y vertical de los objetos).
- General: dentro de los módulos generales (incluyendo, oficialmente, grid) se encuentran las clases float y visibility, que permiten definir las reglas de comportamiento para el posicionamiento y la visibilidad de los elementos individuales. Por otro lado, en esta área también encontrarás el componente para crear formularios, así como el módulo tipográfico con los formatos básicos para textos y fuentes.
- Controls: aquí encontrarás todos los elementos interactivos importantes de tu proyecto web. Estos son, por ejemplo, los botones que redireccionan al usuario con un solo clic o que cierran algunos elementos. También existen módulos que permiten incluir faders y botones con opciones de encendido y apagado.
- Navigation: los elementos frontpage no pueden faltar en el diseño frontend. El proyecto ZURB foundation incluye una gran cantidad de módulos para crear distintos tipos de barras de menús y menús (acordeón, vertical, desplegable), añadir guías de navegación (breadcrumbs) o numerar las páginas.
- Containers: los contenedores representan una excelente oportunidad para incluir elementos adicionales, tales como texto, imágenes o vídeos, en un área común. Aquí encontrarás estilos para los típicos widgets de contenido como acordeón, pestañas, elementos desplegables o cuadros de diálogo modales.
- Media: en la sección “Media” encontrarás los módulos de Foundation framework necesarios para incorporar elementos multimedia. El componente “Flex video” ofrece soporte para integrar vídeos y garantiza que el contenido se adapte a los diferentes tamaños y resoluciones de pantalla. Adicionalmente, encontrarás otros componentes para miniaturas e información sobre herramientas.
- Plugins: por último, puedes seleccionar algunas extensiones útiles para ZURB Foundation que te facilitan el trabajo con este entorno de desarrollo web. La biblioteca “Motion UI” permite descargar bibliotecas útiles (solo para el formato Sass), facilitando, en gran manera, la creación de transiciones de interfaz y de animaciones.
Antes de la descarga es posible definir algunos parámetros estándar del framework. Esto incluye opciones para cambiar el número de columnas, el espaciado o la anchura máxima de la red de distribución, diferentes ajustes de color y de la posición del texto (de izquierda a derecha o de derecha a izquierda). Si deseas probar este entorno de trabajo sin tener que informarte sobre cada uno de los módulos individuales, puedes descargarlo como versión completa (“Complete”) o como versión simplificada (“Essential”).