前端资料收集
css:
css | 地址 |
---|---|
CSS 语法参考 | https://tympanus.net/codrops/css_reference/ |
CSS 参考手册 | http://css.doyoe.com/ |
CSS3动画手册 | http://isux.tencent.com/css3/index.html |
CSS 发抖 | http://www.webhek.com/post/css-shake.html |
CSS3 按钮动画 | http://fian.my.id/Waves |
CSS小工具集合 | http://linxz.github.io/tianyizone |
OOCSS 面向对象的CSS | http://www.oocss.cc/ http://oocss.org/ |
Animate.css | https://daneden.github.io/animate.css/ |
LESS 入门 | http://www.bootcss.com/p/lesscss/ |
LESS 文档 | http://less.bootcss.com/ |
SASS 入门 | http://www.w3cplus.com/sassguide/ |
SASS 文档 | http://sass.bootcss.com/docs/sass-reference/ |
Bouncejs 触摸库 | http://bouncejs.com |
*
设计资源:
[ 配色表 ] [ 边框样式示例 ] [ 页面背景图片资源 ] [ 页面纹理资源 ] [ Font Awesome ] [ iconfont ] [ icomoon (字体图标制作)] [ 图片处理]
*
前端UI框架:
框架 | 地址 | 备注 |
---|---|---|
Bootstrap | http://getbootstrap.com/ | API完整 PC 移动 |
Foundation | http://foundation.zurb.com/ | 响应式 PC 移动 |
NEJ | http://nej.netease.com/ | 网易 支持桌面及移动平台、浏览器及混合应用开发 |
NEC | http://nec.netease.com/case | 国产web 规范统一 |
Layui | http://www.layui.com/ | easy 遵循原生HTML/CSS/JS的书写与组织形式 适合界面的快速开发 |
Amazeui | http://amazeui.org/ | PC端和移动端 easy |
SUI | http://sui.taobao.org/sui/docs// | 有PC及移动端版本SUI Mobile==>appframework |
FrozenUI | http://frozenui.github.io/ | 轻量 移动端 提供的Animation case |
Uikit | http://www.getuikit.com/ | 体积小、反应灵敏的响应式组件 |
Ionic | https://ionicframework.com/products/ | HTML5 应用程序开发框架(HTML5混合移动应用程序框架) |
MUI | http://dev.dcloud.net.cn/mui/ | 接近原生APP体验的高性能前端框架 移动端 |
AUI | http://www.auicss.com/ | Material 设计规范,使用MIT开源协议 移动端 |
Semantic UI | http://www.semantic-ui.cn/ | 体积小、反应灵敏的响应式组件 移动端 |
WeUI | https://weui.io/ | 同微信原生视觉体验一致的基础样式库 移动端 |
YDUI Touch | http://www.auicss.com/ | 注重审美,且性能高效的移动端&微信UI |
H-ui | http://www.h-ui.net/ | 轻量,兼容性好,服务于中国网站 板式老 |
*
移动端 js库(插件库):
名称 | 地址 | 备注 |
---|---|---|
Hammer.js | http://eightmedia.github.io/hammer.js/ | 轻量级的触屏设备手势库 touch,mouse和 pointerEvents |
Zepto | http://zeptojs.com/ | jquery类似的api 轻量级 具有移动设备的触摸等事件 |
Swipe | http://swipejs.com/ | 移动端网页触摸内容滑动 滑动特效插件 |
IScroll 5 | http://cubiq.org/iscroll-5 | 移动端滚动插件iScroll |
iCheck | http://www.bootcdn.cn/iCheck/ | 对checkbox的美化插件 |
First Click | https://github.com/ftlabs/fastclick | 为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库 |
KendoUI | http://www.kendoui.io/ | 基于最新的HTML5、CSS3和JavaScript标准 快速HTML5 UI |
Ratchet | http://goratchet.com/ | 创建Hybrid(混合模式)手机应用APP |
jQuery Mobile | http://jquerymobile.com/ | 基于HTML5的用户界面系统,旨在使所有智能手机,平板电脑和桌面设备上都可以访问的响应网站和应用 |
*
构建工具及包管理器:
名称 | 地址 | 备注 |
---|---|---|
Grunt | http://gruntjs.com/ | 自动化构建工具 |
Gulp | http://www.gulpjs.com.cn/docs/getting-started/ | 自动化构建工具 |
Yeoman | http://yeoman.io/ | 项目工程依赖目录和文件生成工具,项目生产环境和编译环境生成工具 集合:YO、GRUNT、BOWER [ 学习地址 ] |
Bower | http://bower.io/ | Web开发的包管理器 专注于CSS、JavaScript、图像等前端相关内容的管理 |
NPM | https://www.npmjs.org/ | Web开发的包管理器,专注于nodeJs模块 |
Webpack | http://webpack.github.io/docs/ | 模块加载器兼打包工具,把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理[2.2学习地址] |
*
项目管理 (版本管理):
名称 | 地址 | 备注 |
---|---|---|
Github | https://github.com/ | 软件项目的托管平台 |
GitLab | https://about.gitlab.com/ | 版本管理系统,实现一个自托管的Git项目仓库 |
Redmine | http://www.redmine.org/ | 基于web的项目管理软件 |
Git | http://git-scm.com/ | 免费、开源的分布式版本控制系统 |
Subversion | http://subversion.apache.org | 自由开源的版本控制系统 |
Mercurial (hg) | https://www.mercurial-scm.org/ | 版本控制系统 |
*
调试工具:
名称 | 地址 | 备注 |
---|---|---|
Chrome | https://developers.google.com/chrome-developer-tools/ | 谷歌 |
Firebug | https://getfirebug.com/ | 火狐 |
HTTPWatch | http://www.httpwatch.com/ | http抓包工具,但是只支持IE和firefox浏览器(其他浏览器可能会有相应的插件) |
Fiddler | http://www.telerik.com/fiddler | 位于客户端和服务器端的HTTP代理 适用多浏览器[介绍] |
IE Developer Toolbar | https://msdn.microsoft.com/en-us/library/dd565628(v=vs.85).aspx | IE调试工具 |
Weinre | http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html | 远程调试工具,借助于网络,在PC上直接调试运行在移动设备上的远程页面 |
*
图表类插件:
名称 | 地址 | 备注 |
---|---|---|
Highcharts 中文API | https://www.hcharts.cn/demo/highcharts | 基于svg技术 文档较详细 |
Highcharts 英文API | http://api.highcharts.com/highcharts | 基于svg技术 文档较详细 |
ECharts 百度的图表软件 | http://echarts.baidu.com/ | 基于canvas 可实现3D图形 效果较好 |
ECharts 老版本 | http://echarts.baidu.com/echarts2/doc/example.html | 基于canvas 文档相对不太详细 |
高德地图 | http://lbs.amap.com/api | |
百度地图 | http://lbsyun.baidu.com/jsdemo.htm?a#a1_2 | |
开源的矢量图脚本框架 | http://paperjs.org | 使用矢量图形和贝塞尔曲线创建场景图/文档对象模型 |
svg 地图 | http://jvectormap.com | 开源JS地图插件[介绍] |
*
代码优化:
名称 | 地址 | 备注 |
---|---|---|
CSS Lint | http://csslint.net/ | CSS代码检查工具 |
JSHint | http://www.jshint.com/ | javaScript语法和风格的检查工具 |
JSLint | http://www.jslint.com/ | JavaScript验证工具(非开源)定义了一组编码约定 格式要求严格 |
JSON | https://www.json.cn/ | json序列号工具 |
Regexper | https://regexper.com/ | 图形化正则表达式工具 |
*
代码规范:
名称 | 地址 | 备注 |
---|---|---|
Code Guide | http://alloyteam.github.io/code-guide/ | HTML CSS |
编写可维护的CSS | http://segmentfault.com/a/1190000000388784/ | CSS |
GJS编码规范指南 | http://alloyteam.github.io/JX/doc/specification/google-javascript.xml | JavaScript |
jQueryJS规范 | http://contribute.jquery.org/style-guide/js/ | JS |
*
测试框架:
名称 | 地址 | 备注 |
---|---|---|
Jasmine | http://pivotal.github.io/jasmine/ | JavaScript 单元测试框架 |
QUnit | http://qunitjs.com/ | JavaScript单元测试框架 |
mocha | http://visionmedia.github.io/mocha/ | 单元测试框架 |
其他工具:
名称 | 地址 | 备注 |
---|---|---|
RunJs | http://runjs.cn/ | 在线编辑器 |
JSDoc | https://github.com/jsdoc3/jsdoc | 是一个根据javascript文件中注释信息,生成JavaScript应用程序或库、模块的API文档 的工具 |
Jekyll | http://jekyllrb.com/ | 将纯文本转换成静态网站和博客 |
Axure RP | http://www.axure.com/ | 原型设计 |
XMind | http://www.xmind.net/ | 思维导图 原型图 制作查看工具 |
蓝狐 | https://lanhuapp.com/ | ps图解析工具 |