View Code →

Changelog (v3.0.1)

Navigation

Content

Core - ContentCore - Layoutは基本レベルのタグとモジュール間のブリ​​ッジとなります。それらのおかげで、抽象化層を設けることができ、コンテキストの微調整を容易にすることができます。

Core - ContentCore - Layoutの違いは、Core - Contentは主にタイポグラフィー(フォント、色)に適用されるが、Core - Layoutは(margin、padding、size、positioning)にのみ適用されます。

注意: 接頭辞c-は暗黙のモジュールです。cベースのモジュールはありません。唯一のコンテンツモジュールの接頭辞として使われています。

Headings

私たちは見出しのスタイルを共有する機能が欲しいので、 Core - BaseではなくCore - Contentに見出しを設定します。

    h1, .c-h1, %c-h1
      font-size: 40px
      margin-bottom: 20px

OOCSSから拝借したアイデアですが、時にはページ上にh3のように見えるh2が欲しくなります。次のように設定することで実現できます。

    %h2.c-h3 Heading

または、プレースホルダセレクタを使用して:

    .tagline
      @extend %c-h3

    %h2.tagline This is a tagline for my site.

Utilities

デフォルトでCore - Content ユーティリティを設けています。これがどのように機能するかを示すために例を見てみましょう。利用できるデフォルトのユーティリティがいくつか示します。

    %c-center, .c-center
      text-align: center

    %c-condense, .c-condense
      font-size: 85%

そして、あなたのマークアップ内で:

    %form.form-field
      %input(type="text")
      %p.c-condense This is a note.

または、サイレントクラスとしてSass placeholder selectorsを使用する場合:

    %form.form-field
      %input(type="text")
      %p.form-field-desc This is a note.

    .form-field-desc
      @extend %c-condense

注意:あなたのプロジェクトのために独自のカスタム·コンテンツ·ユーティリティ·モジュールを設定することができます。

Custom Submodules

あなたは、複数のコンテンツ・ユーティリティを拡張したり、別のコンテンツ・サブモジュールを形成することができます。

    .c-tagline
      @extend %c-center
      @extend %c-condense

Next →