用Gulp创建自定义Uikit主题，少-css教程-PHP中文网

首页

web前端

css教程

用Gulp创建自定义Uikit主题，少

尊渡假赌尊渡假赌尊渡假赌

Feb 24, 2025 am 10:47 AM

用Gulp创建自定义Uikit主题，少

钥匙要点

要设置自定义，必须下载或克隆Uikit存储库，安装节点和GULP，然后安装Uikit的开发依赖关系。然后，在根目录中，可以创建一个主题文件夹，并添加必要的文件和修改。
GUI定制器可直接用于更简单的修改。它允许开发人员修改变量，获取主题的最终CSS文件，并在创建主题变体时自动创建样式。它还允许控制定制器左面板中变量的可见性和可用性。>
每个人都希望变得独一无二。我想如果在周围的环境中有很多人看起来像您，对吗？对于其他人也是如此。您的朋友也不会很高兴在任何地方看到您的克隆。我们的网站也是如此。
>如今，建立一个具有前端框架的网站很常见。不过，问题在于，许多人将这些框架归咎于使所有网站“看起来相同”。但是，如果开发人员不愿意进行必要的自定义，则该工具不应指责。对于那些希望您建立的网站在人群中脱颖而出的人，我将演示如何使用Uikit的定制器创建不同的主题和主题变体（样式）。该过程很简单，但是您需要一个适当的工作流程才能以最小的头痛来完成。

>设置自定义

>假设您想以橙色为重音颜色为网站创建一个深色主题。另外，您还希望使用蓝色和绿色重音颜色的另外两个变体。让我们看看我们如何做。（注意：为了简洁起见，我将仅使用按钮来演示该过程）。

我们需要首先确保以下步骤完成：>

下载或克隆UIKIT存储库。

>安装节点和大口，如果还没有它们。

>安装Uikit的开发依赖性。您可以通过导航到Uikit root Directory并从终端安装NPM来执行此操作。

正确设置了所有这些，我们可以开始创建我们的主题。>

创建我们的主题

>仍在根目录中，创建一个称为“自定义”的文件夹。在该文件夹中，创建另一个称为“ Dark”的文件夹，并在其中创建一个名为uikit.less的文件。打开文件并添加以下内容：

<span><span>@import "../../src/less/uikit.less";</span>
</span><span><span>@import "button.less";</span></span>

>第一行将从核心框架中获取所有较少的文件，第二行将导入您要使用的文件来修改默认的UIKIT按钮。保存并关闭文件，并在同一目录中创建上述按钮。

进行进一步的自定义之前，您需要在定制器中本地提供主题。为此，在Uikit root目录中，在终端中运行以下内容：

gulp indexthemes

现在，启动您的Uikit网站的本地副本（您已安装的网站），然后在导航栏中单击“定制器”。当您打开“选择主题”下拉列表时，您应该在其末尾看到“黑暗”。在这一点上，当您选择它时，您会发现没有样式。为什么不呢？让我们看看。

>在Uikit的文档中未提及的一件事，这可能会使您感到头疼很多，这是您的主题需要一个称为Uikit-Customizer的文件。创建文件并添加以下行：

<span><span>@import "uikit.less"</span></span>

>您必须在主题的根目录（在我们的情况下，在“深色”文件夹中）将该文件放在上面的行中。如果此文件不存在，则无法正确使用自定义器 - 主题名称将出现在列表中，但样式将丢失。

注意：作为经验法则，Uikit-Customizer.LESSER.LELL FILE应导入主题使用的所有文件。在我们的示例中，导入uikit。不满足此要求，因为它既包含默认的Uikit样式和您的自定义按钮样式。

添加Uikit-Customizer。毫无疑问，您会发现这次所有组件都适当地设计了。因此，我们准备继续前进。

在组件的下拉列表中，放置在定制器右侧的面板左上角，切换为“按钮”。这样，您就可以看到所有可用的按钮样式。现在，我们可以打开按钮。毫无文件并开始添加我们的修改：>

在上面的代码中，我们在其正常，盘旋和活动状态中修改了默认按钮的文本和背景颜色的变量。对于其他特定按钮，我们也需要更改这些变量：

在Uikit

中使用钩子在处理简单修改时，修改Uikit的变量是更改框架组件外观的最简单方法。但是，对于更复杂的自定义化，例如添加新规则和/或更改现有规则而不破坏核心，Uikit提供了一种特殊的机制。它使用

<span><span>@button-color: #f90;</span>
</span><span><span>@button-hover-color: fade(@button-color, 75%);</span>
</span><span><span>@button-active-color: @button-color;</span>
</span>
<span><span>@button-background: #000;</span>
</span><span><span>@button-hover-background: lighten(@button-background, 20%);</span>
</span><span><span>@button-active-background: @button-hover-background;</span></span>

>钩子

安全地附加您的更改。让我们看看这一点。将以下代码放在变量下方，在按钮内。

<span><span>@import "../../src/less/uikit.less";</span>
</span><span><span>@import "button.less";</span></span>

>在这里，按钮组件的钩子用于添加边框半径和落下效果。

为了更具体的更改，Uikit提供了其他钩子。每个组件都有这样的钩子。这对于创建新的选择器或修改具有变量也不可用于自定义的挂钩的选择器很有用。让我们通过添加以下代码来证明这一点：

gulp indexthemes

>在这里，我们删除了未禁用的每个活动按钮的下降阴影。然后，我们删除所有州链接的下划线。最后，我们删除按钮链接的轮廓，而是添加一个不错的边框，当链接聚焦时显示了。保存按钮。

注意：您可以通过查看其相应的.LESS文件的末尾看到特定组件的所有可用挂钩。这是按钮组件的示例。

<span><span>@import "uikit.less"</span></span>

>现在，主要主题已经准备就绪，您可以在定制器中查看它。只需重新加载页面并享受即可。

用Gulp创建自定义Uikit主题，少

>为我们的主题创建样式

>现在我们准备创建主题的样式了。在我们的《黑暗主题》目录中，我们将创建一个名为“样式”的新文件夹，在其中我们将创建另一个称为“蓝色”的文件夹。在该文件夹中，创建一个空白样式。从您的按钮中复制前三行代码，然后将它们粘贴到文件中，然后将 @button-color的值更改为＃09F并保存文件。文件的内容看起来像这样：

<span><span>@button-color: #f90;</span>
</span><span><span>@button-hover-color: fade(@button-color, 75%);</span>
</span><span><span>@button-active-color: @button-color;</span>
</span>
<span><span>@button-background: #000;</span>
</span><span><span>@button-hover-background: lighten(@button-background, 20%);</span>
</span><span><span>@button-active-background: @button-hover-background;</span></span>

再次在终端中运行GULP索引，以包括新创建的样式，然后返回定制器并刷新页面。现在，在主题列表的末尾，您应该看到一个“深蓝色”选项。选择它，您会发现现在按钮带有漂亮的蓝色口音。对于绿色样式，请重复相同的过程，而是使用＃9C0的颜色值。

当您对主题感到满意时，可以通过运行此任务来构建它：

>这将构建黑暗主题，并将其放在Uikit根目录中的“区域”文件夹中。然后，在“ CSS”文件夹中，您会找到uikit.dark.css和uikit.dark.min.css文件。不幸的是，这些文件仅包含您主要主题的样式。不包括蓝色和绿色样式。但是您也可以通过使用GUI Customizer来获取这些文件的CSS文件，正如我接下来要解释的那样。

<span><span>@button-primary-color: darken(@button-primary-background, 20%);</span>
</span><span><span>@button-success-color: darken(@button-success-background, 20%);</span>
</span><span><span>@button-danger-color: darken(@button-danger-background, 20%);</span>
</span>
<span><span>@button-primary-hover-color: fade(@button-primary-color, 75%);</span>
</span><span><span>@button-success-hover-color: fade(@button-success-color, 75%);</span>
</span><span><span>@button-danger-hover-color: fade(@button-danger-color, 75%);</span>
</span>
<span><span>@button-primary-active-color: lighten(@button-primary-color, 35%);</span>
</span><span><span>@button-success-active-color: lighten(@button-success-color, 35%);</span>
</span><span><span>@button-danger-active-color: lighten(@button-danger-color, 35%);</span></span>

使用GUI Customizer

>我向您展示了如何手动创建主题，因为知道特定过程的基本机制总是很好。但是，如果您不需要复杂的修改，则可以直接使用GUI定制器。让我们探索所需的步骤。

转到“定制器”，然后选择要自定义的主题。
>
>使用左图修改变量。通常，仅显示全局变量。为了使组件的变量可见，您需要激活“高级模式”选项。默认情况下，隐藏了通过另一个变量定义的值的变量。在高级模式下，您可以在包含此类变量的组旁边看到一个“（更多）”按钮。

进行您想要的更改并点击“获取CSS”按钮。这将为您提供主题的最终CSS文件。您可以使用此按钮获取蓝色和绿色样式的CSS文件。只需选择“深蓝色”或“深绿色”，然后单击按钮。

如果您想要缩小版本，请检查“缩小CSS”选项
>
如果您使用从左到右的语言，请检查“ RTL模式”，整个主题将自动转换。>

>点击“少获取”按钮而不是“ get css”按钮，则输出文件将仅包含更改的变量。这样，您可以在创建主题变体时自动创建样式。>

>每个主题都使用customizer.json文件定义默认情况下或仅在高级模式下显示哪些变量。通过修改此文件，您可以控制定制器左面板中变量的可见性和可用性。有关此的更多详细信息，请参见customizer.json页面。

>注意：当您运行indexthemes任务时，如果您的主题没有自己的Customizer.json文件（创建新主题时是这种情况），则UIKIT使用默认主题中的文件（/themes/默认/customizer.json）。如果您打算自定义此文件，则需要将其复制并粘贴到主题的根目录中，然后再次运行Gulp索引以更新主题。

结论

>您看到自定义特定的前端框架并不像一开始看起来像是一项艰巨的任务。凭借一些对鸿沟和额外努力的了解，您可以使您的网站与众不同，可以在人群中脱颖而出而不会被标记为具有特定框架的构建。>

关于自定义UIKIT主题的常见问题，与Gulp＆Less

>如何使用Gulp创建一个自定义Uikit主题，而更少？

>使用GULP创建自定义Uikit主题，而较少涉及几个步骤。首先，您需要在计算机上安装node.js和npm。然后，您需要使用NPM安装Gulp，更少。之后，您可以从github克隆Uikit存储库并安装其依赖项。完成此操作后，您可以通过修改主题中的较少变量来开始创建自定义主题。然后，您可以使用GULP编译主题，该Gulp将生成一个可以在项目中包含的CSS文件。

>使用Gulp和创建Uikit主题的较少的好处是什么？

gulp，更少的东西为创建Uikit主题提供了一些好处。 Gulp是一个任务跑步者，可以自动化重复的任务，例如缩放，编译，单位测试和伸长术。这可以节省您大量的时间和精力。另一方面，更少的是CSS预处理器，它允许您使用变量，混合素，功能和其他功能，这些功能和其他功能可以使您的CSS更加可维护，具有借助和扩展。 CSS像Sass或手写笔这样的CSS预处理器可以创建Uikit主题？创建一个Uikit主题。但是，您需要记住Uikit的构建较少，因此您可能需要做一些额外的工作以将较少的代码转换为Sass或STYLUS。

>我如何自定义颜色，字体和Uikit主题的其他元素？

>您可以通过修改theme.them.less中的较少变量来自定义Uikit主题的颜色，字体和其他元素。例如，您可以通过修改 @Primary-Color变量来更改主颜色。您还可以通过修改 @font-family-base变量来更改字体系列。

>如何将自定义组件添加到UIKIT主题？

>您可以将自定义组件添加到UIKIT主题中通过为它们创建新的少文件并将其导入到主题中。然后，您可以使用Uikit Mixins和变量来样式组件。