15个优秀的JS和CSS库

转自
http://www.igeekbar.com/igeekbar/post/55.htm

这次为大家带来15个优秀的库。这些免费的库可以帮助你构建更好的响应式布局并实现更复杂炫酷的功能，同时还能增强你网站的视觉效果。

Bideo.js

Bideo为你的网页添加一个全屏效果背景视频。你可以在你网站的任意一个页面中使用它，并且支持响应式的，时刻保持最佳的宽高。如果你的视频文件没有及时地加载出来，自动会添加一张背景图片作为视频占位图片

官网链接：https://rishabhp.github.io/bideo.js/

Push.js

目前很多浏览器都支持消息推送功能，但是实现方式各式各样，编写起来较为复杂。Push.js提供了一套支持多浏览器的API，很好地解决了这个问题。

官网链接：http://nickersoft.github.io/push.js/

Cutestrap

Cutestrap类似于Bootstrap，但是更加轻巧。8kb大的库文件中包含了先进的响应式栅格系统、大量UI样式组件和一系列实用的类。正因为它非常简洁所以开发者可以非常轻松的通过重写或Sass来进行定制。

官网链接：https://www.cutestrap.com/

Timedropper

Timedropper是一个设计精美、动画丰富的时间提取器。它基于jQuery，可通过调用$(‘#some-input’).timeDropper()函数来进行初始化。非常推荐大家也尝试一下Timedropper的兄弟——Datedropper，一款精心设计的日期提取器。

官网链接：http://felicegattuso.com/projects/timedropper/

CSSgram

CSSgram是一个包含了20多个通过CSS制作的Instagram滤镜。它不依赖于JavaScript代码来实现效果，因此非常简单易用，不论你是使用vanilla CSS还是Sass。

官网链接： https://una.im/CSSgram/

Flexbox Grid

Flexbox Grid是一个用于创建响应式栅格布局的纯CSS库。顾名思义，它基于先进、强大的弹性盒（flexbox）模型，非常适合于构建网页布局。使用flexbox创建的栅格布局非常易用，并且兼容性非常强。

官网链接：http://flexboxgrid.com/

Intense Images

Intense Images是一个图片浏览器，支持缩放和全屏浏览。它致力于以较简单的动画和样式来实现较好的外观，因此非常易于定制。它不依赖于其他任何外部库并且支持所有现代浏览器。

官网链接：http://tholman.com/intense-images/

Picnic

Picnic是一个非常独特的CSS框架。不同于其他常见的前端库，它具有很强的“侵略性”。开发者不需要手动添加类来调整样式，Picnic默认将样式应用于所有支持的标签。这种对默认样式的“侵占”使得开发者可以以更简洁的代码实现丰富的效果。

官网链接：http://picnicss.com/

Embed.js

Embed是一款用于嵌入颜文字、媒体、地图和各种特效字体的库。当初始化一个元素时，Embed会根据元素内部的文本自动将元素转化为特定的内容，比如将YouTube链接转化为视频，将Twitter链接转化为一条推文，将Spotify链接转化为音频播放器等等。除此以外还支持Github、SoundCloud、Codepen和Instagram等等很多服务。

官网链接：http://riteshkr.com/embed.js/

Trianglify

Trianglify是一款可以创建几何渐变图形的JavaScript库。设置好渐变的维度和一些外观属性（如颜色、大小等）之后，它会自动在canvas元素中以SVG DOM节点或base64的形式来绘制图形。它的官网还提供了一个在线生成工具，大家不妨尝试一下。

官网链接：http://qrohlf.com/trianglify/

SweetAlert2

一个将系统默认的alert等弹窗提示框替换为美观、动态的对话框的样式库。它支持五种不同的信息提示，包含了大量的定制选项和必要的方法。它的浏览器兼容性很强，你可以在不同的操作系统和浏览器中获得一致的效果，包括IE10和Edge。

官网链接：https://limonte.github.io/sweetalert2/

Adaptive Backgrounds

Adaptive Backgrounds是一个jQuery插件，可以分析出图片的主色调，并将这个主要的颜色用作指定元素的背景。应用这个库大家可以创建出设计精美的网页。

官网链接：https://briangonzalez.github.io/jquery.adaptive-backgrounds.js/

Typed.js

使用Typed.js可以将input元素中单调的placeholder替换为动态的提示。它会将你预设好的提示信息像打字一样逐个显示出来。通过一些属性设置，开发者可以实现修改游标的样式与打字的速度和添加循环显示等等效果。

官网链接：http://www.mattboldt.com/demos/typed-js/

Tabslet

一个用于创建分页显示内容的jQuery插件，可以用于实现轮播等展示效果。尽管Tabslet是一个非常轻量级的插件，但是它提供了诸如动画和事件监听等很多功能，并且有着很强的浏览器兼容性。连IE7都可以用！

官网链接：http://vdw.github.io/Tabslet/

ContentTools

ContentTools可以将HTML网页转换为所见即所得的编辑器。在它的官网上有详细的使用步骤可以使你快速入门。

官网链接：http://getcontenttools.com/

via tutorialzine.com