创建主题

扩展 UIkit 并添加您自己独特的主题。

如何开始

默认情况下，UIkit 带有非常基本的主题。要修改样式，您不必编辑任何核心框架文件。相反，您可以通过创建自定义主题来扩展 UIkit。这使您可以轻松更新 UIkit 核心文件。我们甚至提供了一些简洁的主题来帮助您入门。要创建您自己的主题，请按照以下步骤操作

1. 创建主题目录

下载或克隆 UIkit 并安装 Node 和 Gulp。最后在此处创建您的主题文件夹 /custom/THEME-NAME。如果不存在 /custom 目录，请先创建它。

注意 /custom 文件夹设置为 git 忽略，这可防止您的自定义文件被推送到 UIkit 存储库中。如果您正在使用 UIkit 的 git 存储库的克隆版本，最好将 /custom 作为您自己的 git 存储库。这样，您的主题文件就可以在版本控制下进行管理，而不会干扰 UIkit 文件。

2. 添加您的主题

在 /custom/THEME-NAME 文件夹中创建 uikit.less 文件，并添加 @import "../../src/less/uikit.less"; 规则以访问核心框架中的所有 Less 文件并采用其基本样式。就这样！您可以开始从头开始添加自己的主题了。

注意 为了让您立即开始，我们提供了默认、渐变和几乎扁平的主题。所有默认文件都已导入，您还将找到所有主题文件及其相关的钩子。因此，您只需将文件夹复制并重命名到 /custom 目录中即可。

3. 自定义器和测试

在您的 UIkit 文件夹中运行 gulp 任务 indexthemes。现在，新创建的主题将自动在自定义器和测试文件中可用。

4. 构建您的主题

您可以从自定义器中生成主题的 CSS。如果您想改用 gulp 任务，请运行 gulp dist -t THEME-NAME。生成的文件将位于 dist/ 文件夹中。

最佳主题实践

有不同的方法来设置主题样式。我们推荐以下工作流程。

1. 使用变量

首先要做的是自定义已声明变量的值。您可以在核心框架的 Less 文件中找到每个组件的所有变量，并在您的主题中覆盖它们。

示例

// default value
@button-height: 30px;

// new value
@button-height: 35px;

2. 使用钩子

为了防止开销选择器，我们使用来自 Less 的 Mixin，它会钩入 UIkit 源代码中预定义的选择器并应用其他属性。选择器不必在所有文档中重复，并且可以更轻松地进行全局更改。

示例

// CSS rule
.uk-panel {
    background: @background;

    // mixin to add new declaration
    .hook-panel;
}

// mixin to add new declaration
.hook-panel() { color: #fff; }

3. 其他钩子

如果既没有变量也没有可用的钩子，您当然可以创建自己的选择器。为此，请使用 .hook-panel-misc 钩子并在其中写入您的选择器。这会将您的新选择器排序到已编译 CSS 文件的正确位置。

示例

// misc mixin
.hook-panel-misc() {

    // new rule
    .uk-panel a { color: #f00; }
}