KARTE Template Guidelines

CSS

アクション実装における、CSS タブの挙動や注意点を列挙します。

リセット

アクションには先ず リセット CSS が適用されます。
サイトには影響が出ないよう、配信時は .karte-r で囲われます。

リセットに不足がある場合はサイトに合わせて CSS を追加してください。
追加の際は共用しやすいよう、CSS の最上部に入力する事をお勧めします。

※埋め込みタイプの接客はリセット CSS が適用されないためご注意ください。

Simple CSS Modules

セレクタに ID やクラスを指定すると、サイトに影響しないよう変換が行われます。
また、配信時はアクション同士が影響しないよう .karge-g が変換された物で囲われます。

e.g.
変換前
  1. a { ... }
  2. .class-name { ... }
変換後
  1. a { ... }
  2. ._class-name__[shortenId]_ { ... }
配信時
  1. ._karte-g__[shortenId]_ a { ... }
  2. ._karte-g__[shortenId]_ ._class-name__[shortenId]_ { ... }

※[shortenId] には各アクションの ID が入ります。

変換しない場合（非推奨）

グローバルスコープ :global() を利用します。

e.g.
変換前 :global(.class-name) { ... }
変換後 .class-name { ... }
配信時 ._karte-g__[shortenId]_ .class-name { ... }

※[shortenId] には各アクションの ID が入ります。
※グローバルスコープを利用した場合も .karge-g が変換された物で囲われます。

LESS

裏側で LESS のコンパイルが走るため、変数や LESS の機能を一部利用できます。
e.g. darken(#fff, 20%)

calc を利用する場合は ~'' でエスケープする必要があります。
e.g. .class-name { width: calc(~'100% - 15px') }