Skip to content

docs: update CSS structure documentation for c-content-main split #447

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
yusasa16 wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

docs: update CSS structure documentation for c-content-main split #447

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 32 additions & 2 deletions src/css/structure.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,19 @@
└── 📂 style/
├── 📂 base/
│ └── root.css
├── 📂 burger-editor/
│ ├── 📂 bge-container/
│ │ └── bge-container.css
│ ├── 📂 bge-item/
│ │ ├── bgi-base.css
│ │ ├── bgi-button.css
│ │ ︙
│ │ └── bgi-wysiwyg.css
│ └── index.css
├── 📂 c-content-main/
│ ├── cc-form.css
│ ├── element.css
│ └── index.css
└── 📂 general/
├── all.css
├── body.css
Expand Down Expand Up @@ -53,9 +66,10 @@ CSSレイヤーを利用してインポートするファイルを分類しま
@import '@/component/c-nav-breadcrumb.css' layer(components);
@import '@/component/c-title-page.css' layer(components);
@import '@/component/c-pagination.css' layer(components);
@import '@/component/c-content-main.css' layer(components);
@import '@/style/c-content-main/index.css' layer(main);
@import '@/style/burger-editor/index.css' layer(main);

@layer reset, base, general, components;
@layer reset, base, general, components, main;
```

## `__assets/_libs/style/base/root.css`
Expand Down Expand Up @@ -106,6 +120,22 @@ CSSレイヤーを利用してインポートするファイルを分類しま
- サイト全体で共通すると断定できる場合。 **ただし、ほとんどの場合、その判断は失敗に終わるので推奨しないでください。**
- CMSなどから入力された要素を、セレクターで判定できない場合（判定できない構造は、HTMLとCSSの設計を見直す方を優先します）

## `__assets/_libs/style/c-content-main/`

メインコンテンツ（`.c-content-main`）に関するスタイルを定義します。CMSなどで管理されるHTMLを扱うことが多いため、例外的に専用のディレクトリを設けています。

- `element.css`: `h2`, `p`, `ul` などの基本要素のスタイル
- `cc-form.css`: フォーム（`.cc-form-*`）に関するスタイル
- `index.css`: これらをとりまとめるインポート用ファイル

## `__assets/_libs/style/burger-editor/`

ブロックエディタ「Burger Editor」に関連するスタイルを定義します。コンテナ、フレーム、アイテムといったエディタの構成要素に基づいた設計となっています。（👉 [Burger Editor の仕様](https://github.com/d-zero-dev/BurgerEditor/blob/dev/packages/%40burger-editor/core/README.md)）

- `bge-container/bge-container.css`: コンテナおよびコンテナフレームのスタイル。コンテナクエリを用いたグリッドレイアウトやインラインレイアウトの制御を定義します。
- `bge-item/`: 各アイテムごとのスタイル。ボタン、テーブル、WYSIWYGなど、アイテムの種類に応じた定義を格納します。
- `index.css`: これらをとりまとめるインポート用ファイル。

## `__assets/_libs/style/component/`

要素はコンポーネント単位に分割して管理します。（👉[HTMLガイドライン > コンポーネント](../html/components.md)）
Expand Down