Foundation para principiantes: Navegación fija, video flexible y Zepto.

En esta parte de nuestra revisión de Zurb Foundation, hablaremos sobre Magellan, que crea una navegación fija (que se adhiere a la parte superior de la página). Analizaremos las clases de visibilidad, el soporte de derecha a izquierda, las pulsaciones de teclas, las miniaturas, el vídeo flexible y los entresijos de zepto. Explicaré los casos de uso de estas funciones y la mejor manera de implementarlas en tus proyectos.

En esta sesión hemos cubierto una gran parte del framework de Foundation y todavía hay un buen camino por recorrer. Veamos ahora algunas funciones que puedes implementar rápidamente en tus sitios. Esta vez comenzaremos con un complemento de JavaScript, se llama Magellan y te permite agregar navegación fija a tus proyectos.

Magellan

No es raro que un cliente solicite una navegación que permanezca fija en la página cuando el usuario navega fuera de la navegación estándar, como desplazarse hacia abajo en la página. Magellan viene al rescate, agregando navegación fija a la página una vez que el usuario se desplaza más allá de cierto punto.

Con una estructura simple, es fácil comenzar.

1

<div data-magellan-expedition="fixed">

2

  <ul class="sub-nav">

3

    <li data-magellan-arrival="contact"><a href="#">Contact</a></li>

4

    <li data-magellan-arrival="about"><a href="#">About</a></li>

5

  </ul>

6

</div>

Ubicado en una estructura de lista uniforme tradicional con un div para contener todo, esto debería ser rápido y fácil de poner en marcha. Hay dos tipos de atributos especiales para Magellan; data-magellan-expiditon, que se utiliza como tipo de posición y data-magellan-arrival, que se puede emparejar con elementos como un ancla de página.

Como este complemento de JavaScript es tan ligero, la única otra opción que necesitas saber son las que se pueden pasar en la inicialización.

1

$(document).foundation('magellan',{

2

  // specify the class used for active sections

3

  activeClass: 'active',

4

  // how many pixels until the magellan bar sticks, 0 = auto

5

  threshold: 0

6

});

Así que de nuevo, aquí hay dos opciones; fíjate una clase magallanes personalizada y establece el punto en la página donde magallanes entrará en acción.

Visibilidad

¡Ahora lo ves, ahora no! Muy a menudo, puede ser complicado volver a montar todo tu contenido para diferentes tamaños de pantalla. Con las clases de visibilidad de Foundation, simplemente puedes mostrar más o menos elementos según el conjunto de puntos de interrupción. Comencemos con las clases "show", todas bastante simples con una variedad de puntos de interrupción para jugar. Encuentro que las clases de visibilidad son más útiles cuando necesito agregar/eliminar elementos entre el celular y el escritorio, tal vez para un dispositivo como un iPad.

1

.show-for-small       /* Visible up to 768px */

2

.show-for-medium-down /* Visible from 768px down */

3

.show-for-medium      /* Visible between 768px and 1280px */

4

.show-for-medium-up   /* Visible from 768px up */

5

.show-for-large-down  /* Visible from 1280px down */

6

.show-for-large       /* Visible between 1280px and 1440px */

7

.show-for-large-up    /* Visible from 1280px up */

8

.show-for-xlarge      /* Visible above 1440px only */

Para ocultar elementos en estos mismos puntos de interrupción, utiliza "hide" en lugar de "show". ¿Quizás necesitas una clase específica de orientación? Estos también están incluidos. También notarás clases "touch". Aquí hay muchas opciones para elegir.

1

.show-for-landscape   /* Visible for landscape orientation */

2

.show-for-portrait    /* Visible for portrait orientation */

3

.hide-for-landscape   /* Hidden for landscape orientation */

4

.hide-for-portrait    /* Hidden for portrait orientation */

5

6

/* The touch detection classes */

7

.show-for-touch       /* Visible for touch enabled devices */

8

.hide-for-touch       /* Hidden for touch enabled devices */

Nuevamente, estos serán realmente útiles si te encuentras en un dispositivo pequeño y necesitas ocultar algunos elementos o, al contrario, si te encuentras en un dispositivo grande, puedes agregar algunos elementos de más.

Soporte de RTL

Pensé que cubriría esto rápidamente, ya que nadie menciona el soporte de derecha a izquierda.

Esto es sumamente útil si alguna vez tienes un proyecto internacional con una base de usuarios centrada en árabe (por ejemplo). Tomemos el persa, que usa una versión modificada del alfabeto árabe, que requiere texto de derecha a izquierda. Mientras que sitios como BBC News demuestran esta funcionalidad, tienen un equipo de desarrolladores capaces de asumir este desafío de diseño. En Foundation, todo está hecho por ti.

1

 <html class="no-js" lang="ar" dir="rtl">

Reemplaza tu etiqueta html con esto y habrás terminado. Espera, sé lo que estás pensando, no quiero árabe, ¿verdad? No te preocupes, también se admiten chino zh, farsi fa, hebreo he/iw, japonés ja, urdu ur, yi/ji yiddish. Simplemente cambia el valor del atributo "lang" con tu idioma preferido.

Pulsaciones de teclas

Apuesto a que muchos de ustedes que han descargado Foundation han hojeado la casilla de verificación de pulsaciones de teclas porque no estaban seguros de qué era. ¿Verdad? Bueno, si aún no has mirado los documentos, estás a punto de averiguarlo.

Las pulsaciones envuelven el texto y lo muestran como una tecla. Entonces, en lugar de decir presionar "control", "alt" y "eliminar" en un texto antiguo aburrido, puedes arreglarlo y darle algún significado.

1

<kbd>ctrl</kbd> + <kbd>alt</kbd> + <kbd>del</kbd>

Simplista pero efectivo, especialmente si tienes teclas asignadas a ciertas funciones, como hacer que los botones de las flechas de derecha e izquierda controlen el slider.

Miniaturas

Las miniaturas son una forma rápida de diseñar una imagen pequeña con un enlace.

Este es uno de esos pequeños detalles que se suma a la magia que tiene Foundation. Toma una imagen, pégala en una etiqueta <a class="th"> con una clase de "th". ¡Y listo! Trabajo hecho. Esto es ideal para proyectos que tienen poca o ninguna entrada de diseño, ya que el desarrollador puede hacer que el sitio se vea genial con los estilos minimizados incluidos en el framework.

1

<a href="#" class="th" >

2

3

<img src="images/funkyTown.jpg" alt="Get down to funky town" />

4

5

</a>

Video flexible

Insertar videos puede ser una molestia, especialmente con esos viejos reproductores de video basados en flash que tienen conjuntos dobles de atributos de dimensión (uf, qué inconveniente) hacer que los videos también sean adaptables, es un esfuerzo. El objetivo es simple; deseas agregar tu video favorito de gatos (lol) a tu sitio, pero la maldita cosa se aplasta o se corta cuando lo miras en tu teléfono todas las noches antes de acostarte, o todas las mañanas en el iPad mientras estás en el baño. Con flex-video puedes soltar un suspiro de alivio y volver a toda la acción del gato.

Inserta cualquier video de sitios populares (como Youtube y Vimeo) en un div con la clase "flex-video", luego la base mantendrá la relación de aspecto en su lugar, escalando el video y previniendo gatos horriblemente desfigurados o cortados por la mitad.

1

<div class="flex-video">

2

3

<iframe width="420" height="315" src="//www.youtube.com/embed/RcVyl9X3gFo" frameborder="0" allowfullscreen></iframe>

4

5

</div>

Zepto

En cada paquete del framework Foundation se encuentra una biblioteca JavaScript especial llamada "zepto", que se comporta de la misma manera que jQuery.

En la carga de la página, Foundation busca ver si zepto se ejecutará. Si lo hace, jQuery se envía al paso malo. Sin embargo, el problema es que zepto no es un reemplazo completo de jQuery. De hecho, son aproximadamente 7,100 líneas de código más livianas que jQuery, entonces, ¿por qué es esto y por qué Foundation descartaría jQuery para esta biblioteca infantil de JavaScript?

Zepto duplica lo suficiente del conjunto de funciones de jQuery para hacer frente a todos los comandos básicos que establece Foundation. Usar una biblioteca que es mucho más liviana es un movimiento inteligente ahora que el framework está pensado para dispositivos móviles primero: Se necesitan más de unos segundos para cargar jQuery en un dispositivo móvil a través de una conexión celular. Sin embargo, esas 7.100 líneas de código adicionales no son redundantes, ya que se encargan de toda la animación elegante y la compatibilidad del navegador, entre otras cosas.

Soy un usuario de animación de jQuery bastante pesado, por lo que tiendo a matar a zepto desde el principio. Sin embargo, recientemente trabajé en un proyecto que era solo para dispositivos móviles y que no requería ninguna animación de jQuery; el uso de zepto les dio a los usuarios un tiempo de carga 2,3 segundos más rápido. Por lo tanto, si puedes prescindir de la hinchazón de jQuery, entonces zepto es un fantástico reemplazo básico.

Herramienta útil

Dale a tus usuarios algo que hacer cuando inevitablemente se pierdan en un callejón sin salida en tu sitio web, ¡el juego 404 de Invader!

Encontrado en el sitio web "mass:werk", esta es una forma divertida y potencialmente adictiva de perderte en tu próximo proyecto de sitio. Usa las teclas de flecha para controlar el arma A y S para moverte y la barra espaciadora para disparar. (¿Ves lo que hice ahí?)

Próximamente

En el próximo artículo veremos SASS, cómo obtener la versión SASS de Foundation, configurarla, las herramientas que necesitarás y una breve descripción general de cómo usar este poderoso preprocesador de estilo en tus futuros proyectos.