Amaze UI 首个开源 HTML5 跨屏前端框架

发布于 2017-09-26 09:21:57 字数 6789 浏览 2379 评论 0

Amaze UI采用国际最前沿的 组件式开发 以及 移动优先 的设计理念，基于其丰富的组件，开发者可通过简单拼装即可快速构建出HTML5网页应用，上线仅半年，Amaze UI就成为了国内最流行的前端框架，目前在Github上收获Star数近万，服务于全球50W开发者。

实现目标

帮助开发者提高开发效率，提升网页效果，即用最短的时间做出最赞的网页，使更多的前端开发者不再受前端复杂代码困扰。

Amaze UI 是中国首个开源 HTML5 跨屏前端框架，Amaze UI 是一个轻量级、Mobile first的前端框架，基于开源社区流行前端框架编写。

框架特点

为移动而生

Amaze UI 以移动优先（Mobile first）为理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。

组件丰富，模块化

Amaze UI 含近 20 个 CSS 组件、20 余 JS 组件，更有多个包含不同主题的 Web 组件，可快速构建界面出色、体验优秀的跨屏页面，大幅提升开发效率。

本地化支持

相比国外框架，Amaze UI 关注中文排版，根据用户代理调整字体，实现更好的中文排版效果；兼顾国内主流浏览器及 App 内置浏览器兼容支持。

轻量级，高性能

Amaze UI 面向 HTML5 开发，使用 CSS3 来做动画交互，平滑、高效，更适合移动设备，让 Web 应用更快速载入。

安装 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）。

https://cdnjs.com/libraries/amazeui

使用 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>