本文へスキップ

ドキュメント

インストール

UIkitソースのダウンロード場所とコンパイル方法を説明します。

ダウンロード

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

すべてのUIkitバージョンのコンパイル済みファイルは、jsdelivr.com経由でjsDelivrコンテンツデリバリーネットワークにもホストされています。

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@[uikit-version]/dist/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@[uikit-version]/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@[uikit-version]/dist/js/uikit-icons.min.js"></script>

注記 最新のSubresource Integrity (SRI)ハッシュは、jsDelivrから取得できます。

ソースのファイル構造

GitHubプロジェクトには、distフォルダにコンパイルされるすべてのソースファイルが含まれています。LessソースはCSSファイルに、JavaScriptソースはバンドルされてECMAScript 5にトランスパイルされ、アイコンはアイコンライブラリにバンドルされます。

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

GitHubソースからのコンパイル

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

# Run once to install all dependencies
pnpm install

# Compile all source files
pnpm compile

# Watch files and compile automatically every time a file changes
pnpm watch

コンパイルされたdistフォルダには、デフォルトではチェックインされない追加ファイルが含まれるようになりました。カスタムUIkitテーマを追加した場合、ビルドタスクはさらに多くの追加ファイルを作成します。

/dist/css

    <!-- UIkit's CSS -->
    uikit.css
    uikit.min.css

    <!-- UIkit's core styles, without the default theme -->
    uikit-core.css
    uikit-core.min.css

    <!-- UIkit's CSS in a right-to-left version -->
    uikit.rtl.css
    uikit.rtl.min.css


/dist/js

    <!-- UIkit's JavaScript -->
    uikit.js
    uikit.min.js

    <!-- Stripped down JavaScript. Core functionality without additional components -->
    uikit-core.js
    uikit-core.min.js

    <!-- Icon Library -->
    uikit-icons.js
    uikit-icons.min.js

    <!-- Additional components (e.g. Lightbox), only needed when including uikit-core.js -->
    /components

UIkitのCSSとJavaScriptを使用するには、独自のHTMLにファイルをインクルードし、次にドキュメントに記載されているコンポーネントのマークアップを作成します。

LessまたはJavaScriptファイルを変更するたびにUIkitを自動的にコンパイルするには、付属のビルドスクリプトを使用できます。

pnpm watch