|
16 | 16 | └── 📂 style/ |
17 | 17 | ├── 📂 base/ |
18 | 18 | │ └── root.css |
| 19 | + ├── 📂 burger-editor/ |
| 20 | + │ ├── 📂 bge-container/ |
| 21 | + │ │ └── bge-container.css |
| 22 | + │ ├── 📂 bge-item/ |
| 23 | + │ │ ├── bgi-base.css |
| 24 | + │ │ ├── bgi-button.css |
| 25 | + │ │ ︙ |
| 26 | + │ │ └── bgi-wysiwyg.css |
| 27 | + │ └── index.css |
| 28 | + ├── 📂 c-content-main/ |
| 29 | + │ ├── cc-form.css |
| 30 | + │ ├── element.css |
| 31 | + │ └── index.css |
19 | 32 | └── 📂 general/ |
20 | 33 | ├── all.css |
21 | 34 | ├── body.css |
@@ -53,9 +66,10 @@ CSSレイヤーを利用してインポートするファイルを分類しま |
53 | 66 | @import '@/component/c-nav-breadcrumb.css' layer(components); |
54 | 67 | @import '@/component/c-title-page.css' layer(components); |
55 | 68 | @import '@/component/c-pagination.css' layer(components); |
56 | | -@import '@/component/c-content-main.css' layer(components); |
| 69 | +@import '@/style/c-content-main/index.css' layer(main); |
| 70 | +@import '@/style/burger-editor/index.css' layer(main); |
57 | 71 |
|
58 | | -@layer reset, base, general, components; |
| 72 | +@layer reset, base, general, components, main; |
59 | 73 | ``` |
60 | 74 |
|
61 | 75 | ## `__assets/_libs/style/base/root.css` |
@@ -106,6 +120,22 @@ CSSレイヤーを利用してインポートするファイルを分類しま |
106 | 120 | - サイト全体で共通すると断定できる場合。 **ただし、ほとんどの場合、その判断は失敗に終わるので推奨しないでください。** |
107 | 121 | - CMSなどから入力された要素を、セレクターで判定できない場合(判定できない構造は、HTMLとCSSの設計を見直す方を優先します) |
108 | 122 |
|
| 123 | +## `__assets/_libs/style/c-content-main/` |
| 124 | + |
| 125 | +メインコンテンツ(`.c-content-main`)に関するスタイルを定義します。CMSなどで管理されるHTMLを扱うことが多いため、例外的に専用のディレクトリを設けています。 |
| 126 | + |
| 127 | +- `element.css`: `h2`, `p`, `ul` などの基本要素のスタイル |
| 128 | +- `cc-form.css`: フォーム(`.cc-form-*`)に関するスタイル |
| 129 | +- `index.css`: これらをとりまとめるインポート用ファイル |
| 130 | + |
| 131 | +## `__assets/_libs/style/burger-editor/` |
| 132 | + |
| 133 | +ブロックエディタ「Burger Editor」に関連するスタイルを定義します。コンテナ、フレーム、アイテムといったエディタの構成要素に基づいた設計となっています。(👉 [Burger Editor の仕様](https://github.com/d-zero-dev/BurgerEditor/blob/dev/packages/%40burger-editor/core/README.md)) |
| 134 | + |
| 135 | +- `bge-container/bge-container.css`: コンテナおよびコンテナフレームのスタイル。コンテナクエリを用いたグリッドレイアウトやインラインレイアウトの制御を定義します。 |
| 136 | +- `bge-item/`: 各アイテムごとのスタイル。ボタン、テーブル、WYSIWYGなど、アイテムの種類に応じた定義を格納します。 |
| 137 | +- `index.css`: これらをとりまとめるインポート用ファイル。 |
| 138 | + |
109 | 139 | ## `__assets/_libs/style/component/` |
110 | 140 |
|
111 | 141 | 要素はコンポーネント単位に分割して管理します。(👉[HTMLガイドライン > コンポーネント](../html/components.md)) |
|
0 commit comments