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