Plane UIHTML5 跨終端響應式前端界面框架

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

設(shè)計理念

• 簡單通用，高效開發(fā)；

• 模塊化，低耦合；

• 移動優(yōu)先，優(yōu)雅降級；

• 美學追求，交互為本；

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

主要特性

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

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

• 按需定制：樣式語義化，使用 SCSS 預處理樣式；

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

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

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

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

• 優(yōu)雅降級：向下“基本”兼容到 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)容渲染或不完全的支持，不過還是建議不考慮兼容 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>

響應式網(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，通過媒體查詢當前的屏幕寬度響應對應最大寬度。

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>標題欄</header>
    <div class="pui-flex">內(nèi)容層</div>
    <footer>底欄</footer>
</div>

更多示例及用法詳見：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（未實現(xiàn)）

• Fonts

• Font sizer

• File Input

• FullPage

• Flexbox Layout

• Forms

• Form Validator

• Grid Layout

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

• Icons （自帶 Font Awesome 和 手機淘寶圖標庫兩套圖標庫）

• Image

• List

• ListView

• Loading

• Menu

• Menubar

• Menu Accordion

• Mask

• Notice

• Pagination

• Progress

• Rating

• Radio Button

• Ring Progress

• Search

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

• Switch Button

• ScrollTo (Anchor + Container)

• SideNav / Side slide (Off Canvas Plus)

• Tab

• Texts

• Table

• Top10

• Tooltip

• Timeline

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

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

• Z-Depth (Material Design Z-Depth)

依賴項目及致謝

1、依賴項目

• jQuery  jQuery License

• Normalize.css 未知 License

• Font Awesome  GPL License & CC BY 3.0 License

• 手機淘寶圖標庫 未知 License

• HTML5 Shiv  MIT and GPL2 licenses

• Respond MIT License

• Selectivizr MIT License

• Modernizr MIT License

• Flexie MIT License

• Prefixes.scss MIT License

2、參考項目

• Bootstrap

• Foundation

• Semantic UI

• Amaze UI

• UI Kit

• Google Material Design

3、構(gòu)建工具

• Gulp.js

• Sass/Scss MIT License

注：以上所有項目排名不分先后。

兼容支持情況

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

A > B > C > D

兼容支持測試：

• iOS 7+

• Android 4.2+

• Chrome (latest)

• Firefox (latest)

• Safari 6+

• Opera (latest)

• Internet Explorer 9+

IE 9 下因為它本身不支持部分 HTML5 特性（例如動畫、Flexbox等）的原因，不太完美的支持。 IE 8 只是提供最基本的兼容支持，有部分不支持、不完善或兼容性差。 IE 7 及以下版本、Window Phone 等平臺或瀏覽器均未測試。

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

• Node-webkit

• Phonegap

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