创建主题
扩展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; }
}