Custom Block Patterns by Vektor
npm run sass
| テーブルクラス | |
|---|---|
| vk-table--mobile-block | モバイル時縦積み |
| vk-table--th--width25 | 左セル幅25% |
| vk-table--th--width30 | 左セル幅30% |
| vk-table--th--width35 | 左セル幅35% |
| vk-table--th--width40 | 左セル幅40% |
| vk-table--th--bg-bright | 左セル背景色 |
| カラムクラス | |
|---|---|
| vk-cols--reverse | カラムreverse |
基本形式
vk-[ 識別名 ]--[ 属性値 ]
他のリポジトリでは属性名を含んでいるが、パターンにおいては識別名が属性名のようなものなので パターンでは属性名は省略して属性値だけとしている
Lightning G3 : [ コンポーネント名 ]--[ 属性名 ]--[ 属性値 ] VK Blocks : [ prefix ]_[ ブロック名 ]-[ 属性名 ]-[ 属性値 ]
例) vk-cols--fit vk-cols--hasbtn vk-aligncenter--mobile
- キャメルケース・アンダーバーは使用しない（ExUnitなど他のDOM要素の上書きは仕方ない）
- 英単語の連結及びコンポーネント名と要素名の連結はハイフン（-）
- FLOCSSのように要素の前に l- p- c- をつけるのは開発者にある程度のノウハウが必要とされるので不採用とした
- ハイフンだけでは 単語の区切りか DOM の階層かわからんやんけ！と思われるかもしれないが、実際問題階層は省略できる部分は省略した方がCSSが短くできる＆必要なのは概ねコンポーネント名と要素名だけなので問題にならない。