10 librerías de CSS y Javascript que debes conocer sí o sí

Nuestra misión en programacion.net es mantenerte al día con las últimas y más frescas tendencias dentro del desarrollo web. Es por eso que todos los meses elaboro una colección de algunos de los mejores recursos con los que me he topado en Internet y creo que deberíais conocer.

Para este mes he seleccionado para ti 10 librerías libres que te ayudarán a realizar diseños responsive de una manera sencilla, hacer magia con JavaScript, darle ese punto chic a tus proyectos, y mucho más. ¿Quieres conocerlas? ¡Pues vamos allá!

Bideo.js

Utiliza Bideo para hacer que tus landing pages sean más chulas mediante la inserción de un video a pantalla completa de fondo. Esta librería se puede utilizar en cualquier página HTML, y con ella, te asegurará de que tu video sea responsive y que siempre se muestre correctamente. También ofrece la posibilidad de reproducir el vídeo automaticamente, así como mostrar una imagen de portada estática en caso de que el archivo multimedia tarde un par de segundos en cargar.

Push

Las notificaciones push están bien soportadas por los navegadores desde hace un tiempo, pero siempre han sufrido la falta de una API cross-browser. Push.js es una librería que viene a resolver este problema, ofreciendo una manera limpia y universal de controlar las notificaciones para que funcionen igual de bien en Chrome, Firefox, Safari e IE.

Cutestrap

Cutestrap es un framework CSS que sirve como alternativa a Bootstrap, puesto que es pequeña y compacta. Solo pesa 8kb, y ofrece un gran número de componentes UI, como la posibilidad de crear un grid responsive, así como un montón de clases de modificadores muy útiles. Debido a su simplicidad, Cutestrap es fácil de personalizar sobrescribiendo los estilos predeterminados o mediante el uso de Sass.

Timedropper

Timedropper es un time picker con un diseño excelente y animaciones muy sutiles. Está desarrollado con jQuery y se puede agregar a cualquier campo input con esta sencilla sentencia $('#tu-input').timeDropper();. También te recomendamos el hermano de Timedropper, Datedropper, un date picker maravilloso al que sin duda, debes echar un ojo.

CSSgram

CSSgram es una librería que te ofrece más de 20 recreaciones de los filtros de Instagram utilizando los filtros de CSS y las propiedades blend. No utiliza nada de Javascript para aplicar dichos filtros, por lo que es extremadamente fácil de usar, ya sea a través de CSS puro o Sass. CSSgram funciona en todos los navegadores, tanto de escritorio como de móviles, excepto para IE, que no soporta los filtros de CSS.

Intense Images

Un estupendo visor de imágenes que permite a los usuarios hacer zoom en cualquier objeto multimedia y examinarlo de cerca en pantalla completa. La librería se las arregla para verse bien sin ninguna animación o efecto fantástico, lo que también hace que sea muy fácil de personalizar y de adaptarlo a tus necesidades. Intense Images no tiene dependencias externas y funciona en todos los navegadores modernos.

Picnic

Picnic es un framework CSS que se diferencia de la gran cantidad de librerías front-end por una cualidad única, la invasividad. Lo que esto significa es que Picnic CSS no se basa en el usuario para añadir clases a cada elemento para darl estilo. En vez de eso, invade los estilos por defecto de la página y personaliza automáticamente todos los elementos HTML, dejando la plantilla con muy pocas líneas de código, y sobre todo, muy limpia.

Embed.js

Plugin de JavaScript para embeber emojis, imágenes, vídeos, mapas y todo tipo de cosas interesantes en HTML. El funcionamiento de Embed.js es muy sencillo. Dentro de un elemento tendrás que escribir una cadena en especial. La librería se ocupará de reemplazar esa cadena por el contenido apropiado cuando se inicialice el elemento. Cuenta con soporte para una gran lista de servicios, incluyendo Youtube, Twitter, Github, SoundCloud, Codepen, Instagram, y muchos otros.

Trianglify

Trianglify es una librería de JavaScript para crear imágenes de degradados geométricos. Después de configurar las dimensiones de tu degradado y cómo debe lucir (color, tamaño de las celdas, etc.), el resultado final se puede dibujar directamente en un lienzo, como un nodo DOM SVG, o exportarlo como datos en base 64.

SweetAlert2

Reemplaza los alerts por defecto de Javascript por unas cajas de diálogo más coloridas y animadas. Hay cinco tipos diferentes de mensajes, un montón de opciones de personalización y todos los métodos que necesites. SweetAlert2 es compatible con todos los navegadores modernos.

Fuente: tutorialzine.com

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.