Ya llevamos 5 meses de este 2016, y en todo este tiempo hemos ido descubriendo librerías, tanto de CSS como de Javascript, que hemos considerado interesante compartir con vosotros. Algunas son muy potentes y ofrecen múltiples funcionalidades, y otras, simplemente nos han parecido originales y divertidas. ¿Quieres ver qué es lo que te traemos? Pues echa un vistazo...
Hint.css
Librería de puro CSS para añadir tooltips en elementos HTML. Hint es muy compacto respecto al tamaño además, ofrece un montón de opciones de personalización tales como diferentes tamaños, colores y también animaciones. No requiere de ningún tipo de implementación, los tooltips se creando y personalizan únicamente añadiendo los datos de atributos correctos.
Turntable.js
Con Turntable.js podrás crear, sin ningún esfuerzo, demos rotativas de objetos 3D muy chulas, colocando un array de imágenes en un slider on-hover. Esto permite a los usuarios crear locuras tales como acceder rápidamente a diferentes imágenes, crear un efecto flipbook y ver un producto desde todos los ángulos.
Magic
Magic es una librería para animaciones hecho enteramente con vanilla CSS. Es extremadamente ligera y fácil de utilizar por todo tipo de usuarios. Todas las animaciones son ejecutadas añadiendo o quitando clases, y pueden ser personalizadas simplemente sobreescribiendo la hoja de estilo que trae por defecto.
Sausage
Sausage es una herramienta de jQuery que sigue a la barra de desplazamiento y toma nota de la sección de la página en la que estás leyendo. Esto plugin puede ser una gran ayuda para cuando diseñemos un gran hub de documentación o una web de scroll infinito. Si cuentas con una paginación vertical, esta herramienta te lo hará todo más sencillo.
Odometer
Esta librería de Javascript tiene un nombre muy raro, Odometer. Odometer viene de odómetro, que es el aparato que utilizan los taxistas ,el cual va marcando la cantidad de dinero que se debe pagar por el trayecto recorrido. Esta librería recrea ese dichoso aparato y puede ser utilizada para añadir transiciones verticales entre números. Es muy ligera, fácil de implementar y puedes emular distintos efectos como la transición típica de las máquinas tragaperras o el de las estaciones de tren.
Fullpage.js
En la actualidad vemos un montón de páginas que utilizan efectos de slide a pantalla completa, en la que haciendo uso de alguna de las flechas de transición, cambiamos la página entera. A menos que tengas poca idea de programación, esta librería es la herramienta ideal para crear este tipo de funcionalidad. Es super sencilla, esta muy bien documentada y cuenta con soporte para multitud de navegadores.
Chart.js
Librería alucinante para crear gráficos animados que llamen la atención de los visitantes. Para un mejor rendimiento, Chart.js se basa en elementos canvas para dibujar todos los gráficos, pero no requiere que tengas conocimiento sobre canvas para poder utilizarlo. Todas las opciones de personalización (y hay muchísimas opciones) están controladas por una simple API de Javascript.
Bricklayer
Librería de Javascript para construir grids en cascada tal y como hacen páginas como Pinterest. Trabajar con Bricklayer no es muy complicado del todo, gracias a él podrás disfrutar de un diseño robusto y responsive. Cuenta con dependencias externas, lo que hace que sea muy sencillo de integrar con Angular, React o cualquier otro framework grande.
Flatmarket
Flatmarket es un proyecto open-source que nos proporciona una de las plataformas para e-commerce más baratas y sencillas de todo el mercado. Consiste en una web estática para los clientes y un servidor Node.js que soporta todos los pagos.
Modaal
Modaal es un plugin de jQuery para crear ventanas modales cuya máxima prioridad es la accesibilidad. Cuenta con muchas características que hacen que esta funcionalidad llegue a todo el mundo, ya que es fácil de leer y está adaptado a todas las resoluciones. Entre esas características está el mostrar un teclado en pantalla, incluir atributos ARIA o mantener el focus adecuado.
Web Starter Kit
Web Starter Kit es una colección de herramientas que ayudan a los desarrolladores a poner a punto sus proyectos. Está diseñada por Google y se centra en proporcionarnos una maqueta que funciona igual de bien en diferentes dispositivos y navegadores. Muchas de las librerías incluidas en este kit son MDL, Sass, Babel y gulp, entre otras.
Flipside
Basicamente es un botón que se transforma automáticamente en una ventana de diálogo. Lo más molón de todo son las transiciones, ya que, dependiendo de en qué parte del botón hayamos clicado, mostrará un efecto distinto. Flipside no es una librería en sí, pero nos ha gustado tanto que hemos decidido compartirla con vosotros. Su código está disponible en Github, por si quieres utilizarla.
Responsify.js
Responsify es un plugin de jQuery que garantiza que una imagen siempre sea responsive y, lo más difícil de todo, que siempre muestre el contenido correcto. Esto se hace añadiendo un atributo al tag img en donde definiremos el area de focus. Si la imagen tiene que ser redimensionada, Responsify intentará mantener el area de focus visible, y esconder las partes de la imagen que sean menos importantes.
Select2
Los campos select siguen siendo esa gran asignatura pendiente de los navegadores. Por suerte, existen plugins como Select2 que lidian con este problema, dotan de un aspecto moderno a dichos campos y garantizan una visualización homogénea entre todos los navegadores. Esta librería también cuanta con unas características extras como buscador, scroll infinito y soporte con IE8.
Vex
Un pequeño plugin de jQuery para crear popup con un interesante efecto 3D. Esta librería solo pesa 2Kb, por lo que, prácticamente, no cuesta nada incluirla en tus proyectos. Cuenta con una pareja de themes disponibles, aunque también puedes añadir tus propias personalizaciones de forma sencilla.
Fuente: tutorialzine.com