项目结构

深入了解 UIkit 的核心，并了解它的全部内容。

GitHub

UIkit 托管在 GitHub 上，并根据 MIT 许可证 授权。欢迎您将其用于所有个人和商业项目。要访问所有源文件，只需克隆 GitHub 上的存储库或下载最新版本。

下载源代码

文件结构

UIkit 基于 Less 构建，Less 是一种 CSS 预处理器，它向 CSS 添加了变量、mixin 等更多功能。它将用 Less 编写的代码编译为 CSS。UIkit 的主要文件结构如下。

所有编译和压缩后的 CSS 和 JavaScript 文件，以及 Less 和 Sass 文件都可以在单独的 Bower UIkit 存储库 中找到。有关更多信息，请查看 Less 和 Sass 文件的文档。

自动化预处理

为了自动化将 Less 文件编译为 CSS 的过程，我们使用 Gulp，一个基于 Node.js 的任务运行器，它会监视您正在工作的源目录。每当您在源文件中保存更改时，Gulp 都会自动将所有文件编译为一个 CSS 文件。

首先，您需要安装 Node 并将 gulp 设置为全局安装。最后，切换到 UIkit 目录并安装 Node 依赖项。

npm install -g gulp

cd uikit
npm install

现在您可以运行 Gulp 来构建和修改发布版本。构建的 UIkit 版本将放在 /dist 目录中。传递一个主题名称参数以仅构建指定的主题。

gulp [-t themename]

您还可以将 Gulp 设置为监视您的工作目录，这样它会在您每次点击保存时自动预处理您的文件。传递主题参数以仅监视指定的主题，以加快构建过程。

gulp watch [-t themename]

将新主题和样式加载到定制器中。

gulp indexthemes

测试

UIkit 为每个组件提供测试文件。这些页面中的每一个都包含其组件的测试用例，并为您概述了开箱即用的所有支持的可能性。

UIkit 使用 BrowserSync 来加速您的工作流程。运行 gulp sync，您就可以在自己的浏览器中以及在修改自己的主题或修改现有主题时，跨多个设备实时查看更改。您可以在测试中切换所有组件和主题，甚至可以切换到 RTL 模式。

转到测试