Gulp以上でカスタムUIKITテーマを作成します-CSSチュートリアル-php.cn

Gulp以上でカスタムUIKITテーマを作成します

キーテイクアウト

Uikitのカスタマイザーを使用して、Webサイトのユニークなテーマとテーマのバリエーション（スタイル）を作成し、群衆から目立つことができます。このプロセスは簡単ですが、合併症を最小限に抑えるために適切なワークフローが必要です。
uikitは、より複雑なカスタマイズのためのフックを提供し、開発者はコアを壊すことなく新しいルールを追加したり、既存のルールを変更したりできます。各コンポーネントにはフックがあり、新しいコンポーネントは新しいセレクターを作成したり、既存のセレクターを変更したりするために使用できます。
最近では、フロントエンドフレームワークを備えたWebサイトを構築することが一般的です。問題は、多くの人がすべてのWebサイトを「同じように見える」ようにするためにそのようなフレームワークを責めることです。しかし、このツールは、開発者が必要なカスタマイズを意思がない場合、責任を負うことではありません。

オレンジ色の色としてオレンジ色のウェブサイトの暗いテーマを作成したいとしましょう。また、青と緑のアクセントの色で、そのテーマのさらに2つのバリエーションが必要です。私たちがそれができる方法を見てみましょう。（注：簡潔にするために、ボタンのみを使用してプロセスを実証します）。

次の手順が完了することを確認する必要があります。

uikitリポジトリをダウンロードまたはクローンします。

ノードとgulpをインストールしてください。まだ持っていない場合は

UIKITの開発依存関係をインストールします。これを行うには、uikitルートディレクトリに移動し、端末からnpmインストールを実行することで行うことができます。

これらすべてが正しくセットアップされると、テーマの作成を開始できます。

テーマの作成

まだルートディレクトリに、「custom」というフォルダーを作成します。そのフォルダーで、「dark」と呼ばれる別のものを作成し、内部でuikit.lessというファイルを作成します。ファイルを開き、次を追加します

最初の行は、コアフレームワークからすべてのファイルをすべて取得し、2行目はデフォルトのUIKITボタンを変更するために使用するファイルをインポートします。ファイルを保存して閉じて、前述のボタンを作成します。同じディレクトリにいないファイル。

<span><span>@import "../../src/less/uikit.less";</span>
</span><span><span>@import "button.less";</span></span>

ログイン後にコピー

さらにカスタマイズする前に、カスタマイザーでテーマをローカルに利用できるようにする必要があります。そうするために、uikitルートディレクトリで、端末で以下を実行します。

Uikit Webサイト（インストールしたウェブサイト）のローカルコピーを起動し、ナビゲーションバーの「カスタマイザー」をクリックします。「テーマを選択する」ドロップダウンリストを開くと、最後に「暗い」が表示されるはずです。この時点で、選択すると、スタイリングがないことがわかります。なぜだめですか？見てみましょう。

UIKITのドキュメントで言及されておらず、頭痛が大幅にかかる可能性があることの1つは、テーマにuikit-customizer.lessというファイルが必要であることです。ファイルを作成して、次の行を追加します：

gulp indexthemes

ログイン後にコピー

上記の行をテーマのルートディレクトリ（「暗い」フォルダー内の場合は、この場合）にそのファイルを配置する必要があります。このファイルが存在しない場合、カスタマイザーを適切に使用することはできません。テーマの名前がリストに表示されますが、スタイルが欠落しています。

注：経験則として、Uikit-Customizer.lessファイルは、テーマが使用するすべてのファイルをインポートする必要があります。この例では、Uikit.lessをインポートすることは、デフォルトのUIKITスタイルとカスタムボタンスタイルの両方が含まれるため、この要件を満たしています。

uikit-customizer.lessファイルを追加した後、今回はすべてのコンポーネントが適切にスタイルが整っていることがわかります。それで、私たちは先に進む準備ができています。

<span><span>@import "uikit.less"</span></span>

ログイン後にコピー

コンポーネントのドロップダウンリストに、カスタマイザーの右側にあるパネルの左上隅に配置され、「ボタン」に切り替えます。このようにして、利用可能なすべてのボタンスタイルを見ることができます。これで、ボタンを開くことができます。レスファイルと変更の追加を開始します。

上記のコードでは、通常、ホバリング、アクティブ状態のデフォルトボタンのテキストと背景色の変数を変更しました。他の特定のボタンについては、これらの変数も変更する必要があります：

uikit

でフックを使用しています

UIKITの変数を変更することは、簡単な変更に対処する際に、フレームワークのコンポーネントの外観を変更する最も簡単な方法です。しかし、新しいルールを追加したり、コアを破らずに既存のルールを変更したりするなど、より複雑なカスタマイズのために、UIKITは特別なメカニズムを提供します。

フックを使用して、変更を安全に追加します。これが動作しているのを見てみましょう。次のコードを変数の下に、ボタンの内側に置きます。

<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テーマを作成しますテーマのスタイルの作成

テーマのスタイルを作成する準備ができました。 Dark Themeのディレクトリでは、「Styles」という新しいフォルダーを作成し、内部で「Blue」と呼ばれる別のフォルダーを作成します。そのフォルダーで、空白のスタイルを作成します。ボタンから最初の3行のコードをコピーしてファイルを貼り付けてファイルに貼り付け、 @button-colorの値を＃09fに変更してファイルを保存します。ファイルの内容は次のようになります：

新しく作成されたスタイルを含めるために、端末でGulp IndexThemesを再度実行してから、カスタマイザーに戻ってページを更新します。テーマリストの最後に、「ダークブルー」オプションが表示されるはずです。それを選択すると、ボタンが素敵な青いアクセントで表示されるようになりました。緑のスタイルの場合は、同じ手順を繰り返しますが、代わりに＃9C0の色値を使用します。

<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>

ログイン後にコピー

テーマに満足している場合、このタスクを実行してビルドできます。

これにより、暗いテーマが構築され、UIKITルートディレクトリの「DIST」フォルダーに配置されます。次に、「CSS」フォルダーにuikit.dark.cssおよびuikit.dark.min.cssファイルがあります。残念ながら、これらのファイルにはメインテーマのスタイルのみが含まれています。青と緑のスタイルは含まれていません。ただし、GUIカスタマイザーを使用して、CSSファイルも取得できます。次に説明します。 GUIカスタマイザーを使用して

<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カスタマイザーを直接使用できます。必要な手順を調べてみましょう。

カスタマイザーに移動して、カスタマイズするテーマを選択します。
必要な変更を行い、「CSSを取得」ボタンを押します。これにより、テーマの最終的なCSSファイルが得られます。このボタンを使用して、青と緑のスタイル用のCSSファイルを取得できます。「ダークブルー」または「ダークグリーン」を選択して、ボタンをクリックします。
ミニフォームバージョンが必要な場合は、「CSSのマイニフィス」オプションを確認してください
- 左から右への言語を使用する場合は、「RTLモード」を確認すると、テーマ全体が自動的に変換されます。
注：IndexThemesタスクを実行すると、テーマに独自のcustomizer.jsonファイルがない場合（新しいテーマを作成するときはそうです）、uikitはデフォルトテーマ（/themes//themes/ default/customizer.json）。このファイルをカスタマイズする場合は、テーマのルートディレクトリにコピーして貼り付け、テーマを更新するためにもう一度Gulp IndexThemesを実行する必要があります。

特定のフロントエンドフレームワークをカスタマイズすることは、最初に思われるほど難しいことではないことがわかりました。 Gulpの知識といくつかの特別な努力により、あなたのウェブサイトを、特定のフレームワークで構築されたとラベル付けされることなく、群衆から目立つほどユニークにすることができます。

gulp＆lessのカスタムuikitテーマに関するよくある質問

gulp以下を使用してカスタムUikitテーマを作成するにはどうすればよいですか？

gulpを使用してカスタムUikitテーマを作成するには、いくつかのステップが必要です。まず、コンピューターにnode.jsとnpmをインストールする必要があります。次に、NPMを使用してGulpをインストールし、より少ないインストールする必要があります。その後、GitHubからUIKITリポジトリをクローンして依存関係をインストールできます。それを完了したら、テーマの変数を変更することにより、カスタムテーマの作成を開始できます。その後、Gulpを使用してテーマをコンパイルできます。これにより、プロジェクトに含めることができるCSSファイルが生成されます。

gulpを使用することの利点は何ですか？uikitテーマを作成するために少ないことは何ですか？

gulpと、uikitテーマを作成するためのいくつかの利点を提供するものが少なくなります。 Gulpは、マイニフィス、コンピレーション、ユニットテスト、糸くずなどの繰り返しタスクを自動化できるタスクランナーです。これにより、多くの時間と労力を節約できます。一方、LESSは、CSS PreProcessorです。これにより、CSSをよりメンテナブル、テーマ、拡張可能にする変数、ミキシン、関数、およびその他の機能を使用できます。 SASSやスタイラスなどのCSS PRECOSSORSはUIKITテーマを作成しますか？ UIKITテーマを作成します。ただし、uikitはより少ないもので構築されていることに留意する必要があるため、コードを少ないコードをSASSまたはスタイラスに変換するために追加の作業を行う必要がある場合があります。 UIKITテーマの他の要素？

テーマの低い変数を変更することにより、UIKITテーマの色、フォント、およびその他の要素をカスタマイズできます。たとえば、 @primary-color変数を変更して、プライマリカラーを変更できます。また、 @font-family-base変数を変更してフォントファミリを変更することもできます。それらのために新しい少ないファイルを作成し、それらをテーマにインポートすることによって。次に、UIKITミキシンと変数を使用してコンポーネントのスタイルを設定できます。

カスタムUIKITテーマをテストするにはどうすればよいですか？ HTMLファイルとWebブラウザで開く。その後、要素を検査して、予想どおりにスタイルに描かれているかどうかを確認できます。

カスタムUIKITテーマを生産用に最適化するにはどうすればよいですか？ CSSファイルをマイニーする。これにより、ファイルのサイズが縮小し、Webサイトの読み込み速度が向上します。

Themeforestのような市場でカスタムUIKITテーマを販売できますか？ Themeforestのように。ただし、テーマが市場の品質基準を満たし、それを販売するために必要な権利があることを確認する必要があります。？

新しいバージョンからの変更をテーマに統合することにより、UIKITの新しいバージョンがリリースされたときに、カスタムUIKITテーマを更新できます。その後、テーマをテストして、新しいバージョンで正しく動作することを確認できます。

WordPressテーマでカスタムUIKITテーマを使用できますか？ WordPressテーマのテーマ。 WordPressテーマに生成されたCSSファイルを含めるだけで、テンプレートでUIKITクラスを使用する必要があります。

以上がGulp以上でカスタムUIKITテーマを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。