Fundación - Guía rápida

¿Qué es Foundation?

Foundation es uno de los marcos frontales avanzados para diseñar hermosos sitios web receptivos. Funciona en todo tipo de dispositivos y le proporciona complementos HTML, CSS y JavaScript.

Foundation comenzó como una guía de estilo interna, construida por ZURB en 2008. ZURB es una empresa de diseño de productos en Campbell, California. Lanzó Foundation 2.0 como código abierto en octubre de 2011. La última versión de Foundation es 6.1.1, lanzada en diciembre de 2015.

¿Por qué utilizar Foundation?

Proporciona un desarrollo más rápido mediante el uso del compilador Sass, que funciona mucho más rápido que el compilador predeterminado.
Enriquece su sitio web con tablas de precios, interruptores, paseo, controles deslizantes de rango, caja de luz y muchos más.
Viene con paquetes de desarrollo como Grunt y Libsass para una codificación y control más rápidos.
Foundation for sites le proporciona HTML, CSS y JS para crear sitios web rápidamente.
El marco de correo electrónico le proporciona correos electrónicos HTML receptivos, que se pueden leer en cualquier dispositivo.
Foundation for Apps le permite crear aplicaciones web totalmente receptivas.

Caracteristicas

Tiene un potente sistema de cuadrícula y algunos componentes de interfaz de usuario útiles y complementos de JavaScript geniales.
Proporciona un diseño receptivo, que sirve para todo tipo de dispositivos.
Está optimizado para dispositivos móviles y realmente es compatible con el primer enfoque móvil.
Proporciona plantillas HTML, que se pueden personalizar y ampliar.

Ventajas

Es fácil de aprender, una vez que tenga los conocimientos básicos de HTML y CSS.
Puede usar Foundation libremente ya que es un código abierto.
Le proporciona un montón de plantillas, lo que le ayuda a comenzar a desarrollar el sitio web de inmediato.
Foundation admite preprocesadores como SASS y Compass, lo que acelera el desarrollo.

Desventajas

Debido a la popularidad de Twitter Bootstrap, el soporte de la comunidad para Twitter Bootstrap es mejor que Foundation.
Los principiantes pueden tardar algún tiempo en aprender y aprovechar la compatibilidad con el preprocesador.
Falta de un soporte más amplio, como foros y sitios de control de calidad para solucionar problemas.
Foundation tiene menos temas en comparación con otros.

En este capítulo, analizaremos cómo instalar y utilizar Foundation en un sitio web.

Descarga la Fundación

Cuando abra el enlace foundation.zurb.com , verá una pantalla como se muestra a continuación:

Haga clic en el Download Foundation 6 , será redirigido a otra página.

Aquí puede ver cuatro botones:

Download Everything - Puede descargar esta versión de Foundation, si desea tener todo en el marco, es decir, CSS vanilla y JS.
Download Essentials - Descargará la versión simple que incluye la cuadrícula, botones, tipografía, etc.
Custom Download - Esto descargará la biblioteca personalizada para Foundation, incluye elementos y define el tamaño de las columnas, tamaño de fuente, color, etc.
Install via SCSS - Esto lo redireccionará a la página de documentación para instalar Foundation para sitios.

Puede hacer clic en el Download Everythingpara obtener todo en el marco, es decir, CSS y JS. Como los archivos constan de todas las cosas en el marco, no es necesario incluir archivos separados para la funcionalidad individual cada vez. En el momento de escribir este tutorial, se descargó la última versión (Foundation 6).

Estructura de archivo

Una vez que se descargue Foundation, extraiga el archivo ZIP y verá la siguiente estructura de archivo / directorio:

Como puede ver, hay CSS y JS compilados (foundation. *), Así como CSS y JS compilados y minificados (foundation.min. *).

Estamos utilizando las versiones CDN de la biblioteca a lo largo de este tutorial.

Plantilla HTML

Una plantilla HTML básica que usa Foundation es la que se muestra a continuación:

<!DOCTYPE html>
<html>
   <head>
      <title>Foundation Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">

      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>

   </head>

   <body>
      <h1>Hello, world!</h1>
   </body>
</html>

Las siguientes secciones describen el código anterior en detalle.

Tipo de documento HTML5

Foundation consta de ciertos elementos HTML y propiedades CSS que requieren el uso del tipo de documento HTML5. Por lo tanto, el siguiente código para el tipo de documento HTML5 debe incluirse al comienzo de todos sus proyectos con Foundation.

<!DOCTYPE html>
<html>
   ....
</html>

Móvil primero

Ayuda a responder a los dispositivos móviles. Necesitas incluir elviewport meta tag al elemento <head>, para garantizar una representación adecuada y el zoom táctil en dispositivos móviles.

<meta name = "viewport" content = "width = device-width, initial-scale = 1">

La propiedad width controla el ancho del dispositivo. Establecerlo en el ancho del dispositivo asegurará que se procese en varios dispositivos (móviles, computadoras de escritorio, tabletas ...) correctamente.
initial-scale = 1.0 asegura que cuando se cargue, su página web se renderizará a una escala de 1: 1 y no se aplicará ningún zoom de forma inmediata.

Inicialización de componentes

El script jQuery es necesario en Foundation para componentes como modales y menús desplegables.

<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:

Guarde el código html dado anteriormente firstexample.html archivo.
Abra este archivo HTML en un navegador, se muestra una salida como se muestra a continuación.

Puede comenzar con el desarrollo de su proyecto con algunas plantillas disponibles que se pueden instalar a través de Yeti Launch oFoundation CLI. Puede comenzar con el nuevo proyecto utilizando estas plantillas utilizando el sistema de compilación Gulp para el procesamiento de Sass, JavaScript, copia de archivos, etc.

Plantilla básica

La plantilla básica es algo así como la plantilla SASS, que incluye la estructura de directorio plana y compila solo archivos SASS y es bueno tener esta plantilla simple mientras se usa solo SASS. Puede usar la plantilla básica usando Yeti Launch o usando Foundation CLI usando el siguiente comando:

$ foundation new --framework sites --template basic

Para configurar esto, primero ejecute npm install , bower install y use el comando npm start para ejecutarlo. También puede descargar los archivos de plantilla desde Github .

Plantilla ZURB

Es una combinación de CSS / SCSS, JavaScript, plantilla Handlebars, estructura de marcado, compresión de imágenes y utiliza procesamiento SASS. Puede usar la plantilla ZURB usando Yeti Launch o usando Foundation CLI usando el siguiente comando:

$ foundation new --framework sites --template zurb

Para ejecutar esta plantilla, siga los mismos pasos que se especifican en la plantilla básica. También puede descargar los archivos de plantilla desde Github .

Copia de activos

Puede copiar el contenido en la carpeta src / assets usando Gulp en la cual los assets serán la carpeta de su proyecto. Lo importante aquí es que los archivos SASS, los archivos JavaScript e imágenes no se incluirán en este proceso de copia de activos, ya que tendrán su propio proceso para copiar el contenido.

Compilación de páginas

Puede crear páginas HTML en tres carpetas, a saber , páginas , diseños y parciales que residen dentro del directorio src / . Puede utilizar el compilador de archivos planos de Panini que crea diseños para páginas utilizando plantillas, páginas, HTML parciales. Este proceso se puede realizar utilizando el lenguaje de plantillas de Handlebars .

Recopilación de SASS

Puede compilar el SASS en CSS usando Libsass y el archivo SASS principal se almacenará en src / assets / scss / app.scss y también los parciales SASS recién creados se almacenarán en esta carpeta. La salida de CSS será como CSS normal, que está en el estilo anidado. Puede comprimir el CSS con clean-css y eliminar el CSS no utilizado de la hoja de estilo usando UnCSS .

Compilación de JavaScript

Los archivos JavaScript se almacenarán en la carpeta src / assets / js junto con Foundation y todas las dependencias se vincularán en el archivo app.js. Los archivos se unirán como se especifica en el siguiente orden:

Dependencias de Fundación.
Los archivos se almacenarán en la carpeta src / assets / js .
Los archivos se encuentran agrupados en un solo archivo llamado app.js .

Compresión de imagen

De forma predeterminada, todas las imágenes se almacenarán en la carpeta assets / img en la carpeta dist . Puede comprimir las imágenes mientras crea para la producción utilizando gulp-imagemin que admite archivos JPEG, PNG, SVG y GIF.

BrowserSync

Puede crear un servidor BrowserSync que sea una prueba de navegador sincronizada disponible enhttp://localhost:8000y poder ver las plantillas compiladas usando esta URL. Mientras su servidor está en funcionamiento, la página se actualiza automáticamente cuando guarda el archivo y puede ver los cambios realizados en la página en tiempo real mientras trabaja.

Descripción

Incluye los elementos Foundation para trabajar con las aplicaciones web sin problemas. La siguiente tabla enumera algunos de los componentes de Foundation:

No Señor.	Descripción de Componente
1	Acordeón Los acordeones contienen pestañas verticales que se utilizan en sitios web para expandir y contraer una gran cantidad de datos.
2	Menú acordeón Muestra el menú plegable con efectos de acordeón.
3	Insignia Las insignias son similares a las etiquetas, que se utilizan para resaltar la información, como notas y mensajes importantes.
4	Migas de pan Especifica la ubicación actual de un sitio dentro de la jerarquía de navegación.
5	Botones Foundation admite botones estándar con diferentes estilos.
6	Gritar La llamada es un elemento que se puede utilizar para colocar el contenido en su interior.
7	Botón Cerrar Se utiliza para descartar el cuadro de alerta.
8	Menú detallado El menú detallado cambia las listas anidadas a un menú detallado vertical.
9	Menú desplegable El menú desplegable se utiliza para mostrar enlaces en formato de lista.
10	Panel desplegable El panel desplegable muestra el contenido cuando hace clic en el botón.
11	Video flexible Se utiliza para crear objetos de video en las páginas web.
12	Clases flotantes Se utiliza para agregar clases de utilidad a elementos HTML.
13	Formularios Se utiliza para crear un diseño de formulario para recopilar la entrada del usuario.
14	Etiqueta Las etiquetas son estilos en línea, que definen una etiqueta para un elemento de entrada.
15	Objeto multimedia Se utiliza para agregar objetos multimedia como imágenes, videos, comentarios de blogs, etc. que se pueden colocar a la izquierda o derecha del bloque de contenido.
dieciséis	Menú Proporciona acceso a diferentes modos en el sitio web.
17	Paginación Es un tipo de navegación que divide el contenido en una serie de páginas relacionadas.
18	Deslizador Especifica el rango de valores arrastrando un controlador.
19	Cambiar Se utiliza para cambiar entre estado encendido y apagado.
20	Mesa Representa los datos en formato de filas y columnas.
21	Pestañas Es una pestaña basada en la navegación que muestra el contenido en diferentes paneles sin salir de la página.
22	Miniatura Aplica estilo a las imágenes en forma de miniatura.
23	Barra de título Se utiliza para mostrar la pantalla actual utilizada por el usuario con otros elementos del menú.
24	Descripción emergente Es un pequeño cuadro emergente que describe la información cuando pasa el mouse sobre el enlace.
25	Barra superior Se utiliza para crear un encabezado de navegación en el sitio web.
26	Orbita Es un control deslizante fácil y poderoso que desliza los elementos usando la clase de órbita .

En este capítulo, estudiaremos sobre estilos globales . El marco CSS global de Foundation incluye restablecimientos útiles que aseguran que el estilo sea consistente en todos los navegadores.

Tamaño de fuente

El tamaño de fuente de la hoja de estilo del navegador está establecido en 100% de forma predeterminada. El tamaño de fuente predeterminado se establece en 16 píxeles. Dependiendo del tamaño de la fuente, se calcula el tamaño de la cuadrícula. Para tener un tamaño de fuente base distinto y puntos de interrupción de cuadrícula no afectados, establezca $ rem-base en el valor $ global-font-size , que debe estar en píxeles.

Colores

Los elementos interactivos como enlaces y botones usan un tono de azul predeterminado que proviene de la variable SASS $ color primario . Los componentes también pueden tener colores como: secundario, alerta, éxito y advertencia . Para obtener más información, consulte aquí .

Referencia SASS

Variables

La siguiente tabla enumera las variables SASS, que se utilizan para personalizar los estilos predeterminados de los componentes en su proyecto _settings.scss .

No Señor.	Nombre y descripción	Tipo	Valor por defecto
1	$global-width Representa el ancho global del sitio. Se utiliza para determinar el ancho de fila de la cuadrícula.	Número	rem-calc (1200)
2	$global-font-size Representa el tamaño de fuente aplicado a <html> y <body> . Está configurado al 100% de forma predeterminada y se heredará el valor de configuración del navegador del usuario.	Número	100%
3	$global-lineheight Representa todos los tipos de altura de línea predeterminada. $ global-lineheight es 24px mientras que $ global-font-size se establece en 16px.	Número	1,5
4	$primary-color Da color a los componentes interactivos como enlaces y botones.	Color	# 2199e8
5	$secondary-color Se utiliza con componentes que admiten la clase .secondary .	Color	N.º 777
6	$success-color Representa el estado positivo o la acción cuando se usa con la clase .success .	Color	# 3adb76
7	$warning-color Representa un estado o acción de precaución cuando se usa con la clase .warning .	Color	# ffae00
8	$alert-color Representa un estado o acción negativa cuando se usa con la clase .alert .	Color	# ec5840
9	$light-gray Se utiliza para elementos de interfaz de usuario de color gris claro.	Color	# e6e6e6
10	$medium-gray Se utiliza para elementos de interfaz de usuario de color gris medio.	Color	#cacaca
11	$dark-gray Se utiliza para elementos de interfaz de usuario de color gris oscuro.	Color	# 8a8a8a
12	$black Se utiliza para elementos de interfaz de usuario negros.	Color	# 0a0a0a
13	$white Se utiliza para elementos de interfaz de usuario blancos.	Color	#fefefe
14	$body-background Representa el color de fondo del cuerpo.	Color	$ blanco
15	$body-font-color Representa el color del texto del cuerpo.	Color	$ negro
dieciséis	$body-font-family Representa la lista de fuentes del cuerpo.	Lista	'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif
17	$body-antialiased El tipo suavizado se habilita estableciendo este atributo en verdadero usando las propiedades CSS -webkit-font-smoothing y -moz-osx-font-smoothing .	Booleano	cierto
18	$global-margin Representa el valor del margen global de los componentes.	Número	1rem
19	$global-padding Representa el valor de relleno global de los componentes.	Número	1rem
20	$global-margin Representa el valor de margen global utilizado entre componentes.	Número	1rem
21	$global-weight-normal Representa el peso de fuente global para tipo normal.	Palabra clave o número	normal
22	$global-weight-bold Representa el peso de fuente global para tipografía en negrita.	Palabra clave o número	negrita
23	$global-radius Representa el valor global de todos los elementos que tienen un radio de borde.	Número	0
24	$global-text-direction Establece la dirección del texto del CSS en ltr o rtl		ltr

SASS ayuda a que el código sea más flexible y personalizable en Foundation.

Compatibilidad

Para instalar la versión basada en SASS para la fundación, Ruby debe estar instalado en Windows. Foundation se puede compilar con Ruby SASS y libsass. Nosotros recomendamosnode-sass 3.4.2+ versión para compilar SASS.

Se requiere prefijo automático

Autoprefixer maneja archivos SASS. gulp-autoprefixer se utiliza para construir el proceso. La siguiente configuración de prefijo automático se utiliza para obtener la compatibilidad adecuada con el navegador.

autoprefixer ({
   browsers: ['last 2 versions', 'ie >= 9', 'and_chr >= 2.3']
});

Cargando el marco

Podemos instalar los archivos del marco usando NPM. Usando la interfaz de línea de comando (CLI), podemos compilar los archivos Sass. A continuación se muestra el comando para cargar el marco:

npm install foundation-sites --save

Después de ejecutar el código de línea de comando anterior, obtendrá las siguientes líneas:

Compilar manualmente

Los archivos de marco se pueden agregar como una ruta de importación dependiendo de su proceso de compilación, pero la ruta será la misma carpeta_paquetes / foundation-sites / scss . La instrucción @import se incluye en la parte superior del archivo foundation-sites.scss . La siguiente línea en el código dado se explica en elAdjusting CSS Output sección.

@import 'foundation';
@include foundation-everything;

Usando CSS compilado

Puede incluir los archivos CSS precompilados. Hay dos tipos de archivos CSS, es decir, minificados y no minificados. La versión minificada se utiliza para la producción y la versión no minificada se utiliza para editar directamente el marco CSS.

<link rel = "stylesheet" href = "node_modules/foundation-sites/dist/foundation-sites.css">
<link rel = "stylesheet" href = "node_modules/foundation-sites/dist/foundation-sites.min.css">

Ajustar la salida CSS

Para varios componentes, la salida de Foundation consta de muchas clases. Se utiliza para controlar la salida CSS del marco. Agregue la siguiente línea única de código para incluir todos los componentes a la vez.

@include foundation-everything;

La siguiente es la lista de los componentes importados cuando escribe el código anterior en su archivo scss. Se pueden comentar los componentes que no son necesarios. Puede ver las siguientes líneas de código en el archivo Your_folder_name / node_modules / foundation-sites / scss / foundation.scss .

@import 'foundation';

@import 'grid/grid';
@import 'typography/typography';
@import 'forms/forms';
@import 'components/visibility';
@import 'components/float';
@import 'components/button';
@import 'components/button-group';
@import 'components/accordion-menu';
@import 'components/accordion';
@import 'components/badge';
@import 'components/breadcrumbs';
@import 'components/callout';
@import 'components/close-button';
@import 'components/drilldown';
...
...
...
//so on....

El archivo de configuración

Se incluye un archivo de configuración en todo el proyecto de base, es decir, _settings.scss . Si está utilizando Yeti Launch o la CLI para crear un proyecto de Foundation for Sites, puede encontrar el archivo de configuración en src / assets / scss /.

Hemos instalado Foundation usando npm, por lo tanto, puede encontrar el archivo de configuración incluido en your_folder_name / node_modules / foundation-sites / scss / settings / _settings.scss . Puede mover esto a sus propios archivos Sass para trabajar.

Puede escribir su propio CSS, si no puede personalizarlo con variables. A continuación se muestra un conjunto de variables que cambian el estilo predeterminado de los botones.

$button-padding: 0.85em 1em;
$button-margin: 0 $global-margin $global-margin 0;
$button-fill: solid;
$button-background: $primary-color;
$button-background-hover: scale-color($button-background, $lightness: -15%);
$button-color: #fff;
$button-color-alt: #000;
$button-radius: $global-radius;

$button-sizes: (
   tiny: 0.6rem,
   small: 0.75rem,
   default: 0.9rem,
   large: 1.25rem,
);
$button-opacity-disabled: 0.25;

En este capítulo, estudiaremos sobre JavaScript . Es fácil configurar JavaScript en Foundation; lo único que necesita es jQuery.

Instalación de JavaScript

Puede usar la descarga ZIP, el administrador de paquetes o CDN para obtener el archivo Foundation JavaScript. En su código, puede proporcionar enlaces a jQuery y Foundation como etiquetas <script>, colocadas antes del <body> de cierre y verificar que Foundation se cargue después de jQuery. Para más información haga clic aquí .

Estructura de archivo

Cuando instala Foundation a través de la línea de comandos, los complementos de Foundation se descargan como archivos individuales, como foundation.tabs.js , foundation.dropdownMenu.js , foundation.slider.js , etc. Todos estos archivos se combinan en foundation.js , que proporciona todos los complementos a la vez. Si desea utilizar algún complemento, primero debe cargar foundation.core.js .

Por ejemplo

<script src = "js/jquery.min.js"></script>
<script src = "js/foundation.core.js"></script>
<script src = "js/foundation.tabs.js"></script>

Algunos complementos pueden requerir bibliotecas de utilidades particulares, que vienen con la instalación de Foundation. Puede estudiar en detalle los requisitos específicos de los complementos en el siguiente capítulo, Utilidades de JavaScript .

La carga de archivos individuales crea una sobrecarga de red, específicamente para usuarios móviles. Para una carga de página más rápida, se recomienda el uso de gruñido o trago .

Inicializando

La función foundation () se usa para inicializar todos los complementos Foundation a la vez.

Por ejemplo

(document).foundation();

Usar complementos

Usando atributos de datos, los complementos se conectan a elementos HTML ya que coinciden con el nombre de los complementos. Un solo elemento HTML puede tener solo un complemento a la vez, aunque la mayoría de los complementos se pueden anidar dentro de otros. Por ejemplo, el enlace de información sobre herramientas se crea agregando información sobre herramientas de datos . Para más información haga clic aquí .

Configurar complementos

Los complementos se pueden personalizar mediante sus ajustes de configuración. Por ejemplo, puede configurar la velocidad de los deslizamientos del acordeón hacia arriba y hacia abajo. La configuración del complemento se puede cambiar globalmente utilizando el complementoDEFAULTSpropiedad. Para más información haga clic aquí .

Agregar complementos después de cargar la página

Cuando se agrega HTML nuevo al DOM, ninguno de los complementos de esos elementos no se inicializará de forma predeterminada. Puede buscar nuevos complementos volviendo a llamar a la función .foundation () .

Por ejemplo

$.ajax('assets/partials/kitten-carousel.html', function(data) {
   $('#kitten-carousel'</span>).html(data).foundation();
});

Uso programático

En JavaScript, los complementos se pueden crear mediante programación y cada complemento es la clase del objeto Foundation global , con un constructor que toma dos parámetros, como un elemento y un objeto.

var $accordion = new Foundation.Accordion($('#accordion'), {
   slideSpeed: 600, multiExpand: true
});

La mayoría de los complementos se proporcionan con API pública, lo que le permite manipularlo a través de JavaScript. Puede consultar la documentación del complemento para estudiar las funciones disponibles y los métodos se pueden invocar fácilmente.

Por ejemplo

$('.tooltip').foundation('destroy');
// this will destroy all Tooltips on the page.

$('#reveal').foundation('open');
// this will open a Reveal modal with id `reveal`.

$('[data-tabs]').eq(0).foundation('selectTab', $('#example'));
// this will change the first Tabs on the page to whatever panel you choose.

Se le permite elegir cualquier selector de jQuery y si el selector contiene varios complementos, todos tendrán el método elegido idéntico llamado.
Los argumentos se pueden pasar como si se pasaran argumentos a JavaScript.
Los métodos que tienen el prefijo de subrayado (_) se consideran una parte de la API interna, es decir, que sin previo aviso pueden romperse, cambiar o incluso desaparecer.

Eventos

Siempre que finaliza una función específica, DOM desencadena un evento. Por ejemplo, cada vez que se cambian las pestañas, se puede escuchar y crear una respuesta de retorno. Cada complemento puede activar una lista de eventos, que se documentará en la documentación del complemento. En Foundation 6, los complementos de devolución de llamada se eliminan y deben tomarse como detectores de eventos.

Por ejemplo

$('[data-tabs]').on('change.zf.tabs', function() {
   console.log('Tabs are changed!');
});

Foundation incluye utilidades de JavaScript que se utilizan para agregar funcionalidades comunes. Es muy útil y fácil de usar. Esta biblioteca de utilidades de JavaScript se puede encontrar en la carpeta Your_folder_name / node_modules / foundation-sites / js

Caja

La biblioteca Foundation.Box consta de un par de métodos.
los js/foundation.util.box.js es el nombre del archivo de secuencia de comandos, que se puede incluir al escribir el código.
Se pueden pasar objetos jQuery o elementos JavaScript simples a ambos métodos.

var dims = Foundation.Box.GetDimensions(element);

El objeto devuelto especifica la dimensión del elemento como:

{
   height: 54,
   width: 521,
   offset: {
      left: 198,
      top: 1047
   },

   parentDims: {
      height: ...    //The same format is share for parentDims and windowDims as the element dimensions.
   },

   windowDims: {
      height: ...
   }
}

La función ImNotTouchingYou está incluida.
Según el elemento pasado, se devuelve un valor booleano, que es un conflicto con el borde de la ventana u opcional o un elemento principal.
Las dos opciones especificadas en la línea que se muestra a continuación, es decir, leftAndRightOnly, topAndBottomOnly, se utilizan para identificar la colisión en un solo eje.

var clear = Foundation.Box.ImNotTouchingYou (
   element [, parent, leftAndRightOnly, topAndBottomOnly]);

Teclado

Hay muchos métodos en Foundation.Keyboard , que ayudan a facilitar la interacción del evento del teclado.
los js/foundation.util.keyboard.js es el nombre del archivo de secuencia de comandos, que se puede incluir al escribir el código.
El objeto Foundation.Keyboard.keys consta de pares clave / valor, cuyas claves se utilizan en el marco con más frecuencia.
Siempre que se presiona la tecla , se llama a Foundation.Keyboard.parseKey para obtener una cadena. Esto ayuda a administrar sus propias entradas de teclado.

El siguiente código se usa para encontrar todos los elementos enfocables dentro del elemento $ dado . Por lo tanto, no es necesario que usted escriba ninguna función y selector.

var focusable = Foundation.Keyboard.findFocusable($('#content'));

La función handleKey es una función principal de esta biblioteca.
Este método se usa para manejar el evento de teclado; se puede llamar siempre que se registre algún complemento con la utilidad.

Foundation.Keyboard.register('pluginName', {
   'TAB': 'next'
});

...//in event callback
Foundation.Keyboard.handleKey(event, 'pluginName', {
   next: function(){
      //do stuff
   }
});

Se puede llamar a la función Foundation.Keyboard.register cuando desee utilizar sus propias combinaciones de teclas.

MediaQuery

La biblioteca MediaQuery es la columna vertebral de todas las técnicas CSS receptivas.
los js/foundation.util.mediaQuery.js es el nombre del archivo de secuencia de comandos, que se puede incluir al escribir el código.
El Foundation.MediaQuery.atLeast ( 'grande') se utiliza para comprobar si la pantalla es al menos tan ancho como un punto de interrupción.
El Foundation.MediaQuery.get ( 'medio') se pone la consulta de medios de un punto de ruptura.
Los Foundation.MediaQuery.queries son una serie de preguntas de los medios, Fundación utiliza para puntos de interrupción.
El Foundation.MediaQuery.current es una cadena del tamaño de punto de interrupción actual.

Foundation.MediaQuery.get('medium');
Foundation.MediaQuery.atLeast('large');
Foundation.MediaQuery.queries;
Foundation.MediaQuery.current;

El siguiente código transmite el cambio de consulta de medios en la ventana.

$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize){});

Movimiento y movimiento

Foundation.Motion javascript es similar a la biblioteca Motion UI, que se incluye en Foundation 6. Se utiliza para crear transiciones y animaciones CSS personalizadas.
los js/foundation.util.motion.js es el nombre del archivo de secuencia de comandos, que se puede incluir al escribir el código.
Foundation.Move se utiliza para hacer que la animación respaldada por CSS3 sea simple y elegante.
requestAnimationFrame();el método le dice al navegador que realice una animación; solicita que se llame a su función de animación antes de que el navegador realice el siguiente repintado.

Foundation.Move(durationInMS, $element, function() {
   //animation logic
});

Cuando se ha completado la animación, finished.zf.animate se dispara.

Temporizador e imágenes cargadas

Orbit utiliza tanto la función de temporizador como la imagen cargada. losjs/foundation.util.timerAndImageLoader.js es el nombre del archivo de secuencia de comandos, que se puede incluir al escribir el código.

var timer = new Foundation.Timer($element, {duration: ms, infinite: bool}, callback);

El método de carga de imágenes ejecuta una función de devolución de llamada en su colección jQuery cuando las imágenes están completamente cargadas.

Foundation.onImagesLoaded($images, callback);

Toque

Los métodos se utilizan para agregar eventos de pseudo arrastre y deslizar elementos.
los js/foundation.util.touch.js es el nombre del archivo de secuencia de comandos, que se puede incluir al escribir el código.
El método addTouch se utiliza para vincular elementos a eventos táctiles en el complemento Slider para dispositivos móviles.
El método spotSwipe une los elementos para deslizar eventos en el complemento Orbit para dispositivos móviles.

$('selector').addTouch().on('mousemove', handleDrag);

$('selector').spotSwipe().on('swipeleft', handleLeftSwipe);

Disparadores

Activa el evento especificado para los elementos seleccionados.
los js/foundation.util.triggers.js es el nombre del archivo de secuencia de comandos, que se puede incluir al escribir el código.
Los activadores se utilizan en muchos complementos de Foundation.

$('selector').on('open.zf.trigger', handleOpen);
$('selector').on('close.zf.trigger', handleClose);
$('selector').on('toggle.zf.trigger', handleToggle);

Los siguientes dos métodos se utilizan en esta biblioteca, es decir, cambiar el tamaño y desplazarse.

El método resize () activa el evento de cambio de tamaño cuando ocurre un evento de cambio de tamaño.
El método scroll () activa el evento de desplazamiento cuando ocurre un evento de desplazamiento.

$('#someId').on('scrollme.zf.trigger', handleScroll);
$('#someId').on('resizeme.zf.trigger', handleResize);

Diverso

Foundation contiene pocas funciones en la biblioteca principal, que se utilizan en muchos lugares.
los js/foundation.core.js es el nombre del archivo de secuencia de comandos, que se puede incluir al escribir el código.
Foundation.GetYoDigits ([número, espacio de nombres]) devuelve un uid base-36 aleatorio con espacio de nombres. Devuelve la longitud de cadena de 6 caracteres de forma predeterminada.
Foundation.getFnName (fn) devuelve un nombre de función de JavaScript.
Foundation.transitionend se produce cuando se completa la transición de CSS.

Las consultas de medios son un módulo CSS3 que incluye características de medios como ancho, alto, color y muestra el contenido según la resolución de pantalla especificada.

Foundation utiliza las siguientes consultas de medios para crear rangos de desglose:

Small - Utilizado para cualquier pantalla.
Medium - Se utiliza para pantallas de 640 píxeles y más anchas.
Large - Se utiliza para pantallas de 1024 píxeles y más anchas.

Puede cambiar el tamaño de la pantalla utilizando las clases de puntos de interrupción . Por ejemplo, puede usar la clase .small-6 para pantallas de tamaño pequeño y la clase .medium-4 para pantallas de tamaño mediano, como se muestra en el siguiente fragmento de código:

<div class = "row">
   <div class = "small-6 medium-4 columns"></div>
   <div class = "small-6 medium-8 columns"></div>
</div>

Cambiar los puntos de interrupción

Puede cambiar los puntos de interrupción, si su aplicación utiliza la versión SASS de Foundation. Puede colocar el nombre de los puntos de interrupción debajo de la variable $ puntos de interrupción en el archivo de configuración como se muestra a continuación:

$breakpoints: (
   small: 0px,
   medium: 640px,
   large: 1024px,
   xlarge: 1200px,
   xxlarge: 1440px,
);

Puede cambiar las clases de puntos de interrupción en el archivo de configuración modificando la variable $ breakpoint-classes . Si desea utilizar la clase .large en el CSS, agréguela al final de la lista como se muestra a continuación:

$breakpoints-classes: (small medium large);

Supongamos que desea usar la clase .xlarge en el CSS y luego agregar esta clase al final de la lista como se muestra a continuación:

$breakpoints-classes: (small medium large xlarge);

HABLAR CON DESCARO A

El Breakpoint Mixin

Puede escribir las consultas de medios utilizando breakpoint () mixin junto con @include .
Utilice las palabras clave down o only junto con el valor del punto de interrupción para cambiar el comportamiento de la consulta de medios como se muestra en el siguiente formato de código:

.class_name {
   // code for medium screens and smaller
   @include breakpoint(medium down) { }

   // code for medium screens only
   @include breakpoint(medium only) { }
}

Puede utilizar tres consultas de medios vertical , horizontal y retina para la orientación del dispositivo o la densidad de píxeles y no son consultas de medios basadas en el ancho.

Función de punto de interrupción

Puede usar la funcionalidad de breakpoint () mixin usando la función interna.
La funcionalidad breakpoint () se puede utilizar directamente para escribir sus propias consultas de medios:

@media screen and #{breakpoint(medium)} {
   // code for medium screens and up styles
}

JavaScript

Trabajar con consultas de medios

Foundation JavaScript proporciona la función MediaQuery.current para acceder al nombre del punto de interrupción actual en el objeto Foundation.MediaQuery como se especifica a continuación:

Foundation.MediaQuery.current

La función MediaQuery.current muestra pequeños , medianos , grandes como nombres de puntos de interrupción actuales.
Puede obtener la consulta de medios del punto de interrupción utilizando la función MediaQuery.get como se muestra a continuación:

Foundation.MediaQuery.get('small')

Referencia de Sass

Variables

La siguiente tabla enumera las variables SASS, que se pueden utilizar para personalizar los estilos predeterminados del componente:

No Señor.	Nombre y descripción	Tipo	Valor por defecto
1	$breakpoints Es un nombre de punto de interrupción que se puede usar para escribir las consultas de medios usando breakpoint () mixin.	Mapa	pequeño: 0px medio: 640px grande: 1024px xlarge: 1200px xxlarge: 1440px
2	$breakpoint-classes Puede cambiar la salida de la clase CSS modificando la variable $ breakpoint-classes .	Lista	pequeño mediano Grande

Mixins

Mixins crea un grupo de estilos para construir su estructura de clases CSS para los componentes de Foundation.

BREAKPOINT

Utiliza breakpoint () mixin para crear consultas de medios e incluye las siguientes actividades:

Si se pasa una cadena, mixin busca la cadena en el mapa $ breakpoints y crea la consulta de medios.
Si está usando un valor de píxel, conviértalo a valor em usando $ rem-base .
Si se pasa el valor rem, cambia su unidad a em.
Si está usando el valor em, entonces se puede usar tal como está.

La siguiente tabla especifica el parámetro utilizado por el punto de interrupción:

No Señor.	Nombre y descripción	Tipo	Valor por defecto
1	$value Procesa los valores usando el nombre del punto de interrupción, px, rem o valores em.	palabra clave o número	Ninguna

Funciones

BREAKPOINT

Utiliza breakpoint () mixin para crear consultas de medios con un valor de entrada coincidente.

La siguiente tabla especifica el posible valor de entrada utilizado por el punto de interrupción:

No Señor.	Nombre y descripción	Tipo	Valor por defecto
1	$val Procesa los valores usando el nombre del punto de interrupción, px, rem o valores em.	palabra clave o número	pequeña

Referencia de JavaScript

Funciones

Hay dos tipos de funciones:

.atLeast- Mira la pantalla. Debe ser ancho al menos como punto de interrupción.
.get - Se utiliza para obtener la consulta de medios del punto de interrupción.

La siguiente tabla especifica el parámetro utilizado por las funciones anteriores:

No Señor.	Nombre y descripción	Tipo
1	size Comprueba y obtiene el nombre del punto de interrupción para las funciones especificadas respectivamente.	Cuerda

Descripción

El sistema de cuadrícula de cimientos escala hasta 12 columnas en la página. Los sistemas de cuadrícula se utilizan para crear diseños de página a través de una serie de filas y columnas que albergan su contenido.

Opciones de cuadrícula

La siguiente tabla explica brevemente cómo funciona el sistema de rejilla Foundation en varios dispositivos.

	Dispositivos pequeños Teléfonos (<640px)	Dispositivos medianos Tablets (> = 640px)	Dispositivos grandes Computadoras portátiles y de escritorio (> = 1200px)
Comportamiento de la cuadrícula	Horizontal en todo momento	Contraído al inicio, horizontal sobre los puntos de interrupción	Contraído al inicio, horizontal sobre los puntos de interrupción
Prefijo de clase	.pequeña-*	.medio-*	.grande-*
Número de columnas	12	12	12
Encajable	si	si	si
Compensaciones	si	si	si
Orden de columnas	si	si	si

Estructura básica de una rejilla de cimentación

La siguiente es la estructura básica de una cuadrícula de fundación:

<div class = "row">
   <div class = "small-*"></div>
   <div class = "medium-*"></div>
   <div class = "large-*"></div>
</div>

<div class = "row">
   ...
</div>

Primero, cree una clase de fila para crear grupos horizontales de columnas.
El contenido debe colocarse dentro de las columnas y solo las columnas pueden ser los hijos inmediatos de las filas.
Las columnas de la cuadrícula se crean especificando el número de doce columnas disponibles que desea abarcar. Por ejemplo, para cuatro columnas iguales usaríamos .large-3

Las siguientes son las tres clases utilizadas en el sistema de rejilla Foundation:

No Señor.	Clases y descripción básica de Grid
1	Grande Las clases grandes * se utilizan para los dispositivos grandes.
2	Medio La clase media- * se utiliza para los dispositivos medios.
3	Pequeña small- * class se utiliza para los dispositivos pequeños.

Cuadrícula avanzada

Los siguientes son los formatos de cuadrícula avanzados que se utilizan en Foundation.

No Señor.	Cuadrículas avanzadas y descripción
1	Columna / fila combinada Las clases de columna y fila se utilizan en el mismo elemento para que la columna de ancho completo se utilice como contenedor.
2	Anidamiento Podemos anidar las columnas de la cuadrícula dentro de otras columnas.
3	Compensaciones Usando la clase large-offset- * o small-offset- * , puede mover las columnas hacia la derecha.
4	Filas incompletas Foundation flota el último elemento automáticamente a la derecha cuando las filas no incluyen columnas hasta 12.
5	Contraer / Descontraer filas Usando el tamaño de la consulta de medios, las clases de colapso y uncollapse se incluyen en el elemento de fila para mostrar los rellenos.
6	Columnas centradas Al incluir la clase centrada en pequeño en la columna, puede hacer que la columna esté en el centro.
7	Ordenamiento de fuente La clase de ordenación de la fuente se utiliza para cambiar las columnas entre el punto de interrupción.
8	Cuadrículas de bloque La cuadrícula de bloques se utiliza para dividir el contenido.

Construyendo Semánticamente

Usando el conjunto de mixins de SASS, se genera una cuadrícula CSS que se usa para construir su propia cuadrícula semántica. Para más información haga clic aquí.

Referencia SASS

Las siguientes son la referencia de SASS para la cuadrícula utilizada en Foundation.

No Señor.	Cuadrículas básicas y descripción
1	Variables Usando las variables sass podemos modificar los estilos predeterminados de este componente.
2	Mixins La salida CSS final se crea utilizando el mixin.

La cuadrícula depende de la propiedad de visualización flexible . Consiste en una serie de funciones que están disponibles con la caja flexible, como apilado automático, ordenamiento de origen, alineación vertical y alineación horizontal.

Soporte del navegador

La cuadrícula flexible es compatible con Chrome, Firefox, Internet Explorer 10+, Safari 6+, Android 4+ e iOS 7+.

La siguiente tabla describe las características de Flex Grid junto con la descripción.

No Señor.	Características y descripción
1	Importador Incluye el mixin de exportación para que la cuadrícula flexible use el CSS predeterminado.
2	Lo esencial La estructura de la rejilla Flex es similar a la rejilla flotante.
3	Tallaje avanzado Si la clase de tamaño no está incluida en la columna, entonces se expande y llena el espacio restante en la columna.
4	Ajustes receptivos Si no se proporciona el tamaño explícito de la columna en la cuadrícula flexible, entonces se ajustarán automáticamente las columnas.
5	Alineación de columnas Las columnas de la cuadrícula flexible se pueden alinear con el eje horizontal o vertical en la fila principal.
6	Ordenamiento de fuente El orden de las fuentes ayuda a reorganizar la columna en diferentes tamaños de pantallas.
7	Referencia de Sass SASS (Syntactically Awesome Stylesheet) es un preprocesador de CSS que ayuda a reducir la repetición con CSS y ahorra tiempo.

En este capítulo, estudiaremos sobre Forms. Foundation proporciona un sistema de diseño de formularios potente, fácil y versátil , que combina estilos de formulario y compatibilidad con cuadrículas.

La siguiente tabla enumera los elementos de formulario utilizados en Foundation.

No Señor.	Elemento de formulario y descripción
1	Formulario básico La creación de formularios es fácil y muy flexible, que se construye con una combinación de elementos de formulario estandarizados y un potente sistema de cuadrícula.
2	texto de ayuda Se usa para notificar al usuario sobre el propósito del elemento y generalmente se coloca debajo de un campo.
3	Posicionamiento de etiquetas Puede colocar sus etiquetas a la izquierda o derecha de sus entradas.
4	Etiquetas y botones en línea Se pueden adjuntar texto o controles adicionales a la izquierda / derecha de un campo de entrada.
5	Controles personalizados Los controles personalizados como selectores de fecha, interruptores o controles deslizantes requieren algo de atención para acceder a ellos.
6	Referencia SASS Puede cambiar los estilos de los componentes utilizando SASS Reference.

Descripción

Foundation utiliza clases de visibilidad para mostrar u ocultar elementos según la orientación del dispositivo (vertical y horizontal) o el tamaño de la pantalla (pantalla pequeña, mediana, grande o xlarge).
Permite a un usuario utilizar elementos basados en el entorno de navegación.

La siguiente tabla enumera las clases de visibilidad de Foundation, que controlan los elementos según su entorno de navegación:

No Señor.	Clase de visibilidad y descripción
1	Mostrar por tamaño de pantalla Muestra los elementos basados en el dispositivo usando la clase .show .
2	Ocultar por tamaño de pantalla Oculta los elementos basados en el dispositivo usando la clase .hide .

Foundation admite algunas clases en las que puede ocultar el contenido utilizando las clases .hide y .invisible y no muestra nada en la página.

Detección de orientación

Los dispositivos pueden determinar diferentes orientaciones utilizando la funcionalidad horizontal y vertical . Los dispositivos portátiles, como los teléfonos móviles, especifican las diferentes orientaciones cuando los gira. Para escritorio, la orientación será siempre horizontal.

Accesibilidad

La siguiente tabla enumera las técnicas de accesibilidad para lectores de pantalla que ocultan el contenido y lo hacen legible para los lectores de pantalla:

No Señor.	Clase de accesibilidad y descripción
1	Mostrar para lectores de pantalla Utiliza la clase show-for-sr para ocultar el contenido y evitar que los lectores de pantalla lo lean.
2	Ocultar para lectores de pantalla Utiliza el atributo aria-hidden que hace que el texto sea visible pero que no puede ser leído por un lector de pantalla.
3	Crear enlaces de omisión El lector de pantalla creará un enlace de salto para obtener la navegación al contenido de su sitio.

Referencia de Sass

Foundation utiliza los siguientes mixins para mostrar la salida CSS, lo que permite crear una estructura de clase propia para sus componentes:

No Señor.	Mixin y descripción	Parámetro	Tipo
1	show-for De forma predeterminada, oculta un elemento y lo muestra por encima de cierto tamaño de pantalla.	$ tamaño	Palabra clave
2	show-for-only De forma predeterminada, oculta un elemento y lo muestra dentro del punto de interrupción.	$ tamaño	Palabra clave
3	hide-for De forma predeterminada, muestra un elemento y lo oculta por encima de un determinado tamaño de pantalla.	$ tamaño	Palabra clave
4	hide-for-only De forma predeterminada, muestra un elemento y lo oculta por encima de un determinado tamaño de pantalla.	$ tamaño	Palabra clave

El valor predeterminado de todos estos mixins se establecerá en ninguno .

Descripción

La tipografía en Foundation define encabezados, párrafos, listas y otros elementos en línea que crean estilos predeterminados atractivos y simples para los elementos.

La siguiente tabla enumera los diferentes tipos de tipografía utilizados en Foundation:

No Señor.	Tipografía y descripción
1	Párrafos El párrafo es un grupo de oraciones definidas con diferentes tamaños de fuente, palabras resaltadas, altura de línea, etc.
2	Encabezamiento Define los encabezados HTML de h1 a h6.
3	Enlaces Crea un hipervínculo que abre otro documento cuando hace clic en el texto o una imagen.
4	Divisores Se usa para dar un descanso entre las secciones usando la etiqueta <hr>.
5	Listas ordenadas y desordenadas Foundation admite listas ordenadas, listas desordenadas para enumerar las cosas.
6	Listas de definiciones Las listas de definiciones se utilizan para mostrar pares de nombre y valor.
7	Blockquotes Representa un bloque de texto, que define mucho más grande de lo normal.
8	Abreviaturas y código La abreviatura define un término abreviado de una palabra o frase y el código representa un fragmento de código.
9	Pulsaciones de teclas Se utiliza para realizar una función específica.
10	Accesibilidad Foundation proporciona algunas pautas para acceder al contenido de la página.

Referencia de Sass

Puede cambiar los estilos de los componentes utilizando las siguientes variables SASS que se enumeran en la tabla.

A continuación se muestran los estilos de los componentes utilizando las siguientes variables SASS.

No Señor.	Nombre y descripción	Tipo	Valor por defecto
1	$header-font-family Especifica la familia de fuentes para los elementos de encabezado.	Cadena o lista	$ body-font-family
2	$header-font-weight Especifica el peso de la fuente de los encabezados.	Cuerda	$ global-weight-normal
3	$header-font-style Proporciona estilo de fuente de encabezados.	Cuerda	normal
4	$font-family-monospace Pila de fuentes utilizada para elementos que usan tipo monoespaciado, como ejemplos de código.	Cadena o lista	Consolas, 'Liberation Mono', Courier, monoespacio
5	$header-sizes Define los tamaños de pantalla de los encabezados y cada clave es un punto de interrupción, y cada valor es un mapa de tamaños de encabezados.	Mapa	`small: ( 'h1': 24 'h2': 20 'h3': 19 'h4': 18 'h5': 17 'h6': 16 ) medium: ( 'h1': 48 'h2': 40 'h3': 31 'h4': 25 'h5': 20 'h6': 16 )`
6	$header-color Proporciona color a los encabezados.	Color	heredar
7	$header-lineheight Define la altura de línea de los encabezados.	Número	1.4
8	$header-margin-bottom Proporciona margen inferior de encabezados.	Número	0.5rem
9	$header-text-rendering Define el método para la representación de texto.	Cuerda	optimizarLegibilidad
10	$small-font-size Especifica el tamaño de fuente para elementos <pequeños>.	Número	80%
11	$paragraph-margin-bottom Especifica el margen inferior de los párrafos.	Número	1rem
12	$paragraph-text-rendering Métodos para el párrafo de representación de texto.	Cuerda	optimizarLegibilidad
13	$code-color Proporciona color de texto a las muestras de código.	Color	$ negro
14	$code-font-family Proporciona una familia de fuentes a los ejemplos de código.	Cadena o lista	$ font-family-monospace
15	$code-border Especifica el borde alrededor del código.	Lista	1 px sólido $ gris medio
dieciséis	$code-padding Especifica el relleno alrededor del texto.	Número o lista	rem-calc (2 5 1)
17	$anchor-color Color predeterminado para enlaces.	Color	$ color primario
18	$anchor-color-hover Especifica el color predeterminado para los enlaces al pasar el mouse.	Color	color de escala ($ color de ancla, $ luminosidad: -14%)
19	$anchor-text-decoration Decoración de texto predeterminada para enlaces.	Cuerda	ninguna
20	$anchor-text-decoration-hover Decoración de texto predeterminada para enlaces al pasar el mouse.	Cuerda	ninguna
21	$hr-width Define el ancho máximo de un divisor.	Número	$ ancho global
22	$hr-border Especifica el borde predeterminado de un divisor.	Lista	1 px sólido $ gris medio
23	$hr-margin Margen predeterminado para un divisor.	Número o lista	rem-calc (20) automático
24	$list-lineheight Define la altura de la línea para los elementos de una lista.	Número	$ párrafo-altura de línea
25	$list-style-type Proporciona el tipo de viñeta para listas desordenadas.	Cuerda	Dto
26	$list-style-position Define el posicionamiento de viñetas en listas desordenadas.	Cuerda	fuera de
27	$list-side-margin Define el margen del lado izquierdo (o derecho).	Número	1.25rem
28	$defnlist-term-weight Proporciona el peso de la fuente para los elementos <dt>.	Cuerda	$ global-weight-bold
29	$defnlist-term-margin-bottom Proporciona espacio entre los elementos <dt> y <dd>.	Número	0.3rem
30	$blockquote-color Aplica el color del texto de los elementos <blockquote>.	Color	$ gris oscuro
31	$blockquote-padding Proporciona relleno dentro de los elementos <blockquote>.	Número o lista	rem-calc (9 20 0 19)
32	$blockquote-border Proporciona un borde lateral para los elementos <blockquote>.	Lista	1 px sólido $ gris medio
33	$cite-font-size Define el tamaño de fuente para los elementos <cite>.	Número	rem-calc (13)
34	$cite-color Proporciona color de texto a los `<cite>`elementos.	Color	$ gris oscuro
35	$keystroke-font Define la familia de fuentes para los elementos <kbd>.	Cadena o lista	$ font-family-monospace
36	$keystroke-color Define el color del texto para los elementos <kbd>.	Color	$ negro
37	$keystroke-background Proporciona color de fondo para los elementos <kbd>.	Color	$ gris claro
38	$keystroke-padding Especifica el relleno para los elementos <kbd>.	Número o lista	rem-calc (2 4 0)
39	$keystroke-radius Muestra el radio del borde de los elementos <kbd>.	Número o lista	$ radio-global
40	$abbr-underline Proporciona el estilo de borde inferior para los elementos <abbr>.	Lista	1px punteado $ negro

En este capítulo, estudiaremos sobre Typography Helpers. Los ayudantes de tipografía se utilizan para dar formato a su texto de formas semánticamente relevantes. Las clases de ayuda en Foundation le permiten aplicar andamios a algunos estilos tipográficos más rápido.

En la siguiente tabla se enumeran los auxiliares de tipografía que se utilizan en Foundation.

No Señor.	Ayudante de tipografía y descripción
1	Alineación del texto Ayuda a cambiar la alineación del texto del elemento como izquierda , derecha , centro y justificación .
2	Subencabezado Los subtítulos se pueden agregar a cualquier elemento de encabezado utilizando la clase .subheader .
3	Párrafo principal Es un bloque de texto considerablemente más grande en comparación con el texto normal, que se puede utilizar para publicidad u otro texto descriptivo.
4	Lista sin viñetas De forma predeterminada, <ul> es una lista con viñetas en Foundation. Para eliminar las viñetas, puede usar la clase .no-bullet .
5	Estadísticas Siempre que se trate de un tablero, debe resaltar algunos números importantes. Puede lograr esto usando la clase .stat .

Referencia de Sass

Variables

La siguiente tabla enumera las variables SASS en el archivo de configuración del proyecto que hace que los estilos predeterminados del componente se personalicen.

No Señor.	Nombre y descripción	Tipo	Valor por defecto
1	$lead-font-size Tamaño de fuente de los párrafos iniciales de forma predeterminada.	Número	$ tamaño-de-fuente-global * 1.25
2	$lead-lineheight Altura de línea para el párrafo inicial de forma predeterminada.	Cuerda	1,6
3	$subheader-lineheight Altura de línea predeterminada del subtítulo.	Número	1.4
4	$subheader-color Color de fuente predeterminado del subtítulo.	Color	$ gris oscuro
5	$subheader-font-weight Peso de fuente predeterminado del subtítulo.	Cuerda	$ global-weight-normal
6	$subheader-margin-top Margen superior predeterminado del subtítulo.	Número	0.2rem
7	$subheader-margin-bottom Margen inferior predeterminado del subtítulo.	Número	0.5rem
8	$stat-font-size Tamaño de fuente predeterminado del número estático	Número	2.5rem

En este capítulo, estudiaremos sobre basic controls. Foundation proporciona controles básicos como botones , controles deslizantes e interruptores .

La siguiente tabla enumera los controles básicos utilizados en Foundation.

No Señor.	Control y descripción básicos
1	Botón Foundation admite muchos estilos de botones que se pueden personalizar según sus necesidades.
2	Grupo de botones Son contenedores para los elementos de acción correspondientes. Funciona bien cuando se muestra un grupo de acciones en una barra.
3	Botón Cerrar El botón Cerrar se usa cuando desea que algo desaparezca haciendo clic en él.
4	Deslizador Los controles deslizantes son muy útiles para establecer ciertos valores dentro de un rango.
5	Cambiar Le permite apagar o encender el interruptor haciendo clic en él.

Descripción

Foundation proporciona algunas opciones diferentes para diseñar elementos de navegación. Se incluyen muchos patrones de navegación sencillos; se puede integrar en el formulario para una solución de navegación robusta y receptiva.

La siguiente tabla describe los diferentes tipos de navegación junto con la descripción.

No Señor.	Tipo y descripción
1	Resumen de navegación La navegación contiene enlaces a la otra sección y consta de muchos patrones de navegación.
2	Menú El menú se usa para construir muchos componentes de navegación.
3	Menú desplegable El complemento del menú desplegable se utiliza para crear submenús debajo del menú principal.
4	Menú detallado El complemento de menú detallado se utiliza para crear submenús en el menú principal en formato deslizante.
5	Menú acordeón Muestra el menú plegable con efectos de acordeón y proporciona soporte para el colapso automático utilizando el complemento Menú de acordeón.
6	Barra superior La barra superior ayuda a mostrar la barra de navegación compleja fácilmente en diferentes tamaños de pantalla.
7	Navegación receptiva El complemento de menú receptivo asigna el menú en diferentes tamaños de pantalla.
8	Magallanes Magellan crea una navegación, que está en una posición fija; rastrea automáticamente la lista de navegación en una página, según la posición de desplazamiento.
9	Paginación Bootstrap maneja la paginación, una lista desordenada como muchos otros elementos de la interfaz.
10	Migas de pan Una ruta de navegación especifica la ubicación actual de un sitio dentro de la jerarquía de navegación.

Los contenedores de base se utilizan para hacer todo el ancho de los navegadores en todo momento para el sitio y envolver el contenido del sitio.

La siguiente tabla enumera algunos de los contenedores utilizados en Foundation:

No Señor.	Contenedor y descripción
1	Acordeón Los acordeones contienen pestañas verticales que se utilizan en sitios web para expandir y contraer una gran cantidad de datos.
2	Gritar Coloca el contenido dentro del componente.
3	Paneles desplegables Muestra el contenido cuando hace clic en el botón.
4	Objeto multimedia Agrega objetos multimedia como imágenes, videos, comentarios de blogs, etc. junto con algunos contenidos.
5	Fuera del lienzo Activa el menú de navegación desde el área visible y muestra el contenido principal.
6	Revelar-Modal Foundation permite crear diálogos modales o ventanas emergentes usando la clase de revelación .
7	Mesas Foundation proporciona diseños para mostrar datos en formato tabular.
8	Pestañas Es una pestaña basada en la navegación que muestra el contenido en diferentes paneles sin salir de la página.

En este capítulo, estudiaremos sobre los medios en Foundation. La Fundación consta de varios tipos de medios como Flex Video , Label , órbita , barra de progreso e información sobre herramientas . La siguiente tabla enumera todos los tipos de papel.

No Señor.	Tipo de medio y descripción
1	Video flexible Se utiliza para incrustar videos en un contenedor de video flexible para mantener la relación de aspecto correcta a pesar del tamaño de la pantalla.
2	Etiqueta Se puede usar para el estilo en línea que se puede colocar en el cuerpo para invocar una sección específica o para adjuntar metadatos.
3	Orbita Es un control deslizante potente y receptivo que permite al usuario deslizar el dedo en dispositivos con pantalla táctil.
4	Barra de progreso Se utiliza para mostrar su progreso y se puede agregar a sus diseños.
5	Información sobre herramientas Se utiliza para mostrar información adicional para un término o acción en una página.

Descripción

El complemento es un software que proporciona una funcionalidad adicional que no fue completada originalmente por la funcionalidad principal de Foundation. Los complementos básicos se pueden cargar para ampliar la funcionalidad del sitio. Los complementos se utilizan para facilitar su trabajo.

La siguiente tabla describe los diferentes tipos de complementos junto con la descripción.

No Señor.	Tipo y descripción
1	Acatar Abide se usa en la biblioteca de validación de formularios HTML5 con API nativa usando los atributos y patrones requeridos.
2	Igualada Equalizer es una forma de crear contenido múltiple con alturas iguales en su página.
3	Intercambio Se utiliza para cargar el contenido adaptable según el dispositivo del usuario.
4	Toggler Alternar se usa para cambiar de un ajuste a otro.
5	Pegajoso El complemento Sticky se utiliza para crear un contenido o una imagen constante en el sitio web.

Foundation proporciona un conjunto de funciones de utilidad SASS, que se pueden utilizar con util , color , selector , unit , value y muchos más.

Puede importar todos los archivos de utilidades a la vez utilizando la siguiente línea de código:

@import 'util/util';

También puede importar archivos de utilidades individuales como se muestra a continuación:

@import 'util/color';
@import 'util/selector';
@import 'util/unit';
@import 'util/value';

Referencia de Sass

Puede cambiar los estilos de los componentes utilizando las siguientes funciones de SASS.

primer plano

Proporciona el color de primer plano a los elementos según el color de fondo. Utiliza el siguiente formato para asignar diferentes tipos de parámetros:

foreground($color, $yes, $no, $threshold)

Los parámetros anteriores se especifican en la siguiente tabla:

No Señor.	Descripción de parámetros	Tipo	Valor por defecto
1	$color Comprueba la claridad del color.	Color	Ninguna
2	$yes Si el color es claro, devuelve $ yes color.	Color	$ negro
3	$no Si el color es oscuro, devuelve $ sin color.	Color	$ blanco
4	$threshold Representa el umbral de la ligereza.	Porcentaje	60%

escala inteligente

Aporta el color adecuado a los elementos según su ligereza. Utiliza el siguiente formato para especificar el color apropiado:

smart-scale($color, $scale, $threshold)

Los parámetros dados anteriormente se especifican en la siguiente tabla:

No Señor.	Descripción de parámetros	Tipo	Valor por defecto
1	$color Se utiliza para escalar el color.	Color	Ninguna
2	$scale Especifica el porcentaje para escalar hacia arriba o hacia abajo.	Porcentaje	5%
3	$threshold Representa el umbral de la ligereza.	Porcentaje	40%

entradas de texto

Crea un selector mientras usa el tipo de entrada de texto. Utiliza el siguiente formato para especificar los tipos de entrada:

text-inputs($types)

Utiliza el parámetro como se especifica en la siguiente tabla:

No Señor.	Descripción de parámetros	Tipo	Valor por defecto
1	$types Proporciona varios tipos de entrada de texto para generar un selector.	Color	-

unidad de tira

Elimina la unidad del valor y devuelve solo el número. Utiliza el siguiente formato para eliminar la unidad del valor:

strip-unit($num)

Utiliza el parámetro como se especifica en la siguiente tabla:

No Señor.	Descripción de parámetros	Tipo	Valor por defecto
1	$num Especifica el número cuando elimina la unidad del valor.	Color	Ninguna

rem-calc

Cambia el valor de píxel para que coincida con los valores rem. Utiliza el siguiente formato para convertir valores de píxeles en valores rem:

rem-calc($values, $base)

Utiliza los siguientes parámetros como se especifica en la tabla:

No Señor.	Descripción de parámetros	Tipo	Valor por defecto
1	$values Convierte los valores de los píxeles en valores rem y los separa mediante espacios. Si está convirtiendo una lista separada por comas, ajuste la lista entre paréntesis.	Número o lista	Ninguna
2	$base Proporciona el valor base mientras convierte el píxel en valor remoto. Si hay un valor nulo para la base, la función usa la variable $ base-font-size como base.	Número	nulo

tiene valor

Especifica el valor si no es falso. Los valores falsos incluyen nulo, ninguno, 0 o una lista vacía. Utiliza el siguiente formato para especificar el valor:

has-value($val)

Utiliza el parámetro como se especifica en la siguiente tabla:

No Señor.	Descripción de parámetros	Tipo	Valor por defecto
1	$val Comprueba el valor especificado.	Mezclado	Ninguna

ponerse de lado

Especifica el lado de un valor y define los valores superior / derecho / inferior / izquierdo en el relleno, margen, etc. Utiliza el siguiente formato para especificar el lado de un valor:

has-value($val)

Utiliza los siguientes parámetros como se especifica en la tabla:

No Señor.	Descripción de parámetros	Tipo	Valor por defecto
1	$val Especifica el lado de un valor.	Lista o número	Ninguna
2	$side Determina en qué lado debe regresar el valor (superior / derecho / inferior / izquierdo).	Palabra clave	Ninguna

get-border-value

Determina el valor de borde de un elemento. Utiliza el siguiente formato para especificar el valor del borde:

get-border-value($val, $elem)

Utiliza los siguientes parámetros como se especifica en la tabla:

No Señor.	Descripción de parámetros	Tipo	Valor por defecto
1	$val Encuentra un valor específico del borde.	Lista	Ninguna
2	$elem Se utiliza para extraer el componente de borde.	Palabra clave	Ninguna

Importador

Importa el contenido de los mixins de SASS que se colocan en el archivo scss / util / _mixins.scss . Puede importar los mixins de SASS utilizando la siguiente línea de código:

@import 'util/mixins';

Referencia de Sass

Puede cambiar los estilos de los componentes utilizando las funciones SASS.

Mixins

Puede usar los siguientes mixins para construir la estructura de clases CSS para sus componentes.

CSS-TRIANGLE

Se utiliza para crear flechas desplegables, pips desplegables y muchos más. Utiliza el selector <i> & :: before </i> o <i> & :: after </i> para adjuntar un triángulo a un elemento existente. Utiliza el siguiente formato:

@include css-triangle($triangle-size, $triangle-color, $triangle-direction);

Utiliza los siguientes parámetros como se especifica en la tabla:

No Señor.	Descripción de parámetros	Tipo	Valor por defecto
1	$triangle-size Define el ancho del triángulo.	Número	Ninguna
2	$triangle-color Define el color del triángulo.	Color	Ninguna
3	$triangle-direction Define la dirección del triángulo como arriba, derecha, abajo o izquierda.	Palabra clave	Ninguna

HAMBURGER

Se utiliza para crear iconos de menú con ancho, alto, número de barras y colores. Utiliza el siguiente formato:

@include hamburger($color, $color-hover, $width, $height, $weight, $bars);

Utiliza los siguientes parámetros como se especifica en la tabla:

No Señor.	Descripción de parámetros	Tipo	Valor por defecto
1	$color Define el color del icono.	Color	Ninguna
2	$color-hover Define el color cuando pasas el cursor sobre el icono.	Color	Ninguna
3	$width Define el ancho del icono.	Número	Ninguna
4	$height Define la altura del icono.	Número	Ninguna
5	$weight Define el peso de las barras individuales en el icono.	Número	Ninguna
6	$bars Define el número de barras en el icono.	Número	Ninguna

BACKGROUND-TRIANGLE

Se utiliza para especificar la imagen de fondo de un elemento. Utiliza el siguiente formato:

@include background-triangle($color);

Utiliza el parámetro como se especifica en la tabla -

No Señor.	Descripción de parámetros	Tipo	Valor por defecto
1	$color Define el color del triángulo.	Color	$ negro

CLEARFIX

Este mixin borra automáticamente los elementos secundarios, por lo que no hay necesidad de marcado adicional. Utiliza el siguiente formato:

@include clearfix;

AUTO-WIDTH

Automáticamente dimensiona los elementos en función del número de elementos presentes en el contenedor. Utiliza el siguiente formato:

@include auto-width($max, $elem);

Utiliza los siguientes parámetros como se especifica en la tabla:

No Señor.	Descripción de parámetros	Tipo	Valor por defecto
1	$max Identifica el número máximo de artículos en el contenedor.	Número	Ninguna
2	$elem Utiliza una etiqueta para los selectores de hermanos.	Palabra clave	li

DISABLE-MOUSE-OUTLINE

Se usa para deshabilitar el contorno alrededor del elemento cuando identifica la acción de entrada del mouse. Utiliza el siguiente formato:

@include disable-mouse-outline;

ELEMENT-INVISIBLE

Se utiliza para ocultar los elementos y puede estar disponible para teclados y otros dispositivos. Utiliza el siguiente formato:

@include element-invisible;

ELEMENT-INVISIBLE-OFF

Se utiliza para eliminar los elementos invisibles e invierte la salida de CSS mediante el mixin element-invisible () . Utiliza el siguiente formato:

@include element-invisible-off;

VERTICAL-CENTER

Se utiliza para colocar los elementos centrados verticalmente dentro del elemento principal no estático utilizando el siguiente formato:

@include vertical-center;

HORIZONTAL-CENTER

Se utiliza para colocar los elementos centrados horizontalmente dentro del elemento principal no estático utilizando el siguiente formato:

@include horizontal-center;

ABSOLUTE-CENTER

Se usa para colocar los elementos absolutamente centrados dentro del elemento padre no estático usando el siguiente formato:

@include absolute-center;

Foundation proporciona la biblioteca Motion UI para crear transiciones y animaciones de UI y es utilizada por componentes de Foundation como Toggler , Reveal y Orbit .

Instalación de Motion UI

Puede instalar la biblioteca Motion UI en su proyecto usando npm o bower como se muestra en la siguiente línea de código:

$ npm install motion-ui --save-dev
bower install motion-ui --save-dev

Puede agregar una ruta para la biblioteca Motion UI en Compass usando config.rb como se muestra en la siguiente línea de código:

add_import_path 'node_modules/motion-ui/src'

Puede incluir la ruta en el gulp-sass usando las siguientes líneas de código:

gulp.src('./src/scss/app.scss')
   .pipe(sass( {
      includePaths: ['node_modules/motion-ui/src']
   }));

Importe la biblioteca Motion UI en el archivo SASS usando el siguiente código:

@import 'motion-ui'

Transiciones integradas

Foundation proporciona efectos de transición mediante el uso de clases de transición creadas por la biblioteca Motion UI. Creemos un ejemplo simple usando efectos de transición.

Transiciones personalizadas

Puede configurar las clases de transición personalizadas utilizando la biblioteca Motion UI. Por ejemplo, estableceremos clases personalizadas para la transición mui-hinge () , que rota el elemento -

@include mui-hinge(
   $state: in,
   $from: right,
   $turn-origin: from-back,
   $duration: 0.5s,
   $timing: easeInOut
);

Animación

Puede utilizar los efectos de transición de Motion UI para crear animaciones CSS. Haga clic en este enlace para comprobar cómo funciona la animación en el modal utilizando la clase de animación de datos .