Question

扩展UIkit并添加你自己的独一无二的主题。

如何开始

默认地，UIkit带有一个非常基础的主题。如果要修改它的样式，你不需要编辑任何核心框架文件。相反，你可以通过创建一个自定义主题来扩展UIKit。这样便允许你轻松地更新UIkit的核心文件。我们甚至提供了一些灵巧的主题以帮助你入门。要创建自己的主题，请按照下面步骤操作：（这里有一篇文章可以参考下：uikit框架开发前期配置及定制主题方法 ）

1. 创建主题目录

下载或克隆UIKit，安装 Node 和 Gulp 。最后，在这里创建你的主题文件夹 /custom/THEME-NAME。如果 /custom 不存在，那就创建它！

注意 /custom 文件夹设置为 git ignore，这样可以防止你的自定义文件被推入到UIKit库中。如果你在使用克隆版 UIkit's git 仓库， 它将是一次很好的将 /custom 作为你自己的git仓库的实践。这样，你的主题文件的版本控制将不会受到UIkit文件的干扰。

2. 添加你的主题

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

注意 为了能立即开始你的工作，我们提供了默认、渐变和扁平三个主题。所有默认文件都已经引入了，你同样可以找到所有主题文件以及与它们相关的钩子。所以你需要做的是复制文件夹到 /custom 目录中，并重命名。

3. 定制和测试

在你的 UIkit 文件夹中运行 gulp 的 indexthemes 指令。现在，刚刚新建的主题就将会自动出现在定制工具和测试文件中。

4. 构建你的主题

你可以在定制工具中生成你的主题的 CSS。如果你想使用 gulp 指令来做这事，运行 gulp dist -t THEME-NAME就行了。生成的文件被放置在 dist/ 文件夹中。

---

最佳主题实践

设计你的主题有多种不同的方法，我们推荐以下的工作流程。

1. 使用变量

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

Example

/src/core/button/button.less

// 默认值
@button-height: 30px;

/custom/THEME-NAME/button.less

// 新的值
@button-height: 35px;

2. 使用钩子

为了防止架空选择器，我们使用 Less 的混合（Mixins）方法与 UIkit 源码中预定义的选择器进行挂钩，并运用其附加属性。选择器不必在所有文件中重复填写，全局的修改变得更容易了。

Example

/src/core/panel/panel.less

// CSS 规则
.uk-panel {
    background: @background;
    // mixin 混合增加新的声明
    .hook-panel;
}

/custom/THEME-NAME/panel.less

// mixin 混合增加新的声明
.hook-panel() { color: #fff; }

3. 混杂的钩子/Miscellaneous hooks

如果没有变量也没有钩子可用，当然你也可以自行创建一个你自己的选择器。为此，请使用 .hook-panel-misc 钩子并将你的选择器写入其中。这样将会把你的新选择器整合到编译后的CSS文件的合适位置。

Example

/custom/THEME-NAME/panel.less

// misc mixin
.hook-panel-misc() {
    // 新的规则
    .uk-panel a { color: #f00; }
}