创建主题

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

如何开始

FEA 默认带有一个基础主题。如果要修改它的样式,通过创建一个自定义主题来扩展 FEA,而不需要编辑任何核心框架文件。我们提供了一些简洁的主题以帮助你入门。要创建自己的主题,请按照下面步骤操作:

1. 创建主题目录

下载或复制 FEA ,安装 Node 和 Grunt。最后,在这里创建你的主题文件夹 /src/less/theme/主题名称

2. 添加你的主题

/src/less文件夹中创建fea.主题名称.less 文件,并添加

@import "_v/variable.less";
@import "_v/mixin.less";
@import "_core.less";
@import "_components.less";
规则来访问核心框架中的所有 Less 文件并采用它的基础样式。下一步,你可以从零开始定制你自己的主题了。

备注 为了能立即开始你的工作,我们提供了些默认扩展主题。所有默认文件都已经引入了,你同样可以找到所有主题文件以及与它们相关的钩子。所以你只需要复制并重命名/src/less/theme/default即可新建一个主题。

3. 生成你的主题

生成你的主题需要添加一个 grunt 任务, 然后执行 grunt 命令

添加 grunt 任务

Gruntfile.js 文件中, 在

"dist/css/<%= pkg.name %>.x.rtl.css": "src/less/<%= pkg.name %>.x.rtl.less"
之后添加
,"dist/css/<%= pkg.name %>.主题名称.css": "src/less/<%= pkg.name %>.主题名称.less"
"dist/css/<%= pkg.name %>.x.rtl.min.css": "src/less/<%= pkg.name %>.x.rtl.less"
之后添加
,"dist/css/<%= pkg.name %>.主题名称.min.css": "src/less/<%= pkg.name %>.主题名称.less"

执行 grunt 命令

在你的 FEA 文件夹中运行 grunt 命令


最佳主题实践

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

1. 使用变量

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

示例

/src/less/common/button.less

// 默认值
@btn-border-width 1px;

/src/less/theme/主题名称/button.less

// 新值
@btn-border-width 2px;

2. 使用钩子

为了防止架空选择器,我们使用 Less 的混合(Mixins)方法与 FEA 源码中预定义的选择器进行挂钩,并运用其附加属性。这样选择器即可很容易的贯穿所有文档和全局的变换修改。

示例

/src/less/common/panel.less

// CSS规则
.panel {
	border: @panel-border;
	.hook-panel;
}

/src/less/theme/主题名称/panel.less

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

3. 通用钩子

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

示例

/src/less/theme/主题名称/panel.less

// misc mixin
.hook-panel-misc() {
	// new rule
	.panel a { color: #f00; }
}