構築する方法

Lessのソースファイルを使用すると、UIkitをカスタマイズできます。
WebサイトでカスタマイズされたCSSテーマを使用するには、LessのソースをCSSにコンパイルする必要があります。

基本的に2つのアプローチがあります。
独自のビルドプロセスをセットアップするか、UIkitに含まれているビルドスクリプトを使用します。

独自のビルドプロセスを使用する

プロジェクトのワークフローにUIkitを含めるには、UIkitスタイル(uikit.less)または、デフォルトテーマのUIkit(uikit.theme.less)を独自のLessファイルにインポートする必要があります。
このメインのLessファイルはコンパイルをする必要があります。
Lessのコンパイル方法がわからない場合は、公式のLessドキュメントをお読みください。

// Import UIkit default theme (or uikit.less with only core styles)
@import "node_modules/uikit/src/less/uikit.theme.less";

// Your custom code goes here, e.g. mixins, variables.
// See "how to create a theme" below for more info.

準備されたビルドプロセスを使用する

UIkitのスタイルを変更したい場合は、そのビルドプロセスを使用して、異なるテーマのCSSを作成しプロジェクトに含めることができます。
独自のビルドプロセスを設定する必要はありません。

ビルドプロセスに独自のLessテーマを含めるには、「/custom」ディレクトリを作成します。
このディレクトリには、すべてのカスタムテーマが含まれます。

NOTE「/custom」フォルダーは.gitignoreにリストされており、カスタムファイルがUIkitリポジトリにプッシュされるのを防ぎます。独自のGitリポジトリとして「/custom」ディレクトリを使用することもできます。UIkitファイルに干渉することなく、テーマファイルをバージョン管理下に置くことができます。

ファイル「/custom/my-theme.less(またはその他の名前)」を作成し、UIkitスタイル(uikit.less)またはデフォルトテーマのUIkit(uikit.theme.less)をインポートします。

// Import UIkit default theme (or uikit.less with only core styles)
@import "../src/less/uikit.theme.less";

// Your custom code goes here, e.g. mixins, variables.
// See "how to create a theme" below for more info.

UIkitとカスタムテーマをCSSにコンパイルするには、yarnタスクcompileを実行します。

# Run once to install all dependencies
yarn install

# Compile all source files including your theme
yarn compile

# Watch files and compile automatically everytime a file changes
yarn watch

コンパイル生成されたCSSファイルは「/dist/css」フォルダーにあります。

NOTEカスタムテーマはテストファイルとして利用できます。ブラウザを「/tests」ディレクトリのインデックスに移動し、ドロップダウンメニューからテーマを選択するだけです。