创建主题

扩展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; }
}