一个纯 CSS 界面框架
简约现代风格；移动优先响应式。
一个 UI 组件库
细致交互效果；深入业务需求。
一个纯 JS 函数库
妈妈再也不担心我找不到代码复制了。
一个 WEBAPP 开发框架
体验趋于原生；最少代码完成最多业务。
一套前端开发规范
高效编码模型；构造大型项目。
一个前端集成解决方案
打包压缩；模块依赖；文档测试；团队协作。
TealUI 多数组件能独立使用，复制源码是最快的使用方式。
友情提示
右击文档页面查看源文件可找到源码；复制源码时请同时复制注释。
和传统框架不同，TealUI 是一个大型的代码库，所有源码体积超过 10M。因此我们建议您单独使用每个组件，点击每个组件页面右上角的“下载此组件”，即可下载组件所需的所有源码。
在下载和定制可以选择所需组件并打包下载，此工具也可在本地运行。
点此下载整个项目。项目结构为：
TealUI/
├── assets/ 存放项目所需工具。
├── dist/ 存放预生成的可直接引用的代码。
│ ├── images/
│ └── fonts/
├── src/ 存放所有组件源码和文档。
└── docs/ 存放教程。
使用 GIT
使用命令git clone https://github.com/Teal/TealUI.git下载项目。或 点此 Fork Git 项目。
使用 NPM
使用命令npm install TealUI安装项目。
TealUI 拥有独创的模块化方式，只需一行代码即可加载所需模块及依赖性。点此了解更多
<script type="text/javascript" src="boot.js?utility/dom/base,utility/dom/keyNav"></script>
直接引用项目 dist 文件夹下 teal-all-debug.js 和 teal-all-debug.css 即可使用所有组件。
为团队定制一套自己的 UI 组件库和框架集。点此了解更多
将以下代码存为 test.html，将任意组件的示例复制到 <body>，在浏览器打开即可见到效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>标题</title>
<link rel="stylesheet" type="text/css" href="http://teal.github.io/TealUI/dist/teal-ui.css" />
<script type="text/javascript" src="http://teal.github.io/TealUI/dist/teal-ui.js"></script>
</head>
<body>
Hello world
</body>
</html>
TealUI 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。项目中每个页面都要参照下面的格式进行设置。
<!DOCTYPE html>
<html lang="zh-CN">
...
</html>
TealUI 是移动设备优先的。所有样式优先考虑手机使用，并为电脑增加补充代码。
为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。
<meta name="viewport" content="width=device-width, initial-scale=1">
如果希望网站能完全模拟原生 APP 体验，禁止用户放大缩小网页，可改为如下代码：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">