Amaze UI 是中國首個(gè)開源 HTML5 跨屏前端框架,它是一個(gè)輕量級(jí)(所有 CSS 和 JS gzip 后 100 kB 左右)、 Mobile first 的前端框架, 基于開源社區(qū)流行前端框架編寫。Amaze UI 汲取了很多優(yōu)秀的社區(qū)資源,通過開源的形式來回饋社區(qū)。
Amaze UI介紹
移動(dòng)而生
Amaze UI 以移動(dòng)優(yōu)先(Mobile first)為理念,從小屏逐步擴(kuò)展到大屏,最終實(shí)現(xiàn)所有屏幕適配,適應(yīng)移動(dòng)互聯(lián)潮流。
組件豐富,模塊化
Amaze UI 含近 20 個(gè) CSS 組件、10 個(gè) JS 組件,更有 17 款包含近 60 個(gè)主題的 Web 組件,可快速構(gòu)建界面出色、體驗(yàn)優(yōu)秀的跨屏頁面,大幅提升開發(fā)效率。
本地化支持
相比國外框架,Amaze UI 關(guān)注中文排版,根據(jù)用戶代理調(diào)整字體,實(shí)現(xiàn)更好的中文排版效果;兼顧國內(nèi)主流瀏覽器及 App 內(nèi)置瀏覽器兼容支持。
輕量級(jí),高性能
Amaze UI 面向 HTML5 開發(fā),使用 CSS3 來做動(dòng)畫交互,平滑、高效,更適合移動(dòng)設(shè)備,讓 Web 應(yīng)用更快速載入。
Amaze UI特性
專注 UI
只提供單純的 UI(View),對(duì)配套技術(shù)不做限定,可以在 Backbone、Angular、Meteor 等框架中使用。
組件化,可復(fù)用、易擴(kuò)展
基于 React 封裝組件,不再疲于組織雜亂的 HTML 標(biāo)簽;組件可以按需組合、功能擴(kuò)展方便。
高性能
React 所使用的 Virtual DOM 技術(shù),能最大限度減少 DOM 操作,有效提高性能。
單向數(shù)據(jù)流
單向數(shù)據(jù)流可以簡(jiǎn)化操作,從 DOM 控制中解放出來,專注于業(yè)務(wù)邏輯。
Amaze UI怎么用
Amaze UI 使用教程
1、獲取 Amaze UI
1.1下載文件
1.2使用 CDN
Amaze UI CDN: 域名解析服務(wù)由 DNSPod 提供,CDN 存儲(chǔ)由又拍云提供。
http://cdn.amazeui.org/amazeui/2.4.0/css/amazeui.css
http://cdn.amazeui.org/amazeui/2.4.0/css/amazeui.min.css
http://cdn.amazeui.org/amazeui/2.4.0/js/amazeui.js
http://cdn.amazeui.org/amazeui/2.4.0/js/amazeui.min.js
http://cdn.amazeui.org/amazeui/2.4.0/js/amazeui.legacy.js
http://cdn.amazeui.org/amazeui/2.4.0/js/amazeui.legacy.min.js
http://cdn.amazeui.org/amazeui/2.4.0/js/amazeui.widgets.helper.js
http://cdn.amazeui.org/amazeui/2.4.0/js/amazeui.widgets.helper.min.js
1.3使用 Bower
bower install amazeui
1.4移植的插件
1.5獲取源碼
你可以從 GitHub 項(xiàng)目主頁獲取源代碼。
2、文件及版本說明
2.1文件說明
amazeui.css / amazeui.js:包含 Amaze UI 所有的 CSS、JS。
amazeui.flat.css:圓角版 Amaze UI CSS,演示參見 1.x。
amazeui.legacy.js:為 IE 8 打包的 JS。
amazeui.widgets.helper.js: 供使用 Handlebars 的用戶使用,其他用戶請(qǐng)忽略,內(nèi)含 Web 組件必須的 Handlebars helper 及 Web 組件模板 partials。
以上每個(gè)文件都有對(duì)應(yīng)的 minified 文件。
2.2版本號(hào)說明
Amaze UI 遵循 Semantic Versioning 規(guī)范,版本格式采用 主版本號(hào).次版本號(hào).修訂號(hào) 的形式,版本號(hào)遞增規(guī)則如下:
主版本號(hào):做了不兼容的API 修改,如整體風(fēng)格變化、大規(guī)模重構(gòu)等;
次版本號(hào):做了向下兼容的功能性新增;
修訂號(hào):做了向下兼容的問題修正、細(xì)節(jié)調(diào)整等。
3、下載包目錄結(jié)構(gòu)
下載包種包含 Amaze UI 的 CSS、JS 文件,以及示例文件:
index.html - 空白 HTML 模板;
blog.html - 博客頁面模板(預(yù)覽);
landing.html - Landing Page 模板(預(yù)覽);
login.html - 登錄界面模板(預(yù)覽);
sidebar.html - 帶邊欄的文章模板(預(yù)覽);
admin-*.html - 簡(jiǎn)單的管理后臺(tái)界面(預(yù)覽)
在 app.css 中編寫 CSS;
在 app.js 中編寫 JavaScript;
圖片資源可以放在 i 目錄下。
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
4、創(chuàng)建一個(gè)頁面
新建一個(gè) HTML 文檔,將下面的代碼粘貼到文檔中;
查看 CSS 組件及 JS 插件,拷貝符合的演示代碼,粘貼到 <body> 區(qū)域,并按需調(diào)整;
一個(gè)簡(jiǎn)單的頁面完成。
<!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, maximum-scale=1, user-scalable=no">
<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.1/jquery.min.js"></script>
<![endif]-->
</body>
</html>
Amaze UI 2.4.0 更新日志:2015-06-01
CSS:
Improved Article增加圖片最大寬度限制樣式。
JS:
Fixed #587 修復(fù)cookie設(shè)置expires無效問題(Thx to @Stephenzxb)。
- PC官方版
- 安卓官方手機(jī)版
- IOS官方手機(jī)版