# 项目结构
深入挖掘UIkit的核心,了解关于它的一切。
## GitHub
UIkit被托管在 [GitHub](https://github.com/uikit/uikit) 上,基于 [MIT 许可协议](http://opensource.org/licenses/MIT)。 欢迎使用它应用于个人或商业项目。想要获取 UIKit 所有的源文件,只需克隆 [GitHub](https://github.com/uikit/uikit) 上的资源库,或者直接下载最新的版本。
[下载源代码](https://github.com/uikit/uikit/archive/master.zip)
* * *
## 文件结构
UIkit 基于[LESS](http://www.lesscss.net/)创建,LESS是一款CSS预处理器,将 CSS 赋予了动态语言的特性,如变量,继承,运算,函数等。它将写入LESS中的代码编译成为CSS。它将写在Less里的代码编译成CSS。UIkit主要的文件结构如下:
| 文件夹 | 描述 |
| --- | --- |
| `/docs` | 包含你正在看的UIkit文档的绝大多数文件 |
| `/src` | 包含全部Less和JavaScript组件文件 |
| `/tests` | 包含所有组件的测试文件 |
| `/themes` | 在子文件夹中包含的所有额外提供的主题文件。 |
| `/vendor` | 包含UIkit所使用的jQuery和其他的外部库。 |
所有编译版和压缩版CSS文件、JS文件,以及Less和Sass文件都能在独立的 [Bower UIkit repository](https://github.com/uikit/bower-uikit) 项目中找到。查看 [Less 和 Sass 文件](documentation_less-sass.html) 获取更多信息。
* * *
## 自动地预处理
为了自动化处理Less文件编译成为CSS的过程,我们使用 [Gulp](http://gulpjs.com/),一款基于 [Node.js](http://nodejs.org/) 的前端构建工具,它监控你的工作目录。无论何时,只要你保存了有修改行为的源文件,Gulp都会自动地将所有文件编译成独立的CSS文件。
首先,你需要安装Node,并设置 `gulp` 作为一个全局的安装。最后,切换到UIkit目录,安装Node依赖模块(Node dependencies)。
```
npm install -g gulp
cd uikit
npm install
```
现在,你可以运行Gulp来创建和修改版本。UIkit的内置版本被放在 `/dist` 目录中。通过主题名称参数来只创建一个指定的主题。
```
gulp [-t themename]
```
你也可以设置Gulp监控你的工作目录,这样它便能在你每次保存时,自动地编译文件。通过主题名称参数来监控一个指定的主题以提升建设进度。
```
gulp watch [-t themename]
```
加载新的主题和样式到定制工具中。
```
gulp indexthemes
```
* * *
## 测试
UIkit为每个组件提供测试文件。其中每个页面都包含了组件的测试示例,并为你提供了一个关于盒模型所支持的所有可能性的总览。
UIkit 使用 [BrowserSync](http://www.browsersync.io/) 加速你的工作流程。运行 `gulp sync` ,你就能在制作自己的主题或者修改现有主题时,即时地查看改动,这不只是在浏览器中,还支持跨设备。你能在测试中切换所有的组件和主题,甚至切换到RTL模式(从右到左)
[前往测试](../tests/overview.html)
- UIkit 中文文档
- 开始使用
- 初学者
- 开始使用
- 如何自定义
- 布局示例
- 开发者
- 项目结构
- Less & Sass 文件
- 创建主题
- 创建样式
- Customizer.json
- JavaScript
- 自定义前缀
- 核心组件
- 默认
- 基础
- 打印
- 布局类组件
- 网格
- 面板/Panel
- 块/Block
- 文章
- 评论/Comment
- 效果/Utility
- Flex 布局
- 覆盖/Cover
- 导航类组件
- 导航菜单
- 导航栏
- 二级导航
- 面包屑/Breadcrumb
- 分页
- 选项卡
- 缩略图导航/Thumbnav
- 页面元素
- 列表
- 描述列表
- 表格
- 表单
- 常用组件
- 按钮
- 图标
- 关闭/Close
- 徽章/Badge
- 提示框
- 缩略图/Thumbnail
- 遮罩/Overlay
- 文本
- 列
- 动画
- 对比度/Contrast
- JAVASCRIPT组件
- 下拉菜单
- 模态对话框
- 抽屉/Off-canvas
- 切换器/Switcher
- 拨动/toggle
- 滚动监听/Scrollspy
- 平滑滚动
- 附加组件
- 布局类组件
- 动态网格
- 视差网格
- 导航类组件
- 圆点导航
- 滑动导航/Slidenav
- 动态分页
- 常用组件
- 高级表单
- 文件表单/Form file
- 密码表单
- 选择表单
- 占位符
- 进度条/Progress
- JAVASCRIPT组件
- 灯箱/Lightbox
- 自动完成/Autocomplete
- 日期选择器/Datepicker
- HTML 编辑器
- 滚动条/Slider
- 滑块集/Slideset
- 幻灯片/Slideshow
- 视差/Parallax
- 手风琴/Accordion
- 通知/Notify
- 搜索/Search
- 可嵌套/Nestable
- 可排序/Sortable
- 附着/Sticky
- 时间选择器
- 工具提示/Tooltip
- 上传