15款不容错过的前端开发Javascript和css类库 - 2017版本

旧城等待， 2022-06-09 11:35 215阅读 0赞

15款不容错过的前端开发Javascript和css类库 - 2017版本~

[\#精选][Link 1][javascript][][CSS][]

[![3d956333-86f0-4d2b-ad48-a6ba0ea76f5e.jpg][]][3d956333-86f0-4d2b-ad48-a6ba0ea76f5e.jpg 1]

前端的JS和CSS类库日新月异， 在今天这篇介绍中，我们将精挑细选15款超棒的JS/CSS类库， 希望大家在开发过程中会觉得有帮助~

--------------------

## [Core UI][] ##

基于Bootstrap4的一套UI类库， CoreUI是一套admin的管理模板，提供了高定制化的解决方案来创建控制模板和平台。 这有几种不同的版本帮助你快速的整合最流行的框架，比如， AngularJS， React.jS，Vue.jS等等

[![9bb682d5-e7b0-4cd8-8848-3ffe8857d51a.jpg][]][9bb682d5-e7b0-4cd8-8848-3ffe8857d51a.jpg 1]

## [React Trend][] ##

来自Unsplash的一个react版本的组件，用来方便的创建线图，可以方便的展示趋势和活跃相关的数据。这个项目使用了极简的设计模式，给予你一个简单直接的方式来达到目的。 所以不要期望提供了一个完整功能的类库。 当然， 同时也提供了一个非官方的Vue版本，点击[这里][Link 2]获取

[![e24ae8b5-2a4a-49b4-9072-b6ba95bec509.jpg][]][e24ae8b5-2a4a-49b4-9072-b6ba95bec509.jpg 1]

## [Element][] ##

element是一个基于Vue2.0.js的UI框架。 包含了超过50个组件的样式设计， 包含了特定的设计和颜色选择。每一个元素都拥有非常好的文档， 并且非常易于在线vue.js中定制化和实现。 这里同样也包含了一格实用的[Sketch模板][Sketch]，用来帮助你设计mockup

[![c9d849d7-caa6-4fb5-a14f-fbca1adc8cb7.jpg][]][c9d849d7-caa6-4fb5-a14f-fbca1adc8cb7.jpg 1]

## [BigPicture][] ##

现代lightbox插件可以同步支持视频和图片，提供了弹出式的顺滑动画。 特别拽的特性在于同时支持<img>标签和background-image元素， 给于开发人员充分自由度。

## [![6a704457-d82a-4251-85b3-0c7ff68a6782.jpg][]][6a704457-d82a-4251-85b3-0c7ff68a6782.jpg 1] ##

## [Reactive Listener][] ##

不要以貌取人， 这并非一个react的组件。 Reactive listener是一个来自Zurb的微型类库，允许你创建先进的事件监听， 响应点击和悬浮相关的复杂行为。 目前只能识别用户向元素移动， 但是未来更多很酷的监听会被添加进去

[![206c447d-dbe9-416d-9be8-c681e00774a3.jpg][]][206c447d-dbe9-416d-9be8-c681e00774a3.jpg 1]

## [Eagle.js][] ##

Eagle.js是一个Vue.js框架的类库，用来创建基于web的幻灯效果，非常类似reveal.js，支持动画，主题，互动组件，所以非常易于组件，样式，幻灯的重用[![112b2a71-24c3-4b02-b8be-0731850e1866.jpg][]][112b2a71-24c3-4b02-b8be-0731850e1866.jpg 1]

## [Planck.js][] ##

这个类库是知名的C++ Box2D类库的Javascript版本实现， box2d已经被游戏开发工程师使用了很多年了。planck.js优化了web/移动浏览器的引擎， 提供了开源的Javascript代码基础和API。 这个方式开发人员将会更加舒服的创建2D游戏和其它物理相关体验

[![f1ef72e9-104d-418a-b201-8441f617c6ed.jpg][]][f1ef72e9-104d-418a-b201-8441f617c6ed.jpg 1]

## [Create React Native App][] ##

随着Create React App的成功， 这又出现了一个React Native app工具，不需要任何编译配置。 允许React Native apps 被配置和测试， 而不需要安装Xcode或者Android Studio

[![9bc78271-5f36-46cc-87e6-124347c5f624.jpg][]][9bc78271-5f36-46cc-87e6-124347c5f624.jpg 1]

## [Pushy Buttons][] ##

一个非常迷你的CSS-only的3D按钮， 拥有非常好的下压效果。 按钮提供了4种尺寸， 3种颜色， 非常容易通过SASS定制化， 或者简单修改CSS源文件

[![8d56d00c-584a-4849-ba04-8b8d021d2671.jpg][]][8d56d00c-584a-4849-ba04-8b8d021d2671.jpg 1]

## [MoveTo][] ##

轻量级的点击移动动画类库， gzip后只有1kb，大家可以体验

[![ed07ca6e-4b2f-4946-a09d-66620f9052e1.jpg][]][ed07ca6e-4b2f-4946-a09d-66620f9052e1.jpg 1]

## [Anchorme][] ##

一个强大的Javascript类库， 可以检测任何字符串或者文本中的URL地址。 快速，并且准确， 拥有很大多定制化的功能。 包含一些实用的功能， 比如， 将URL转化成了可以点击的<a>标签

[![687600d1-56db-4ed9-b2b9-896ed72694ca.jpg][]][687600d1-56db-4ed9-b2b9-896ed72694ca.jpg 1]

## [RPG Awesome][] ##

免费的图标字体， 拥有将近500个超棒的矢量图标。 可以通过SASS定制化~

## [![6be12f36-9644-4a39-b833-4db6d78cb955.jpg][]][6be12f36-9644-4a39-b833-4db6d78cb955.jpg 1] ##

## [Tent CSS][] ##

Tent CSS是一个提供了最简单响应式开发的框架。 轻量级， 5kb， 拥有现代的flexbox网格来做页面布局

[![690262b9-928d-4c33-96b3-f4d1d279059c.jpg][]][690262b9-928d-4c33-96b3-f4d1d279059c.jpg 1]

--------------------

[Link 1]: http://www.igeekbar.com/igeekbar/usertag/6.htm
[javascript]: http://www.igeekbar.com/igeekbar/usertag/13.htm
[CSS]: http://www.igeekbar.com/igeekbar/usertag/14.htm
[3d956333-86f0-4d2b-ad48-a6ba0ea76f5e.jpg]: /images/20220609/45c4a50f03b14aaaa8914a48d1f64b0c.png
[3d956333-86f0-4d2b-ad48-a6ba0ea76f5e.jpg 1]: http://www.igeekbar.com/igeekbar/networks/uploadimg/3d956333-86f0-4d2b-ad48-a6ba0ea76f5e.jpg
[Core UI]: http://coreui.io/
[9bb682d5-e7b0-4cd8-8848-3ffe8857d51a.jpg]: /images/20220609/ce6cdc9ee83e42e3beb67a0e5ef800e2.png
[9bb682d5-e7b0-4cd8-8848-3ffe8857d51a.jpg 1]: http://www.igeekbar.com/igeekbar/networks/uploadimg/9bb682d5-e7b0-4cd8-8848-3ffe8857d51a.jpg
[React Trend]: https://unsplash.github.io/react-trend/
[Link 2]: https://github.com/QingWei-Li/vue-trend
[e24ae8b5-2a4a-49b4-9072-b6ba95bec509.jpg]: /images/20220609/d9a09c63208b4caa86c2de0e2b4bac17.png
[e24ae8b5-2a4a-49b4-9072-b6ba95bec509.jpg 1]: http://www.igeekbar.com/igeekbar/networks/uploadimg/e24ae8b5-2a4a-49b4-9072-b6ba95bec509.jpg
[Element]: http://element.eleme.io/#/en-US
[Sketch]: http://element.eleme.io/#/en-US/resource
[c9d849d7-caa6-4fb5-a14f-fbca1adc8cb7.jpg]: /images/20220609/eddf104702d14705819ff3611302d852.png
[c9d849d7-caa6-4fb5-a14f-fbca1adc8cb7.jpg 1]: http://www.igeekbar.com/igeekbar/networks/uploadimg/c9d849d7-caa6-4fb5-a14f-fbca1adc8cb7.jpg
[BigPicture]: https://henrygd.me/bigpicture/
[6a704457-d82a-4251-85b3-0c7ff68a6782.jpg]: /images/20220609/aaae0fa225e647ac9d16f3329e274759.png
[6a704457-d82a-4251-85b3-0c7ff68a6782.jpg 1]: http://www.igeekbar.com/igeekbar/networks/uploadimg/6a704457-d82a-4251-85b3-0c7ff68a6782.jpg
[Reactive Listener]: http://zurb.com/playground/reactive-animation-listener#
[206c447d-dbe9-416d-9be8-c681e00774a3.jpg]: /images/20220609/7167eace009b445a84b982027d367025.png
[206c447d-dbe9-416d-9be8-c681e00774a3.jpg 1]: http://www.igeekbar.com/igeekbar/networks/uploadimg/206c447d-dbe9-416d-9be8-c681e00774a3.jpg
[Eagle.js]: https://zulko.github.io/eaglejs-demo/#/
[112b2a71-24c3-4b02-b8be-0731850e1866.jpg]: /images/20220609/566c5cff3ccc4e5789b1185beec0c1c7.png
[112b2a71-24c3-4b02-b8be-0731850e1866.jpg 1]: http://www.igeekbar.com/igeekbar/networks/uploadimg/112b2a71-24c3-4b02-b8be-0731850e1866.jpg
[Planck.js]: http://piqnt.com/planck.js/
[f1ef72e9-104d-418a-b201-8441f617c6ed.jpg]: /images/20220609/0d5f870abd0f4c0795edc0742ce64961.png
[f1ef72e9-104d-418a-b201-8441f617c6ed.jpg 1]: http://www.igeekbar.com/igeekbar/networks/uploadimg/f1ef72e9-104d-418a-b201-8441f617c6ed.jpg
[Create React Native App]: https://github.com/react-community/create-react-native-app
[9bc78271-5f36-46cc-87e6-124347c5f624.jpg]: /images/20220609/6b5629d3966e4c479c22e4755916bdc7.png
[9bc78271-5f36-46cc-87e6-124347c5f624.jpg 1]: http://www.igeekbar.com/igeekbar/networks/uploadimg/9bc78271-5f36-46cc-87e6-124347c5f624.jpg
[Pushy Buttons]: https://iraul.github.io/pushy-buttons/
[8d56d00c-584a-4849-ba04-8b8d021d2671.jpg]: /images/20220609/99a8cd294c9547fc994be6f02299d163.png
[8d56d00c-584a-4849-ba04-8b8d021d2671.jpg 1]: http://www.igeekbar.com/igeekbar/networks/uploadimg/8d56d00c-584a-4849-ba04-8b8d021d2671.jpg
[MoveTo]: https://hsnaydd.github.io/moveTo/demo/
[ed07ca6e-4b2f-4946-a09d-66620f9052e1.jpg]: /images/20220609/3424bcf88efe4c868a98d992f5b7c50a.png
[ed07ca6e-4b2f-4946-a09d-66620f9052e1.jpg 1]: http://www.igeekbar.com/igeekbar/networks/uploadimg/ed07ca6e-4b2f-4946-a09d-66620f9052e1.jpg
[Anchorme]: http://alexcorvi.github.io/anchorme.js/
[687600d1-56db-4ed9-b2b9-896ed72694ca.jpg]: /images/20220609/8008348a13c54fb19783e42846a59234.png
[687600d1-56db-4ed9-b2b9-896ed72694ca.jpg 1]: http://www.igeekbar.com/igeekbar/networks/uploadimg/687600d1-56db-4ed9-b2b9-896ed72694ca.jpg
[RPG Awesome]: http://nagoshiashumari.github.io/Rpg-Awesome/
[6be12f36-9644-4a39-b833-4db6d78cb955.jpg]: /images/20220609/f2ace76c4e2e4644ab2b8ed5087c4510.png
[6be12f36-9644-4a39-b833-4db6d78cb955.jpg 1]: http://www.igeekbar.com/igeekbar/networks/uploadimg/6be12f36-9644-4a39-b833-4db6d78cb955.jpg
[Tent CSS]: https://css.sitetent.com/
[690262b9-928d-4c33-96b3-f4d1d279059c.jpg]: /images/20220609/fc447f3d49254c199624f9380e580f09.png
[690262b9-928d-4c33-96b3-f4d1d279059c.jpg 1]: http://www.igeekbar.com/igeekbar/networks/uploadimg/690262b9-928d-4c33-96b3-f4d1d279059c.jpg