HTML5 跨终端响应式前端界面框架：Plane UI
Plane UI，意为纸飞机或平面 UI，即 P(aper) (P)lane UI 的缩写，是一个构建 HTML5 应用的跨终端响应式前端界面框架及解决方案。
设计理念
-
简单通用，高效开发；
-
模块化，低耦合；
-
移动优先，优雅降级；
-
美学追求，交互为本；
-
持续演进，拥抱新技术；
主要特性
-
基于 HTML5 + CSS3：移动优先，快速开发跨终端响应式 Web 应用；
-
交互美学：扁平化风格，借鉴和溶合 Google Material Design 部分设计风格及规范，同时又有自己的风格；
-
按需定制：样式语义化，使用 SCSS 预处理样式；
-
基于 jQuery：更高的开发效率，方便使用各种 jQuery 插件；
-
丰富的组件：自带大量常用的组件，并向 Web Components 演化；
-
组件模块化：遵循 CommonJS 规范，支持 AMD / CMD 各种模块化加载工具；
-
命名空间： CSS 前缀式命名空间；
-
优雅降级：向下“基本”兼容到 IE8 ；
注：IE8 下支持基本的内容和样式渲染和部分交互。
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 的用法（基本的内容渲染或不完全的支持，不过还是建议不考虑兼容 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>
响应式网格布局：
| 尺码 | 分辨率 | 描述 |
|---|---|---|
| xs | * | 所有屏幕（或手机竖屏） |
| sm | 640px及以上 | 手机横屏等 |
| md | 768px及以上 | 平板电脑（iPad）竖屏等 |
| lg | 992px及以上 | 平板电脑（iPad）横屏、PC 机、笔记本等 |
| xl | 1200px及以上 | PC 机、笔记本等 |
| xxl | 1400px及以上 | PC 机、笔记本等 |
整体布局及限定最大宽度：
<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 等分网格布局示例：
<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">内容层</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（未实现）
-
Fonts
-
Font sizer
-
File Input
-
FullPage
-
Flexbox Layout
-
Forms
-
Form Validator
-
Grid Layout
-
Gallery （未实现）
-
Icons （自带 Font Awesome 和 手机淘宝图标库两套图标库）
-
Image
-
List
-
ListView
-
Loading
-
Menu
-
Menubar
-
Menu Accordion
-
Mask
-
Notice
-
Pagination
-
Progress
-
Rating
-
Radio Button
-
Ring Progress
-
Search
-
Slider（未实现）
-
Switch Button
-
ScrollTo (Anchor + Container)
-
SideNav / Side slide (Off Canvas Plus)
-
Tab
-
Texts
-
Table
-
Top10
-
Tooltip
-
Timeline
-
Time Picker（未实现）
-
Uploader（未实现）
-
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、构建工具
-
Gulp.js
-
Sass/Scss MIT License
注：以上所有项目排名不分先后。
兼容支持情况
Plane UI 对浏览器进行了分级支持 (GBS，即 Graded Browser Support，分级浏览器支持)，优先支持那些支持 HTML 5、CSS3、ES5 / 6 等新特性的现代浏览器。
A > B > C > D
| 级别 | 浏览器 | 描述 |
|---|---|---|
| A 级 | Webkit 系（Chrome 31+、Safari 7+、Opera 29+等） | 完整的渲染和交互支持 |
| Android 4.2+ 浏览器（自带、UC、QQ、Chrome等） | ||
| iOS Safari 7.1+ | ||
| Firefox 31+ | ||
| 桌面 IE10+、WP 8.1+ IE | ||
| B 级 | iOS 6.x 浏览器 | 基本完整的支持，部分支持不完善 |
| Android 2.3.x+ 浏览器 | ||
| Firefox 旧版本 | ||
| Opera 旧版本（非 Chromium） | ||
| IE9、WP IE | ||
| C 级 | IE8、Android 2.2.x+ 浏览器 | 部分基本支持，基本内容的渲染 |
| D 级 | 其他浏览器（IE6~7等） | 部分基本支持或不支持 |
兼容支持测试：
-
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 等平台或浏览器均未测试。
其他环境的兼容测试：
-
Node-webkit
-
Phonegap
注：由于条件的限制，Android 和 iOS 的其他版本暂时未测试，欢迎使用者反馈和提交 Bug。