搜尋
首頁web前端css教學用Gulp創建自定義Uikit主題,少

用Gulp創建自定義Uikit主題,少

鑰匙要點

    Uikit的自定義器可用於為網站創建唯一的主題和主題變體(樣式),從而使它們能夠在人群中脫穎而出。該過程很簡單,但需要適當的工作流程以最大程度地減少並發症。
  • 要設置自定義,必須下載或克隆Uikit存儲庫,安裝節點和GULP,然後安裝Uikit的開發依賴關係。然後,在根目錄中,可以創建一個主題文件夾,並添加必要的文件和修改。
  • 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和變量來樣式組件。

>

>如何測試我的自定義Uikit主題?

>您可以通過在一個中包括生成的CSS文件來測試您的自定義UIKIT主題。 HTML文件並在Web瀏覽器中打開它。然後,您可以檢查元素並檢查它們是否按預期進行了樣式。

>如何優化我的自定義UIKIT主題以生產?

您可以通過使用Gulp來優化生產的自定義Uikit主題縮小CSS文件。這將降低文件大小並提高網站的負載速度。

>我可以在諸如主題福雷斯特之類的市場上出售我的自定義Uikit主題嗎?

是的,您可以在市場上出售您的自定義UIKIT主題喜歡主題。但是,您需要確保您的主題符合市場的質量標準,並且您有必要的出售它。當新版本將新版本從新版本合併到主題時,您可以更新自定義UIKIT主題。然後,您可以測試主題​​以確保它可以與新版本正確合作。

我可以在WordPress主題中使用我的自定義UIKIT主題嗎? >

以上是用Gulp創建自定義Uikit主題,少的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
什麼是CSS網格?什麼是CSS網格?Apr 30, 2025 pm 03:21 PM

CSS網格是創建複雜,響應式Web佈局的強大工具。它簡化了設計,提高可訪問性並提供了比舊方法更多的控制權。

什麼是CSS Flexbox?什麼是CSS Flexbox?Apr 30, 2025 pm 03:20 PM

文章討論了CSS FlexBox,這是一種佈局方法,用於有效地對齊和分佈響應設計中的空間。它說明了FlexBox用法,將其與CSS網格進行了比較,並詳細瀏覽了瀏覽器支持。

我們如何使用CSS使網站迅速響應?我們如何使用CSS使網站迅速響應?Apr 30, 2025 pm 03:19 PM

本文討論了使用CSS創建響應網站的技術,包括視口元標籤,靈活的網格,流體媒體,媒體查詢和相對單元。它還涵蓋了使用CSS網格和Flexbox一起使用,並推薦CSS框架

CSS盒裝屬性有什麼作用?CSS盒裝屬性有什麼作用?Apr 30, 2025 pm 03:18 PM

本文討論了CSS盒裝屬性,該屬性控制了元素維度的計算方式。它解釋了諸如Content-Box,Border-Box和Padding-Box之類的值,以及它們對佈局設計和形式對齊的影響。

我們如何使用CSS動畫?我們如何使用CSS動畫?Apr 30, 2025 pm 03:17 PM

文章討論使用CSS,關鍵屬性並與JavaScript結合創建動畫。主要問題是瀏覽器兼容性。

我們可以使用CSS向我們的項目添加3D轉換嗎?我們可以使用CSS向我們的項目添加3D轉換嗎?Apr 30, 2025 pm 03:16 PM

文章討論了Web項目的3D轉換,關鍵屬性,瀏覽器兼容性和性能注意事項的討論。 (角色計數:159)

我們如何在CSS中添加梯度?我們如何在CSS中添加梯度?Apr 30, 2025 pm 03:15 PM

文章討論了使用CSS梯度(線性,徑向,重複)來增強網站視覺效果,添加深度,焦點和現代美學。

CSS中的偽元素是什麼?CSS中的偽元素是什麼?Apr 30, 2025 pm 03:14 PM

文章討論了CSS中的偽元素,它們在增強HTML樣式方面的使用以及與偽級的差異。提供實用的例子。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具