Getting Started With Amaze UI

Amaze UI is a lightweight (Only 100kB after gzip all CSS and JS files), Mobile first front-end framework. and is built based on those popular open-source front-end frameworks (List of projects we used or refered to), .

Get Amaze UI

Download

Amaze UI v2.4.2

Offline Docs：

HTML Docs

Dash Docsets

Repos:

Code Snippets：

JetBrains Series Editor

Sublime

More Detail: Amaze UI Snippets。

Starter Kit：

Front-end workflow built based on Gulp and NPM. Click Here to visit the repo.

Amaze UI CDN

Amaze UI CDN： DNS is provided by DNSPod. CDN is provided by Qiniu。

https://amazeui.github.io/amazeui/2.4.2/css/amazeui.css
https://amazeui.github.io/amazeui/2.4.2/css/amazeui.min.css
https://amazeui.github.io/amazeui/2.4.2/js/amazeui.js
https://amazeui.github.io/amazeui/2.4.2/js/amazeui.min.js
https://amazeui.github.io/amazeui/2.4.2/js/amazeui.legacy.js
https://amazeui.github.io/amazeui/2.4.2/js/amazeui.legacy.min.js
https://amazeui.github.io/amazeui/2.4.2/js/amazeui.widgets.helper.js
https://amazeui.github.io/amazeui/2.4.2/js/amazeui.widgets.helper.min.js

Install with Bower

bower install amazeui

Plugins and Examples

Source Codes

You can get the source codes from our repo on github.

Files and Versions

Files

amazeui.css / amazeui.js：Include all CSS and JS files of Amaze UI.
amazeui.flat.css：Flat version of Amaze UI CSS. Check 1.x for more information.
amazeui.legacy.js：JS for IE 8.
amazeui.widgets.helper.js： For developers using Handlebars. If you are not using Handlebars, please dismiss this file. Includes Handlebars helper and template partials for Web widgets.

Every file above has a related minified file.

Versions

Amaze UI follows Semantic Versioning. Version number follows MAJOR.MINOR.PATCH format. The increment rule is:

Increase MAJOR version when you make incompatible API changes,
Increase MINOR version when you add functionality in a backwards-compatible manner, and
Increase PATCH version when you make backwards-compatible bug fixes.
Migration form from 1.x to 2.x

What's included

Within the package downloaded you'll find the following directories and files, including CSS, JS files and examples of Amaze UI.

index.html - Blank HTML template；
blog.html - Blog template（preview）；
landing.html - Landing Page template（preview）；
login.html - Login Page template（preview）；
sidebar.html - Article template with sidebarpreview）；
admin-*.html - simple administration template（preview）
Write your CSS in app.css；
Write your JavaScript in app.js；
Save images in i。

AmazeUI
|-- assets
|   |-- css
|   |   |-- amazeui.css             // All Styles for Amaze UI
|   |   |-- amazeui.min.css           // Around 42 kB (gzipped)
|   |   `-- app.css
|   |-- i
|   |   |-- app-icon72x72@2x.png
|   |   |-- favicon.png
|   |   `-- startup-640x1096.png
|   `-- js
|       |-- amazeui.js
|       |-- amazeui.min.js                // Around 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

Build your first Page with Amaze UI

Open your favorite editor and create a new HTML file.
Copy the following codes into HTML file.
Check CSS and JS components, and add all components you want to <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, 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>

<!--Add Your Codes Here-->

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<![endif]-->
</body>
</html>

Join the Discussion

If you have any problem about using Amaze UI, please leave us a message in comments. Any comments or suggestions will be appreciated.

Thank you so much for your attention and support to Amaze UI!

Amaze UI 2.4

Getting started

TOC