前端资源大整理

资源不断更新中。。。

动画库
1.Animate.css
说明:一个简单易用的跨浏览器CSS动画库。
GitHub主页: https://github.com/daneden/animate.css

2.CSShake
说明:用CSS实现各种颠颤动画效果DOM!
GitHub主页: https://github.com/elrumordelaluz/csshake

3.Hover.css
说明:将鼠标Hover效果快速应用在你的网页元素或创意设计上。
GitHub主页:https://github.com/IanLunn/Hover

4.Velocity.js
说明:帮你加速JavaScript动画。
GitHub主页:https://github.com/julianshapiro/velocity

5.DynCSS
说明:用动态CSS来打造你的网页。
GitHub主页:https://github.com/vzaccaria/DynCSS

6.Magic Animations
说明:可创造CSS3动画特效。
GitHub主页:https://github.com/miniMAC/magic

7.Bounce.js
说明:即时创造漂亮的CSS3动画。
GitHub主页: https://github.com/tictail/bounce.js

前端框架和类库
1.lodash.js
简介:具有一致接口、模块化、高性能等特性的 JavaScript 工具库
GitHub主页:https://github.com/lodash/lodash/

2.Underscore.js
简介:JavaScript 工具库,它提供了一整套函数式编程的实用功能,但是没有扩展任何 JavaScript 内置对象。 他解决了这个问题:“如果我面对一个空白的 HTML 页面,并希望立即开始工作,我需要什么?” 他弥补了 jQuery 没有实现的功能,同时又是 Backbone 必不可少的部分。

3.AngularJS
简介:AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。
GitHub主页:https://github.com/angular/angular.js

4.React
简介:React 是一个用于构建用户界面的 JAVASCRIPT 库。主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。
GitHub主页:https://github.com/facebook/react

5.Vue.js
简介:Vue.js是一个用于构建用户界面的轻量级渐进框架。它提供了一个类似React的虚拟DOM驱动视图层,可以与其它类库集成,用于构建强大的单页面应用。该框架是由之前在AngularJS工作过的Evan You创建的,他提取了AngularJS中自己喜欢的部分。

Vue.js使用HTML模板语法将DOM绑定到实例数据。Model是在数据改变时更新view的纯JavaScript对象。
GitHub主页:https://github.com/vuejs/vue
官方地址:https://cn.vuejs.org/

6.Backbone.js
简介:Backbone.js是提供服务器端框架中常见的MVC结构的最早客户端选项之一。它唯一的依赖是Underscore.js。
Backbone.js声称是一个类库,因为它可以与其它项目集成,但是我觉得大多数开发人员都认为它是一个框架。
GitHub主页:https://github.com/jashkenas/backbone/

7.Ember.js
简介:Ember.js是基于Model-View-ViewModel(MVVM)模式的框架之一。它在单个包中实现模板化、数据绑定和类库。
GitHub主页:https://github.com/emberjs/ember.js

前端工具
1.Gulp.js
简介:虽然Gulp不是第一个任务执行工具,它却很快成为了最受欢迎的。Gulp使用易于阅读的JavaScript代码,将源文件加载到流中,并在将数据输出到构建文件夹之前,通过各种插件管理数据。在任何其它选项之前检查Gulp.js是简单、快速和有趣的。
GitHub主页:https://github.com/gulpjs/gulp

2.NPM
简介:npm是Node.js包管理器,但其脚本工具可用于运行通用任务。对于具有少量依赖关系的简单项目来说,这是一个很好的选择。然而,更复杂的任务可能会变得不太适用。
GitHub主页:https://github.com/npm/npm

3.Grunt
简介:Grunt是第一批被大规模采用的JavaScript任务执行工具之一,但其速度和复杂的JSON配置却导致了Gulp的兴起。现在这些问题已经得到了解决,Grunt仍然是一个受欢迎的选择。
GitHub主页:https://github.com/gruntjs/grunt

4.WebPack
简介:Webpack支持所有流行的模块选项,并已成为React开发的代名词。虽然Webpack声称是一个模块捆绑程序,但是已经可以用作通用任务运行程序了。
GitHub主页:https://github.com/webpack/webpack

5.Browserify
简介:Browserify支持Node.js正在使用的CommonJS模块,它将所有模块编译成单个浏览器兼容的文件。
GitHub主页:https://github.com/substack/node-browserify

6.RequireJS
简介:RequireJS是一种浏览器中的模块加载器,它也可以在Node.js中使用。
GitHub主页:https://github.com/jrburke/r.js

7.ESLint
简介:ESLint是一种可插拔的代码分析工具。每个规则都是一个插件,因此可以根据个人喜好进行配置。
GitHub主页:https://github.com/eslint/eslint

8.JSHint
简介:JSHint是一个灵活的JavaScript代码分析工具,它很好的平衡了真正的错误和老旧的语法。
GitHub主页:https://github.com/jshint/jshint

9.JSLint
简介:JSLint是最早的代码分析工具之一,它实现了一套严格的默认规则。
GitHub主页:https://github.com/reid/node-jslint

10.Jasmine
简介:Jasmine是一个行为驱动的测试工具,可以在浏览器中自动测试UI和交互。
GitHub主页:https://github.com/jasmine/jasmine-npm

11.QUnit
简介:QUnit是一个单元测试框架,可以在输入特定参数时,检查函数结果。它还上报测试结果,确保没有错过特定的代码分支。
GitHub主页:https://github.com/kof/node-qunit

CSS框架
1.Bootstrap – 最流行的Web前端UI框架
Bootstrap是由twitter推出的Web前端UI框架,它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。它使用了最新的浏览器技术,Bootstrap提供了时尚的排版样式,表单,buttons,表格,网格系统等等。
官方网站:http://getbootstrap.com/

2.jQuery UI Bootstrap
它是jQuery UI和Bootstrap的集成,它是Bootstrap样式的,因此外观比较漂亮,同时它拥有jQuery UI的控件功能,这也方便开发者快速地创建一个网页控件。

3.BootMetro - Metro风格的CSS框架
BootMetro是一款基于Bootstrap的前端UI框架,BootMetro的特点是可以很方便地构建类似Windonws 8扁平化风格的网页界面,效果非常不错。
官方网站:http://aozora.github.io/bootmetro/

4.Flat UI - 扁平风格 UI 工具包
Flat UI是一套精美的扁平风格 UI 工具包,基于 Twitter Bootstrap 实现。这套界面工具包含许多基本的和复杂的 UI 部件,例如按钮,输入框,组合按钮,复选框,单选按钮,标签,菜单,进度条和滑块,导航元素等等。
官方网站:https://github.com/designmodo/Flat-UI

5.网易CSS框架 NEC
NEC是网易推出的开源前端CSS框架,NEC提供了丰富UI代码库和插件,可以极大的帮助开发人员提高开发效率。即使你并非前端专业开发人员,利用NEC你也可以快速地构建属于自己的网页应用。
官方网站:http://nec.netease.com/

6.Alloy UI – 功能强大的CSS UI框架
Alloy UI是基于YUI 3的前段UI框架,包含一套丰富的(超过60)UI 部件,如图片库,对话框,树形结构,面板,自动完成,按钮,日历控件,工具条等。
官方网站:http://alloyui.com/

7.Cardinal – 移动端的CSS UI框架
Cardinal 是一个小型的移动优先的 CSS 框架,提供很多有用的默认样式、可缩放排版、可重用模块和一个简单的响应式表格系统。
官方网站:http://cardinalcss.com/

8.快速开发CSS的框架 CSScaffold
不同于许多CSS框架,它必须依靠PHP与Apache的mod_rewrite来执行,但也因为需要这两种东西,让CSScaffold变得很神奇、很方便,写起CSS来又快又轻松!
官方网站:http://www.w3avenue.com/2009/10/13/csscaffold-php-based-css-framework/

9.后台UI开发框架 MuseUI
一款基于bootstrap风格,兼容于主流浏览器(包括IE6)的后端UI开发组件。
官方网站:http://git.oschina.net/muse/museui

手册大全
1.jQuery API 中文文档
http://www.jquery123.com/

2.seajs手册
http://cyj.me/why-seajs/zh

3.vue api
https://cn.vuejs.org/v2/api/

4.bootstrap4手册
http://www.jqhtml.com/bootstraps-syntaxhigh/index.html

5.CSS 语法参考
https://tympanus.net/codrops/css_reference/

6.mozilla js参考
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

参考:www.cnblogs.com/powertoolsteam/p/front_end_framework_2017.html
http://www.codeceo.com/article/top-10-css-ui-framework.html

时间: 2024-10-11 04:10:48

前端资源大整理的相关文章

炙手可热的前端资源大集合

本周我们带来的前端推荐包含当前热门的bootstrap,html5,css3等技术内容和新闻话题,如果你还想近一步学习如何开发,还可以关注我们的极客课程库,里面涵盖了现代开发技术的‘学’与‘习’的全新功能.希望对大家有所帮助!原文来自:极客标签 AngularJS手册: 10000字的全面使用手册 来自Google开发大拿 Todd Motto 的Angular教程,非常好的学习angularJS的教程. 代码录播:CSS3生成海盗眼牛头梗漫画效果 使用CSS3旋转生成的海盗眼牛头梗效果,简单实

2017年 前端资源汇总

时为五月,序属初夏,距上篇总结已有一年时光了!看看这一年又发生了什么变化呢? 不妨一起来研读一下: 史上最全的前端资源大汇总:http://www.jianshu.com/p/6cb49271cd2a# 史上最全的前端资源大汇总:https://github.com/vhf/free-programming-books/blob/master/free-programming-books-zh.md#javascript

Web前端,HTML5开发,前端资源,前端网址,前端博客,前端框架整理 - 转

Web前端/H5开发,前端资源,前端网址,前端博客,前端框架整理 - 转 综合类 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v2.2 免费的编程中文书籍索引 前端书籍 前端免费书籍大全 前端知识体系 免费的编程中文书籍索引 智能社 - 精通JavaScript开发 重新介绍 JavaScript(JS 教程) 麻省理工学院公开课:计算机科学及编程导论 JavaScript中的this陷阱的最全收集--没有之一 JS

前端各大Grid UI组件整理

 Flexigrid Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid.它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等.Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换. 主页:http://www.flexigrid.info/ 下载:http://code.google.com/p/flexigrid/ 示例:http://www.flexigrid.info/  dhtmlxGrid dhtmlxGrid是一

极客Web前端开发资源大荟萃#002

每周极客都将总结本周最精彩的素材提供给大家,希望可以带给你更多地灵感和帮助!极客#GB课程库#现已上线,无论你是初级.中级.还是正在进修的高级前端工程师.这里都将帮助你得到更多更高效的学习. #GB课程库# 极客Web前端开发资源大荟萃#001 如何写出高性能的Jquery代码 讨论jQuery和javascript性能的文章并不罕见.然而,本文我计划总结一些速度方面的技巧和我本人的一些建议,来提升你的jQuery和javascript代码.好的代码会带来速度的提升.快速渲染和响应意味着更好的用

极客Web前端开发资源大荟萃#007

本周我们带来的前端推荐包含当前热门的bootstrap,html5,css3等技术内容和新闻话题,如果你还想近一步学习如何开发,还可以关注我们的极客课程库,里面涵盖了现代开发技术的'学'与'习'的全新功能.希望对大家有所帮助!原文来自:极客标签 移动设备表单输入设计体验 - leader.js 为了帮助降低移动或者手机端输入的操作复杂度,leader.js提供了一个相对更简单的输入体验,你只需要输入表单内容回车即可完成输入,非常方便. Javascript游戏,街头霸王 有没有让你想起点什么?我

极客Web前端开发资源大荟萃

每周极客都将总结本周最精彩的素材提供给大家.希望能够带给你很多其它地灵感和帮助.极客#GB课程库#现已上线,不管你是0基础.中级.还是正在进修的高级前端project师.这里都将帮助你得到很多其它更高效的学习. #GB课程库# 极客Web前端开发资源大荟萃#001 怎样写出高性能的Jquery代码 讨论jQuery和javascript性能的文章并不罕见.然而,本文我计划总结一些速度方面的技巧和我本人的一些建议.来提升你的jQuery和javascript代码.好的代码会带来速度的提升.高速渲染

极客Web前端开发资源大荟萃#001

每周极客都将总结本周最精彩的素材提供给大家,希望可以带给你更多地灵感和帮助!极客#GB课程库#现已上线,无论你是初级.中级.还是正在进修的高级前端工程师.这里都将帮助你得到更多更高效的学习.原文:极客Web前端开发资源大荟萃#001 超棒的HTML5/CSS3单页面响应式模板(支持Bootstrap) 在线演示 使用Bootstrap实现的响应式单页面模板,包含移动和桌面两种效果. jQuery框架开发一个最简单的幻灯效果 在线演示 在这个课程中,我们将介绍如何使用jQuery来开发一个最简单的

不可错过的前端开发资源大荟萃

本周我们带来的前端推荐包含当前热门的bootstrap,html5,css3等技术内容和新闻话题,如果你还想近一步学习如何开发,还可以关注我们的极客课程库,里面涵盖了现代开发技术的'学'与'习'的全新功能.希望对大家有所帮助!原文来自:极客标签 jQueryMobile 实现一个简单的弹出框效果 今天给大家带来的是 jQueryMobile 实现一个简单的弹出框效果,有兴趣的童鞋可以试试哦~ 深入浅出H5游戏开发原理 跟我一起从零开始,创造出一套简单又强大的HTML5游戏引擎吧! 分享10套古典