Plane UIHTML5 跨终端响应式前端界面框架

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>

响应式网格布局：

整体布局及限定最大宽度：

<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

兼容支持测试：

• 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。