Plane UIHTML5 跨終端響應(yīng)式前端界面框架

Plane UI，意為紙飛機(jī)或平面 UI，即 P(aper) (P)lane UI 的縮寫(xiě)，是一個(gè)構(gòu)建 HTML5 應(yīng)用的跨終端響應(yīng)式前端界面框架及解決方案。

設(shè)計(jì)理念

• 簡(jiǎn)單通用，高效開(kāi)發(fā)；

• 模塊化，低耦合；

• 移動(dòng)優(yōu)先，優(yōu)雅降級(jí)；

• 美學(xué)追求，交互為本；

• 持續(xù)演進(jìn)，擁抱新技術(shù)；

主要特性

• 基于 HTML5 + CSS3：移動(dòng)優(yōu)先，快速開(kāi)發(fā)跨終端響應(yīng)式 Web 應(yīng)用；

• 交互美學(xué)：扁平化風(fēng)格，借鑒和溶合 Google Material Design 部分設(shè)計(jì)風(fēng)格及規(guī)范，同時(shí)又有自己的風(fēng)格；

• 按需定制：樣式語(yǔ)義化，使用 SCSS 預(yù)處理樣式；

• 基于 jQuery：更高的開(kāi)發(fā)效率，方便使用各種 jQuery 插件；

• 豐富的組件：自帶大量常用的組件，并向 Web Components 演化；

• 組件模塊化：遵循 CommonJS 規(guī)范，支持 AMD / CMD 各種模塊化加載工具；

• 命名空間： CSS 前綴式命名空間；

• 優(yōu)雅降級(jí)：向下“基本”兼容到 IE8 ；

注：IE8 下支持基本的內(nèi)容和樣式渲染和部分交互。

Bower 安裝：

bower install planeui

使用方法

<link rel="stylesheet" type="text/css" href="dist/css/planeui.min.css" />
<script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="./dist/js/planeui.js"></script>

兼容IE8~9 的用法（基本的內(nèi)容渲染或不完全的支持，不過(guò)還是建議不考慮兼容 IE8）：

<link rel="stylesheet" type="text/css" href="./dist/css/planeui.min.css" />

<!--[if (gte IE 9) | !(IE)]>
<!--><script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
<!--<![endif]-->

<!--[if lt IE 9]>
<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./dist/js/planeui.patch.ie8.min.js"></script>
<![endif]-->

<!--[if lt IE 10]>
<script type="text/javascript" src="./dist/js/planeui.patch.ie9.min.js"></script>
<![endif]-->

<script type="text/javascript" src="./dist/js/planeui.js"></script>

響應(yīng)式網(wǎng)格布局：

整體布局及限定最大寬度：

<div class="pui-layout pui-layout-fixed"></div>

.pui-layout-fixed即限定最大寬度為960px，其他寬度限定：pui-layout-fixed-980 pui-layout-fixed-1000 pui-layout-fixed-1200 pui-layout-fixed-1360 pui-layout-fixed-1400 pui-layout-fixed-1500 pui-layout-fixed-1600 pui-layout-fixed-1700 pui-layout-fixed-1800，通過(guò)媒體查詢當(dāng)前的屏幕寬度響應(yīng)對(duì)應(yīng)最大寬度。

12 等分網(wǎng)格布局示例：

<div class="pui-grid">
    <div class="pui-row">
        <div class="pui-grid-xs-3"></div>
        <div class="pui-grid-xs-3"></div>
        <div class="pui-grid-xs-3"></div>
        <div class="pui-grid-xs-3"></div>
    </div>
    <div class="pui-row">
        <div class="pui-grid-xs-4"></div>
        <div class="pui-grid-xs-4"></div>
        <div class="pui-grid-xs-4"></div>
    </div>
    <div class="pui-row">
        <div class="pui-grid-xs-3"></div>
        <div class="pui-grid-xs-6"></div>
        <div class="pui-grid-xs-3"></div>
    </div>
    <div class="pui-row">
        <div class="pui-grid-xs-5"></div>
        <div class="pui-grid-xs-7"></div>
    </div>
</div>

Flexbox 彈性布局示例（不支持 IE9 及以下版本）：

<div class="pui-flexbox pui-flex-column">
    <header>標(biāo)題欄</header>
    <div class="pui-flex">內(nèi)容層</div>
    <footer>底欄</footer>
</div>

更多示例及用法詳見(jiàn)：https://pandao.github.io/planeui/

組件列表

• Arrow

• Article

• App Layout

• Animations

• Basic

• Badge / Label / Tag

• Button

• Button Sheet

• Breadcrumb

• Card

• Colors (Material Design Colors)

• Color Picker (Material Design Color Picker)

• Checkbox

• Close Button

• Comment

• Dialog

• Date Picker（未實(shí)現(xiàn)）

• Fonts

• Font sizer

• File Input

• FullPage

• Flexbox Layout

• Forms

• Form Validator

• Grid Layout

• Gallery （未實(shí)現(xiàn)）

• Icons （自帶 Font Awesome 和 手機(jī)淘寶圖標(biāo)庫(kù)兩套圖標(biāo)庫(kù)）

• Image

• List

• ListView

• Loading

• Menu

• Menubar

• Menu Accordion

• Mask

• Notice

• Pagination

• Progress

• Rating

• Radio Button

• Ring Progress

• Search

• Slider（未實(shí)現(xiàn)）

• Switch Button

• ScrollTo (Anchor + Container)

• SideNav / Side slide (Off Canvas Plus)

• Tab

• Texts

• Table

• Top10

• Tooltip

• Timeline

• Time Picker（未實(shí)現(xiàn)）

• Uploader（未實(shí)現(xiàn)）

• Z-Depth (Material Design Z-Depth)

依賴項(xiàng)目及致謝

1、依賴項(xiàng)目

• jQuery  jQuery License

• Normalize.css 未知 License

• Font Awesome  GPL License & CC BY 3.0 License

• 手機(jī)淘寶圖標(biāo)庫(kù) 未知 License

• HTML5 Shiv  MIT and GPL2 licenses

• Respond MIT License

• Selectivizr MIT License

• Modernizr MIT License

• Flexie MIT License

• Prefixes.scss MIT License

2、參考項(xiàng)目

• Bootstrap

• Foundation

• Semantic UI

• Amaze UI

• UI Kit

• Google Material Design

3、構(gòu)建工具

• Gulp.js

• Sass/Scss MIT License

注：以上所有項(xiàng)目排名不分先后。

兼容支持情況

Plane UI 對(duì)瀏覽器進(jìn)行了分級(jí)支持 (GBS，即 Graded Browser Support，分級(jí)瀏覽器支持)，優(yōu)先支持那些支持 HTML 5、CSS3、ES5 / 6 等新特性的現(xiàn)代瀏覽器。

A > B > C > D

兼容支持測(cè)試：

• iOS 7+

• Android 4.2+

• Chrome (latest)

• Firefox (latest)

• Safari 6+

• Opera (latest)

• Internet Explorer 9+

IE 9 下因?yàn)樗旧聿恢С植糠?HTML5 特性（例如動(dòng)畫(huà)、Flexbox等）的原因，不太完美的支持。 IE 8 只是提供最基本的兼容支持，有部分不支持、不完善或兼容性差。 IE 7 及以下版本、Window Phone 等平臺(tái)或?yàn)g覽器均未測(cè)試。

其他環(huán)境的兼容測(cè)試：

• Node-webkit

• Phonegap

注：由于條件的限制，Android 和 iOS 的其他版本暫時(shí)未測(cè)試，歡迎使用者反饋和提交 Bug。