1ページあたり1つの小さな広告しか表示しないことを約束します。ご心配なく、このメッセージを非表示にすれば、二度と邪魔されることはありません。
序文
漸進的な真実性
[漸進的な真実性]は、おそらく物理オブジェクトのモデルを構築するより良い方法です...まず、完全に詳細だが、望ましいものに似ているだけのモデルから始めます。次に、1つずつ属性を調整し、新しい創造物の心のビジョン、または現実世界のオブジェクトの実際の特性に結果を近づけていきます。
...スタイルの一貫性を持つ例から始めることで、その一貫性がデザイナーの失うものであることが保証されます。
Semantic UIのコンポーネントは、開発者が開発において漸進的な真実性を遵守できるように設計されています。
Semantic UIを使用する開発者は、白紙の状態からコンポーネントを作成する代わりに、CSS変数を使用して、コンポーネントがデフォルトのテーマとどのように異なるかを指定するだけで済みます。
特定のルックアンドフィールを磨く時間がない開発者にとって、デフォルトのテーマは、読みやすいオープンソースのサンセリフフォントLatoを使用した、エレガントでニュートラルなものです。
例を挙げて説明する
GitHubの再作成
Semantic UIには、テーマ設定を紹介するために設計されたサンプルプロジェクトが含まれています。このプロジェクトには、パッケージ化されたテーマの作成、コンポーネントのCSSオーバーライドの使用、およびtheme.configを使用したテーマの管理の例が含まれています。
開始するには、右上の通知ボタンの横にある絵筆のアイコンをクリックしてください
サンプルプロジェクトには、2つのHTMLファイルが含まれています。index.htmlは、サイドバーを使用してテーマを切り替えるように設計されており、プリコンパイル済みのCSSを使用しています。static.htmlは、Semantic UIによって出力されたファイルを使用しており、gulpパイプラインと一緒に使用して、テーマを実際に変更できます。
注意すべき特別な事項
site.variablesの使用して、ページコンテナのサイズ、デフォルトフォント、色を変更する
オーバーライドの使用と変数を使用して、GitHubの特別にフォーマットされたタブスタイルを追加する
1つのtheme.configで複数の個々のコンポーネントテーマを組み合わせる
カスタムアイコンフォントを使用し、アセットへのパスを変更する。
テーマの使用
サイト全体のデフォルト
Semantic UIには、12色の名前付きカラーが含まれています。カラーバリエーションを持つコンポーネントは、色がどのように表示されるかを定義するときに、これらのグローバル変数を継承します。
継承レベルごとに、各コンポーネントが拡張できるテーマ全体のデフォルトを定義する特別なファイルsite.variablesが含まれています。
グローバル変数は、要素の外観を変更するために複数のプロパティを変更する必要があるという退屈さを回避するために、より高いレベルの抽象化を使用します。
hover、active、focus状態で使用されるような他のボタンシェードは、カラー変数の彩度と明度を変更することによって作成されます。これらの派生変数は、新しいカラーパレットに合わせて自動的に調整されます。
@primaryColor : @pink; @secondaryColor : @grey; @red : #B03060; @orange : #FE9A76; @yellow : #FFD700; @olive : #32CD32; @green : #016936; @teal : #008080; @blue : #0E6EB8; @violet : #EE82EE; @purple : #B413EC; @pink : #FF1493; @brown : #A52A2A; @grey : #A0A0A0; @black : #000000;
すべての色
コンポーネントのデフォルト
コンポーネントは、site.variablesからデフォルト値を継承します。これは、コンポーネント用に具体的に再定義できます
たとえば、退屈なデフォルトの灰色のチェックボックスの代わりに、サイトのブランドカラーを含めることを決定できます。これは、いくつかの変数だけで実現できます。
/* チェックボックス */ @checkboxActiveBackground: @primaryColor; @checkboxActiveBorderColor: @primaryColor; @checkboxActiveCheckColor: @white; /* フォーカスされたチェックボックス */ @checkboxActiveFocusBackground: @primaryColorFocus; @checkboxActiveFocusBorderColor: @primaryColorFocus; @checkboxActiveFocusCheckColor: @white; @checkboxTransition: none; /* ラジオ */ @radioActiveBackground: @white; @radioActiveBorderColor: @primaryColor; @radioActiveBulletColor: @primaryColor; /* フォーカスされたラジオ */ @radioActiveFocusBackground: @white; @radioActiveFocusBorderColor: @primaryColorFocus; @radioActiveFocusBulletColor: @primaryColorFocus; /* スライダー */ @sliderOnLineColor: @primaryColor; /* フォーカスされたスライダー */ @sliderOnFocusLineColor: @primaryColorFocus;
パッケージ化されたテーマの使用
Semantic UIをダウンロードすると、すべてのコンポーネントがデフォルトのテーマを使用するように設定されます。Semanticは、プロジェクトのパッケージ化されたテーマ設定構成を制御するための特別なファイルtheme.configを使用します。
パッケージ化されたテーマは、グローバルではなくコンポーネントごとに適用されます。つまり、各コンポーネントに個別のテーマを指定して、利用可能なテーマからミックスアンドマッチできます。
デフォルトのtheme.configでは、すべてのコンポーネントの値がdefaultに設定されます。テーマを選択するには、コンポーネントをテーマ名と一致するように変更するだけです。
例えば
/******************************* テーマ選択 *******************************/ /* グローバル */ @site : 'material'; /* マテリアルサイトのデフォルトを読み込みます */ @reset : 'default'; /* エレメント */ @button : 'github'; /* GitHubボタンで使います */ @container : 'default'; @divider : 'default'; @flag : 'default'; @header : 'default'; @icon : 'default'; @image : 'default'; @input : 'default'; @label : 'default'; @list : 'default'; @loader : 'default'; @rail : 'default'; @reveal : 'default'; @segment : 'default'; @step : 'default'; /* コレクション */ @breadcrumb : 'default'; @form : 'default'; @grid : 'default'; @menu : 'chubby'; /* 他のUIも異なるテーマを使用できます */ @message : 'default'; @table : 'default'; /* モジュール */ @accordion : 'default'; @checkbox : 'default'; @dimmer : 'default'; @dropdown : 'default'; @embed : 'default'; @modal : 'default'; @nag : 'default'; @popup : 'default'; @progress : 'default'; @rating : 'default'; @search : 'default'; @shape : 'default'; @sidebar : 'default'; @sticky : 'default'; @tab : 'default'; @transition : 'default'; /* ビュー */ @ad : 'default'; @card : 'default'; @comment : 'default'; @feed : 'default'; @item : 'default'; @statistic : 'default';
テーマの閲覧
各UI定義には、プロジェクトに含まれるテーマをプレビューするためのドロップダウンがページ上部にあります。
テーマはコンポーネントごとに設定されるため、たとえば、マテリアルテーマがメニュー、ボタン、サイトで利用可能であっても、すべての値を「material」に変更すると、そのテーマに含まれていないコンポーネントでエラーが発生します。
コンポーネントの構成
定義ファイル
各コンポーネントには、コンポーネントの変数が画面表示にどのように影響するかを宣言するソースCSSおよびJavaScriptファイルが含まれています。定義ファイルはSemantic UIの新しいリリースごとに更新され、新しい変数も含まれる場合があります。
定義ファイルをナビゲートすることは、CSSに慣れている開発者がテーマがコンポーネントの表示にどのように影響するかを理解するのに最適な方法です。
以下は、ファイルの各セクションの説明を含む、ボタンの省略版です。
/******************************* テーマ *******************************/ /* テーマファイルを見つけるのに役立つタイプと要素を定義します */ @type : 'element'; @element : 'button'; /* 変数の継承を処理します */ @import (multiple) '../../theme.config'; /* スコープを作成します */ & { /******************************* ボタン *******************************/ /* コンポーネントを定義します */ .ui.button { cursor: pointer; display: inline-block; min-height: 1em; outline: none; border: none; vertical-align: @verticalAlign; background: @background; color: @textColor; font-family: @fontFamily; margin: 0em @horizontalMargin @verticalMargin 0em; padding: @verticalPadding @horizontalPadding (@verticalPadding + @shadowOffset); text-transform: @textTransform; text-shadow: @textShadow; font-weight: @fontWeight; line-height: @lineHeight; font-style: normal; text-align: center; text-decoration: none; border-radius: @borderRadius; box-shadow: @boxShadow; user-select: none; transition: @transition; will-change: @willChange; -webkit-tap-highlight-color: @tapColor; } /* 説明を簡単にするため、追加のCSSを削除しました */ /* CSSオーバーライドとインラインをロードします */ .loadUIOverrides(); }
テーマファイル
テーマは、.variablesファイルと.overridesファイルの2つのファイルで構成されています。テーマには、変数とオーバーライドの両方を含めることも、どちらか一方だけを含めることもできます。
変数ファイル
.variablesファイルは、テーマに合わせて調整する必要のある変数を指定します。
テーマの変数ファイルには、テーマによって異なる変数のみを含める必要があります。
オーバーライドファイル
.overridesファイルは、テーマの定義に追加する追加のCSSルールを指定します。このファイルは、コンポーネントの継承されたすべての変数にもアクセスできます。
カスケード継承
テーマの継承
テーマには、変数の継承に3つの異なるレベルがあります。
継承の各レベルは、変数の永続性の異なるレベルに対応します。
デフォルト
UIのデフォルト
パッケージ化されたテーマ
配布可能なパッケージ
サイトテーマ
サイト固有の変更
デフォルトテーマ
デフォルトテーマは、コンポーネントのベースライン変数を提供します。
テーマに含めることができる変数を理解する最良の方法は、コンポーネントのデフォルトの.variablesファイルを確認することです。
パッケージ化されたテーマ
パッケージ化されたテーマは、配布用にフォルダーにまとめられたテーマです。これらはインターネットからダウンロードしたり、プロジェクト間でやり取りしたりできます。
パッケージ化されたテーマは、theme.configファイルの値を変更することで使用できます。
サイトテーマ
サイトテーマは、すべてのテーマにあるsite.variablesファイルと混同しないでください。すべての他のテーマの上にロードできる特別なユーザーテーマです。
これは、単一のサイトで使用される変更を保存するのに最適な場所です。サイトテーマは、WordPressの子テーマに似ていると考えることができます。
サイトテーマファイルはオプションのインクルードであり、プロジェクトでコンポーネントに追加の変更を加える必要がない場合は、安全に削除できます。