View Code →

Changelog (v3.0.1)

Navigation

ネーミング規約

モジュール

注意：あなたのモジュールの名前は複数形でない限り、モジュールファイルは、単数形で名前を付ける必要があります。たとえば、次のように：

モジュールは、ベースモジュール、サブモジュール、修飾子、および状態に分解される。あなたのモジュールまたはサブモジュールの名前が二つの単語の場合は、キャメルケースを使用してください。例：.moduleName

サブモジュール

サブモジュールは別のモジュールにサブモジュールであることを示すためにハイフン-区切り文字を使います。例：module-submodule

注意: 複数形のモジュール (例： ‘.tabs’) がある場合、この規約の例外としてサブモジュールの名前を ‘.tab'とすることができます 。.tab は .tabs のサブモジュールのであると想定できます。

修飾子

モジュールまたはサブモジュールの修飾子には--を使ってください。例えば、次のように

注意：モジュールとサブモジュール修飾変数は同じ規則が含まれています。たとえば、次のように

    $module--modifier-background: #000

状態

状態を表すにはis-state, is-module-state, is-module-submodule-stateパターンを使用してください。例えば、次のように

コンテクスト

モジュールまたはサブモジュールで特定のスタイルを持つコンテキストを追加するためにhas-を使用してください。例えば、次のように：

    

      <!-- ... -->
    


1
2

.has-dropdown
  position: relative

注意：このアイデアはsuitcssから借用されています。

注意：これは、Modifierとは異なり、ベース·モジュールのカスタム、代替スタイルを設定します。

Sass変数

Core - Settingsに記載されているように、変数は、モジュールと同じ命名規則に従う必要があります。 ほとんどのグローバル変数(複数箇所、複数のコンテキストで使用される)は、$base-で始まります。いくつかの例を見てみましょう。

    $base-background: #eee
    $base-color: #444
    $base-borderRadius: 3px
    $base-fontSize: 16px
    $base-lineHeight: 1.6
    $base-whitespace: 20px

コンテンツとレイアウトの変数は、それぞれ、$c-と $l-で始まります。

    $c-header-color: #999
    $c-header-fontFamily: sans-serif
    $l-maxWidth: 960px
    $l-sidebar-width: 200px

モジュール固有の変数を作成したい場合は：

    $grid-breakpoint-lap: 480px
    $grid-breakpoint-desk: 800px
    $grid-gutter: 20px
    $form-fontSize: 12px
    $form-input-background: #ddd

階層構造

画像

画像に名前を付けるセクションがありますか？ わかりました。目を通してみましょう。