# 創建主題
擴展UIkit并添加你自己的獨一無二的主題。
## 如何開始
默認地,UIkit帶有一個非常基礎的主題。如果要修改它的樣式,你不需要編輯任何核心框架文件。相反,你可以通過創建一個自定義主題來擴展UIKit。這樣便允許你輕松地更新UIkit的核心文件。我們甚至提供了一些靈巧的主題以幫助你入門。要創建自己的主題,請按照下面步驟操作:(這里有一篇文章可以參考下:[uikit框架開發前期配置及定制主題方法](https://segmentfault.com/a/1190000004283813) )
### 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](http://lesscss.org) 的混合(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; }
}
```
- UIkit 中文文檔
- 開始使用
- 初學者
- 開始使用
- 如何自定義
- 布局示例
- 開發者
- 項目結構
- Less & Sass 文件
- 創建主題
- 創建樣式
- Customizer.json
- JavaScript
- 自定義前綴
- 核心組件
- 默認
- 基礎
- 打印
- 布局類組件
- 網格
- 面板/Panel
- 塊/Block
- 文章
- 評論/Comment
- 效果/Utility
- Flex 布局
- 覆蓋/Cover
- 導航類組件
- 導航菜單
- 導航欄
- 二級導航
- 面包屑/Breadcrumb
- 分頁
- 選項卡
- 縮略圖導航/Thumbnav
- 頁面元素
- 列表
- 描述列表
- 表格
- 表單
- 常用組件
- 按鈕
- 圖標
- 關閉/Close
- 徽章/Badge
- 提示框
- 縮略圖/Thumbnail
- 遮罩/Overlay
- 文本
- 列
- 動畫
- 對比度/Contrast
- JAVASCRIPT組件
- 下拉菜單
- 模態對話框
- 抽屜/Off-canvas
- 切換器/Switcher
- 撥動/toggle
- 滾動監聽/Scrollspy
- 平滑滾動
- 附加組件
- 布局類組件
- 動態網格
- 視差網格
- 導航類組件
- 圓點導航
- 滑動導航/Slidenav
- 動態分頁
- 常用組件
- 高級表單
- 文件表單/Form file
- 密碼表單
- 選擇表單
- 占位符
- 進度條/Progress
- JAVASCRIPT組件
- 燈箱/Lightbox
- 自動完成/Autocomplete
- 日期選擇器/Datepicker
- HTML 編輯器
- 滾動條/Slider
- 滑塊集/Slideset
- 幻燈片/Slideshow
- 視差/Parallax
- 手風琴/Accordion
- 通知/Notify
- 搜索/Search
- 可嵌套/Nestable
- 可排序/Sortable
- 附著/Sticky
- 時間選擇器
- 工具提示/Tooltip
- 上傳