Amaze UI 首个开源 HTML5 跨屏前端框架
Amaze UI采用国际最前沿的 组件式开发 以及 移动优先 的设计理念,基于其丰富的组件,开发者可通过简单拼装即可快速构建出HTML5网页应用,上线仅半年,Amaze UI就成为了国内最流行的前端框架,目前在Github上收获Star数近万,服务于全球50W开发者。
实现目标
帮助开发者提高开发效率,提升网页效果,即用最短的时间做出最赞的网页,使更多的前端开发者不再受前端复杂代码困扰。
Amaze UI 是中国首个开源 HTML5 跨屏前端框架,Amaze UI 是一个轻量级、Mobile first的前端框架, 基于开源社区流行前端框架编写。
框架特点
安装 Amaze UI
你可以在官网或者Github地址找到 Amaze UI 的所有文件,下载解压到你的项目中即可。
或者你不想下载文件,那么你可以使用CDN加速的方式,引入 Amaze UI 的框架文件,免下载高速访问。
官方 CDN
域名解析服务由 DNSPod 提供,CDN 存储由七牛提供。
http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.css http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.min.css http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.js http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.min.js http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.ie8polyfill.js http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.ie8polyfill.min.js http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.widgets.helper.js http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.widgets.helper.min.js
CDNJS
面向国外的用户可以使用 cdnjs 提供的 CDN 服务(支持 HTTPS)。
使用 Bower
bower install amazeui
项目结构
Clone 完成(或者下载解压后)得到以下目录结构:
AmazeUI |-- assets | |-- css | | |-- amazeui.css // Amaze UI 所有样式文件 | | |-- amazeui.min.css // 约 42 kB (gzipped) | | `-- app.css | |-- i | | |-- app-icon72x72@2x.png | | |-- favicon.png | | |-- startup-640x1096.png | |-- js | |-- amazeui.js | |-- amazeui.min.js // 约 56 kB (gzipped) | |-- amazeui.widgets.helper.js | |-- amazeui.widgets.helper.min.js | |-- app.js | `-- handlebars.min.js |-- blog.html |-- index.html |-- landing.html |-- login.html |-- sidebar.html |-- widget.html
文件说明
amazeui.css
/amazeui.js
:包含 Amaze UI 所有的 CSS、JS。amazeui.flat.css
:圆角版 Amaze UI CSS,演示参见1.x
。amazeui.ie8polyfill.js
:IE8 polyfill。amazeui.widgets.helper.js
: 供使用 Handlebars 的用户使用,其他用户请忽略,内含 Web 组件必须的 Handlebars helper 及 Web 组件模板 partials。
以上每个文件都有对应的 minified 文件。
创建一个页面
新建一个 HTML 文档,将下面的代码粘贴到文档中,查看 CSS 组件及 JS 插件,拷贝符合的演示代码,粘贴到 <body>
区域,并按需调整,一个简单的页面完成。
<!doctype html> <html class="no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Hello Amaze UI</title> <!-- Set render engine for 360 browser --> <meta name="renderer" content="webkit"> <!-- No Baidu Siteapp--> <meta http-equiv="Cache-Control" content="no-siteapp"/> <link rel="icon" type="image/png" href="assets/i/favicon.png"> <!-- Add to homescreen for Chrome on Android --> <meta name="mobile-web-app-capable" content="yes"> <link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png"> <!-- Add to homescreen for Safari on iOS --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-title" content="Amaze UI"/> <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png"> <!-- Tile icon for Win8 (144x144 + tile color) --> <meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png"> <meta name="msapplication-TileColor" content="#0e90d2"> <link rel="stylesheet" href="assets/css/amazeui.min.css"> <link rel="stylesheet" href="assets/css/app.css"> </head> <body> <p> Hello Amaze UI. </p> <!--在这里编写你的代码--> <!--[if (gte IE 9)|!(IE)]><!--> <script src="assets/js/jquery.min.js"></script> <!--<![endif]--> <!--[if lte IE 8 ]> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script> <script src="assets/js/amazeui.ie8polyfill.min.js"></script> <![endif]--> <script src="assets/js/amazeui.min.js"></script> </body> </html>
相关链接
- Github地址:https://github.com/amazeui/starter-kit
- 项目地址:http://amazeui.org
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论