用Gulp創建自定義Uikit主題，少-css教學-PHP中文網

用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和變量來樣式組件。