テーマを構成する方法

前の例では、全てのカスタムルールを「/custom/my-theme.less」に直接追加しています。いくつかの変数を変更して完成としている場合は、全く問題ありません。

ただし、大規模なカスタマイズの場合は、このファイルをLessコンパイラのエントリポイントとしてのみ使用することをお勧めします。サブフォルダー内のコンポーネントごとに、全てのルールを1つのファイルに分類することをお勧めします。デフォルトのテーマ「/src/less/uikit.theme.less」にあるものと同じ構造です。

NOTE例では、完全なUIkitプロジェクトの「/custom」ディレクト

UIkitテーマを作成する

独自のLessコードを配置するようにファイルを設定したら、UIkitのテーマを思いどおりにできます。これまでLessを使用したことがない場合は、言語機能を確認してください。UIkitのLessソースを使用する場合、いくつかの推奨事項があります。

変数を使用する

すでに宣言されている変数の値を上書きするだけで、多くのカスタマイズが可能です。フレームワークのLessファイル内で各コンポーネントのすべての変数を見つけて、テーマでそれらをオーバーライドすることができます。

まず、ソース内で変更するLess変数を見つけます。例えば、グローバルリンクの色は 「/src/less

構築する方法

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

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

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

プロジェクトのワークフローにUIkitを含めるには、UIkitスタイル(uikit.less)または、デフォルトテーマのUIkit(uikit.theme.less)を独自のLessファイルにインポートする必要があり

Lessで独自のテーマを作成する方法

UIkitをインストールすると独自のカスタムテーマを作ることができます。Lessは、UIkitスタイルが記述されている言語です。CSSルールを手動で上書きするのではなく、ビルドすることでカスタマイズをすることができます。

Githubソースからコンパイル

UIkitを自分でコンパイルするには、付属のビルドスクリプトを使用できます。

# Run once to install all dependenciesyarn# Compile all source filesyarn compile# Watch files and compile automatically everytime a file changesyarn watch

NOTENode.jsバージョン8.2.0以降を使用してください。

コンパイルされたdistフォルダーには、デフォルトでチェックインされない追加のファイルが含まれるようになりました。カ

ブラウザのサポート

UIkitがテストされているバージョンを示します。最新」とは、そのブラウザの最近のすべてのバージョンで問題なく動作することを意味します。多くのブラウザがローリングリリースに移行しているため、ブラウザのサポートを特定のバージョンに固定することは、近年少し注意が必要になっています。簡単に言うと、UIkitはほとんどすべての最新のブラウザーで動作します。最新最新最新11歳以上9.1+最新

エディター用のUIkit入力支援

高度なエディタ持っている場合に効率的にコーディングすることができます。お気に入りにのエディター用のオートコンプリートプラグインをインストールすることをお勧めします。 UIkitのクラスとマークアップを検索する必要がなくなるので時間を節約することができます。 Sublime Text3のオートコンプリートプラグイン Atomのオートコンプリートプラグイン VisualStudioCodeのスニペット

HTMLマークアップ

コンパイルおよび縮小されたCSSとJavaScriptを<head>HTML5ドキュメントの要素に追加します。UIkitアイコンライブラリも含めます。基本的な設定は以上です。

<!DOCTYPE html><html> <head> <title>Title</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="st

パッケージの内容

ZipファイルにはコンパイルされたCSSファイルとJavaScriptファイルが含まれています。これはあなたが始めるために必要なすべてです。後で、UIkitを自分でインストールしてコンパイルし、独自のUIkitテーマを作成することもできます。

フォルダ説明/cssUIkitCSSと右から左へのバージョンが含まれています。/jsUIkitJavaScriptとアイコンライブラリJavaScriptが含まれています。

ソースのファイル構造

Githubプロジェクトには、distフォルダーにコンパイルされたすべてのソースファイルが含まれています。lessによってCSSにコンパイルされ、JavaScriptがバンドルされてECMAScript5にトランスパイルされ、アイコンがアイコンライブラリにバンドルされています。

フォルダ説明/srcすべてのLess、JavaScript、および画像ソースが含まれています。/distコンパイルされたCSSとJSが含まれ、リリースごとに更新されます。/testsすべてのコンポーネントのHTMLテストファイルが含まれています。

ダウンロード

UIkitを入手するには、次のオプションがあります。

ビルド済みのJavaScriptとCSSを含む最新リリースをダウンロードします。Yarnを使用してインストールし、ビルド済みのJavaScript、CSS、およびLessソースファイルを取得します。これは、一般的なWebプロジェクトにUIkitを使用する場合に推奨されます。yarn add uikit リポジトリのクローンを作成して、ビルドスクリプトを含むすべてのソースファイルを取得します。git clone git://github.com/uikit/uikit.git

すべてのUIKitバージョンはCDNサービス js

前書き

UIkitの基本的なセットアップと概要

まず、UIkitをダウンロードする必要があります。その他のパッケージとCDNへのリンクについては、インストールガイドにアクセスして詳細を確認してください。

UIkitをダウンロードする