@lism-css/mcp 0.15.0 → 0.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/data/docs-index.json +63 -36
- package/dist/data/guides/SKILL.md +136 -24
- package/dist/data/guides/antipatterns.md +318 -0
- package/dist/data/guides/base-styles.md +3 -5
- package/dist/data/guides/components-core.md +8 -10
- package/dist/data/guides/components-ui.md +12 -4
- package/dist/data/guides/css-rules.md +29 -29
- package/dist/data/guides/customize.md +80 -26
- package/dist/data/guides/naming.md +13 -8
- package/dist/data/guides/primitive-class.md +79 -4
- package/dist/data/guides/primitives/a--decorator.md +1 -1
- package/dist/data/guides/primitives/a--divider.md +1 -1
- package/dist/data/guides/primitives/a--icon.md +1 -1
- package/dist/data/guides/primitives/a--spacer.md +1 -1
- package/dist/data/guides/primitives/l--autoColumns.md +71 -0
- package/dist/data/guides/primitives/l--box.md +1 -1
- package/dist/data/guides/primitives/l--center.md +1 -1
- package/dist/data/guides/primitives/l--cluster.md +2 -2
- package/dist/data/guides/primitives/l--columns.md +3 -3
- package/dist/data/guides/primitives/l--flex.md +1 -1
- package/dist/data/guides/primitives/l--flow.md +4 -4
- package/dist/data/guides/primitives/l--frame.md +1 -1
- package/dist/data/guides/primitives/l--grid.md +2 -2
- package/dist/data/guides/primitives/l--stack.md +1 -1
- package/dist/data/guides/primitives/{l--switchCols.md → l--switchColumns.md} +18 -18
- package/dist/data/guides/primitives/l--tileGrid.md +2 -2
- package/dist/data/guides/primitives/{l--sideMain.md → l--withSide.md} +41 -19
- package/dist/data/guides/prop-responsive.md +1 -1
- package/dist/data/guides/property-class/bd.md +4 -4
- package/dist/data/guides/property-class/hov.md +18 -18
- package/dist/data/guides/property-class/max-sz.md +20 -16
- package/dist/data/guides/property-class.md +23 -12
- package/dist/data/guides/set-class.md +2 -2
- package/dist/data/guides/tokens.md +13 -9
- package/dist/data/guides/trait-class/has--gutter.md +2 -2
- package/dist/data/guides/trait-class/has--mask.md +2 -2
- package/dist/data/guides/trait-class/has--snap.md +2 -2
- package/dist/data/guides/trait-class/has--transition.md +2 -2
- package/dist/data/guides/trait-class/is--boxLink.md +2 -2
- package/dist/data/guides/trait-class/is--container.md +13 -5
- package/dist/data/guides/trait-class/is--layer.md +5 -5
- package/dist/data/guides/trait-class/is--wrapper.md +23 -8
- package/dist/data/guides/trait-class.md +2 -2
- package/dist/data/guides/utility-class.md +9 -8
- package/dist/data/meta.js +2 -2
- package/dist/tools/get-guide.js +8 -1
- package/package.json +1 -1
- package/dist/data/guides/primitives/l--fluidCols.md +0 -71
|
@@ -6,8 +6,8 @@
|
|
|
6
6
|
|
|
7
7
|
- クラス名: `has--mask`
|
|
8
8
|
- Lism props: `hasMask`(`<Lism hasMask>` 等)
|
|
9
|
-
- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/
|
|
10
|
-
-
|
|
9
|
+
- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/has/_mask.scss
|
|
10
|
+
- 公式ドキュメント: https://lism-css.com/docs/trait-class.md#has--mask
|
|
11
11
|
|
|
12
12
|
## SCSS 定義
|
|
13
13
|
|
|
@@ -6,8 +6,8 @@
|
|
|
6
6
|
|
|
7
7
|
- クラス名: `has--snap`
|
|
8
8
|
- Lism props: `hasSnap`(`<Lism hasSnap>` 等)
|
|
9
|
-
- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/
|
|
10
|
-
-
|
|
9
|
+
- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/has/_snap.scss
|
|
10
|
+
- 公式ドキュメント: https://lism-css.com/docs/trait-class.md#has--snap
|
|
11
11
|
|
|
12
12
|
## SCSS 定義
|
|
13
13
|
|
|
@@ -6,8 +6,8 @@
|
|
|
6
6
|
|
|
7
7
|
- クラス名: `has--transition`
|
|
8
8
|
- Lism props: `hasTransition`(`<Lism hasTransition>` / `<Box hasTransition>` 等)
|
|
9
|
-
- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/
|
|
10
|
-
-
|
|
9
|
+
- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/has/_transition.scss
|
|
10
|
+
- 公式ドキュメント: https://lism-css.com/docs/trait-class.md#has--transition
|
|
11
11
|
|
|
12
12
|
## SCSS 定義
|
|
13
13
|
|
|
@@ -6,8 +6,8 @@
|
|
|
6
6
|
|
|
7
7
|
- クラス名: `is--boxLink`
|
|
8
8
|
- コンポーネント: `<BoxLink>`
|
|
9
|
-
- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/_boxLink.scss
|
|
10
|
-
-
|
|
9
|
+
- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/is/_boxLink.scss
|
|
10
|
+
- 公式ドキュメント: https://lism-css.com/docs/trait-class/is--boxLink.md
|
|
11
11
|
|
|
12
12
|
## 専用Props
|
|
13
13
|
|
|
@@ -6,8 +6,8 @@
|
|
|
6
6
|
|
|
7
7
|
- クラス名: `is--container`
|
|
8
8
|
- コンポーネント: `<Container>`
|
|
9
|
-
- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/_container.scss
|
|
10
|
-
-
|
|
9
|
+
- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/is/_container.scss
|
|
10
|
+
- 公式ドキュメント: https://lism-css.com/docs/trait-class/is--container.md
|
|
11
11
|
|
|
12
12
|
## 使い方
|
|
13
13
|
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
|
|
16
16
|
| Prop | 出力 |
|
|
17
17
|
|------|------|
|
|
18
|
-
| `isContainer` |
|
|
18
|
+
| `isContainer` | `is--container` |
|
|
19
19
|
|
|
20
20
|
## Usage
|
|
21
21
|
|
|
@@ -39,8 +39,16 @@
|
|
|
39
39
|
|
|
40
40
|
子要素側は `p={['10', '30']}` のようなブレイクポイント配列指定にすることで、親の `is--container` を基準としたコンテナクエリで値が切り替わります。
|
|
41
41
|
|
|
42
|
+
## `--sz--bleed` の提供
|
|
43
|
+
|
|
44
|
+
最外側の `is--container` は直下の子要素に `--sz--bleed: 100cqi` をセットします。`-max-sz:bleed` はこの値を参照しており、最外側の `is--container` 基準の幅まで広がります(ネストされた `is--container` は `--sz--bleed` を再上書きしないため、内側の子要素は外側の値を inherit で参照します)。
|
|
45
|
+
|
|
46
|
+
`has--gutter` と併用した場合は `calc(100cqi + var(--gutter-size) * 2)` に自動調整され、gutter 分を含めた端〜端の幅になります。
|
|
47
|
+
|
|
48
|
+
`@property --sz--bleed` の `initial-value` は `100svi` のため、`is--container` が祖先に存在しない場合はビューポート幅まで広がる fallback として動作します。
|
|
49
|
+
|
|
42
50
|
## 関連プリミティブ
|
|
43
51
|
|
|
44
52
|
- [is--wrapper](./is--wrapper.md) — コンテンツ幅ラッパー(`isContainer` と併用可)
|
|
45
|
-
- [l--flow](
|
|
46
|
-
- [l--box](
|
|
53
|
+
- [l--flow](../primitives/l--flow.md) — 記事コンテンツ向けフローレイアウト
|
|
54
|
+
- [l--box](../primitives/l--box.md) — 汎用ボックス
|
|
@@ -6,8 +6,8 @@
|
|
|
6
6
|
|
|
7
7
|
- クラス名: `is--layer`
|
|
8
8
|
- コンポーネント: `<Layer>`
|
|
9
|
-
- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/_layer.scss
|
|
10
|
-
-
|
|
9
|
+
- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/is/_layer.scss
|
|
10
|
+
- 公式ドキュメント: https://lism-css.com/docs/trait-class/is--layer.md
|
|
11
11
|
|
|
12
12
|
## 使い方
|
|
13
13
|
|
|
@@ -66,6 +66,6 @@
|
|
|
66
66
|
|
|
67
67
|
## 関連プリミティブ
|
|
68
68
|
|
|
69
|
-
- [l--frame](
|
|
70
|
-
- [l--grid](
|
|
71
|
-
- [l--center](
|
|
69
|
+
- [l--frame](../primitives/l--frame.md) — `isLayer` 併用でメディア背景のレイヤー化
|
|
70
|
+
- [l--grid](../primitives/l--grid.md) — `ga="1/1"` で position を使わずに重ね配置する代替パターン
|
|
71
|
+
- [l--center](../primitives/l--center.md) — レイヤー内のコンテンツ中央寄せ
|
|
@@ -6,8 +6,8 @@
|
|
|
6
6
|
|
|
7
7
|
- クラス名: `is--wrapper`
|
|
8
8
|
- コンポーネント: `<Wrapper>`
|
|
9
|
-
- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/_wrapper.scss
|
|
10
|
-
-
|
|
9
|
+
- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/is/_wrapper.scss
|
|
10
|
+
- 公式ドキュメント: https://lism-css.com/docs/trait-class/is--wrapper.md
|
|
11
11
|
|
|
12
12
|
## 使い方
|
|
13
13
|
|
|
@@ -15,10 +15,10 @@
|
|
|
15
15
|
|
|
16
16
|
| 指定 | 出力 |
|
|
17
17
|
|------|------|
|
|
18
|
-
| `isWrapper` |
|
|
19
|
-
| `isWrapper="s"` |
|
|
20
|
-
| `isWrapper="l"` |
|
|
21
|
-
| `isWrapper="20rem"`(任意値) |
|
|
18
|
+
| `isWrapper` | `is--wrapper` |
|
|
19
|
+
| `isWrapper="s"` | `is--wrapper -contentSize:s` |
|
|
20
|
+
| `isWrapper="l"` | `is--wrapper -contentSize:l` |
|
|
21
|
+
| `isWrapper="20rem"`(任意値) | `is--wrapper` + `style="--contentSize: 20rem"` |
|
|
22
22
|
|
|
23
23
|
## 専用Props
|
|
24
24
|
|
|
@@ -80,8 +80,23 @@
|
|
|
80
80
|
</div>
|
|
81
81
|
```
|
|
82
82
|
|
|
83
|
+
## 直下の子要素の挙動
|
|
84
|
+
|
|
85
|
+
`is--wrapper` 直下の子要素には次のスタイルが当たる:
|
|
86
|
+
|
|
87
|
+
```scss
|
|
88
|
+
.is--wrapper > * {
|
|
89
|
+
inline-size: 100%;
|
|
90
|
+
max-inline-size: min(100%, var(--contentSize));
|
|
91
|
+
margin-inline: auto;
|
|
92
|
+
}
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
- `inline-size: 100%` により、自然幅が `--contentSize` 未満の要素(短い段落、`<table>` など)も常に親幅まで広げてから `max-inline-size` で制限される。これにより `l--stack` などの flex 縦並び配下でも横幅が揃い、ガタつきが起きない
|
|
96
|
+
- `<table>` を直下に置くと内容依存の自然幅にはならず、常に wrapper 幅まで広がる。テーブルの自然幅を保ちたい場合は `is--wrapper` を直接の親にしないように、間に別の要素を挟む
|
|
97
|
+
|
|
83
98
|
## 関連プリミティブ
|
|
84
99
|
|
|
85
100
|
- [is--container](./is--container.md) — コンテナクエリ基準(`isContainer` と併用可)
|
|
86
|
-
- [l--flow](
|
|
87
|
-
- [l--box](
|
|
101
|
+
- [l--flow](../primitives/l--flow.md) — 記事フローレイアウト(`layout="flow"` で結合)
|
|
102
|
+
- [l--box](../primitives/l--box.md) — 汎用ボックス
|
|
@@ -9,7 +9,7 @@ Lism CSS では、要素に対して宣言的に「役割」や「機能」を
|
|
|
9
9
|
- [`is--` Trait(役割宣言)](#is-- trait役割宣言)
|
|
10
10
|
- [`has--` Trait(機能付与)](#has-- trait機能付与)
|
|
11
11
|
|
|
12
|
-
[詳細](https://lism-css.com/docs/trait-class
|
|
12
|
+
[詳細](https://lism-css.com/docs/trait-class.md)
|
|
13
13
|
|
|
14
14
|
---
|
|
15
15
|
|
|
@@ -35,7 +35,7 @@ Lism CSS では、要素に対して宣言的に「役割」や「機能」を
|
|
|
35
35
|
| `is--boxLink` | ボックス全体をクリッカブルなリンク領域にする。自身を`a`タグにして利用するか、もしくは自身を`div`にして内部の`a`タグに`is--coverLink`を付与して使う |
|
|
36
36
|
| `is--coverLink` | 親要素全体に被さるクリック領域を持つリンク(`::before` を `inset: 0` で広げる)。`is--boxLink` と併用する |
|
|
37
37
|
| `is--skipFlow` | `l--flow` 直下で使用し、次の兄弟要素のフロー余白をゼロにする。`l--flow`の中にあるが`position:absolute`にしたい要素などに使用する |
|
|
38
|
-
| `is--side` | `l--
|
|
38
|
+
| `is--side` | `l--withSide` 直下で使用し、サイド側の要素であることを示す |
|
|
39
39
|
|
|
40
40
|
Lism コンポーネントでは `isContainer`, `isLayer` 等の Props として利用できます(例: `<Lism isContainer>`)。
|
|
41
41
|
|
|
@@ -16,7 +16,7 @@ Lism コンポーネントでの `util` prop による指定方法は [component
|
|
|
16
16
|
- [Opt-in ユーティリティ](#opt-in-ユーティリティ)
|
|
17
17
|
- [ユーザー定義のユーティリティクラス](#ユーザー定義のユーティリティクラス)
|
|
18
18
|
|
|
19
|
-
[詳細](https://lism-css.com/docs/utility-class
|
|
19
|
+
[詳細](https://lism-css.com/docs/utility-class.md)
|
|
20
20
|
|
|
21
21
|
---
|
|
22
22
|
|
|
@@ -26,11 +26,12 @@ Lism コンポーネントでの `util` prop による指定方法は [component
|
|
|
26
26
|
|
|
27
27
|
| クラス | 用途 | ソースファイル |
|
|
28
28
|
|--------|------|---------------|
|
|
29
|
-
| `u--trim` | ハーフレディングのネガティブマージンでテキスト上下の余白を詰める | [`
|
|
30
|
-
| `u--
|
|
29
|
+
| `u--trim` | ハーフレディングのネガティブマージンでテキスト上下の余白を詰める | [`_trim.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_trim.scss) |
|
|
30
|
+
| `u--trimAll` | 直下の子要素(`:empty`, `figure`, `picture`, `video`, `button`, `textarea`, `table` を除く)にハーフレディングトリムを一括適用する除外方式のクラス | [`_trim.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_trim.scss) |
|
|
31
31
|
| `u--cbox` | `--keycolor` を使い `color-mix()` で `--c` / `--bgc` / `--bdc` を自動生成する色付きボックス | [`_cbox.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_cbox.scss) |
|
|
32
|
-
| `u--
|
|
33
|
-
| `u--
|
|
32
|
+
| `u--divide` | Grid / Flex の子要素**間**にのみ `box-shadow` で区切り線を表示する | [`_divide.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_divide.scss) |
|
|
33
|
+
| `u--cells` | Grid / Flex の各子要素を `box-shadow` で枠囲みし、table セル風に表示する | [`_divide.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_divide.scss) |
|
|
34
|
+
| `u--srOnly` | スクリーンリーダー専用(視覚的に非表示)。`clip-path: inset(50%)` で実装 | [`_srOnly.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_srOnly.scss) |
|
|
34
35
|
| `u--clipText` | テキストで背景をクリッピング(`background-clip: text`) | [`_clipText.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_clipText.scss) |
|
|
35
36
|
|
|
36
37
|
|
|
@@ -43,8 +44,8 @@ Lism コンポーネントでの `util` prop による指定方法は [component
|
|
|
43
44
|
<!-- u--trim: テキスト余白の詰め -->
|
|
44
45
|
<p class="u--trim">テキスト...</p>
|
|
45
46
|
|
|
46
|
-
<!-- u--
|
|
47
|
-
<div class="l--grid u--
|
|
47
|
+
<!-- u--divide: グリッド子要素間の区切り線 -->
|
|
48
|
+
<div class="l--grid u--divide" style="--gtc: 1fr 1fr">
|
|
48
49
|
<div>A</div>
|
|
49
50
|
<div>B</div>
|
|
50
51
|
</div>
|
|
@@ -54,7 +55,7 @@ Lism コンポーネントでの `util` prop による指定方法は [component
|
|
|
54
55
|
// JSX での使用(className で指定)
|
|
55
56
|
<Lism className="u--cbox" keycolor="red" bd p="20">...</Lism>
|
|
56
57
|
<Text className="u--trim">テキスト...</Text>
|
|
57
|
-
<Grid className="u--
|
|
58
|
+
<Grid className="u--divide" gtc="1fr 1fr">...</Grid>
|
|
58
59
|
```
|
|
59
60
|
|
|
60
61
|
|
package/dist/data/meta.js
CHANGED
package/dist/tools/get-guide.js
CHANGED
|
@@ -15,10 +15,17 @@ const GUIDE_TOPICS = {
|
|
|
15
15
|
},
|
|
16
16
|
'base-styles': { file: 'base-styles.md', label: 'Base styling, reset CSS, HTML element styles' },
|
|
17
17
|
'set-class': { file: 'set-class.md', label: 'Set classes (set--plain, set--var:bxsh, set--var:hov, etc.)' },
|
|
18
|
-
'primitive-class': {
|
|
18
|
+
'primitive-class': {
|
|
19
|
+
file: 'primitive-class.md',
|
|
20
|
+
label: 'Primitive class prefixes (is--, l--, a--) and Component class (c--), with column-layout primitive selection guide',
|
|
21
|
+
},
|
|
19
22
|
'utility-class': { file: 'utility-class.md', label: 'Utility classes (u--trim, u--cbox, etc.)' },
|
|
20
23
|
'css-rules': { file: 'css-rules.md', label: 'CSS methodology, layer structure, naming conventions' },
|
|
21
24
|
responsive: { file: 'prop-responsive.md', label: 'Responsive design, breakpoints, container queries' },
|
|
25
|
+
antipatterns: {
|
|
26
|
+
file: 'antipatterns.md',
|
|
27
|
+
label: 'AI code-generation antipatterns: token typos, prop type mistakes, layout choice errors, responsive omissions',
|
|
28
|
+
},
|
|
22
29
|
};
|
|
23
30
|
const TOPIC_DESCRIPTION = Object.entries(GUIDE_TOPICS)
|
|
24
31
|
.map(([key, { label }]) => `- ${key}: ${label}`)
|
package/package.json
CHANGED
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
# l--fluidCols / `<FluidCols>`
|
|
2
|
-
|
|
3
|
-
カラム要素が指定した幅より小さくならないように自動で折り返す、**ブレイクポイント非依存の段組みクラス**。`auto-fit` / `auto-fill` を使った流動カラムを簡潔に記述できます。
|
|
4
|
-
|
|
5
|
-
## 基本情報
|
|
6
|
-
|
|
7
|
-
- クラス名: `l--fluidCols`
|
|
8
|
-
- コンポーネント: `<FluidCols>`
|
|
9
|
-
- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_fluidCols.scss
|
|
10
|
-
- ドキュメント(人間向け): https://lism-css.com/docs/primitives/l--fluidCols/
|
|
11
|
-
|
|
12
|
-
## 専用Props
|
|
13
|
-
|
|
14
|
-
| Prop | CSS変数 | 説明 |
|
|
15
|
-
|------|--------|------|
|
|
16
|
-
| `cols` | `--cols` | カラムが維持する最小幅を指定(`16em`, `320px` など) |
|
|
17
|
-
| `autoFill` | `--autoMode` | `auto-fill` モードに切り替え(デフォルトは `auto-fit`) |
|
|
18
|
-
|
|
19
|
-
## Usage
|
|
20
|
-
|
|
21
|
-
### `--cols`でサイズを指定する
|
|
22
|
-
|
|
23
|
-
```jsx
|
|
24
|
-
<FluidCols cols="16em" g="20">
|
|
25
|
-
<Lism as="div" p="20" bd>Item A</Lism>
|
|
26
|
-
<Lism as="div" p="20" bd>Item B</Lism>
|
|
27
|
-
<Lism as="div" p="20" bd>Item C</Lism>
|
|
28
|
-
<Lism as="div" p="20" bd>Item D</Lism>
|
|
29
|
-
</FluidCols>
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
```html
|
|
33
|
-
<div class="l--fluidCols -g:20" style="--cols: 16em">
|
|
34
|
-
<div class="-p:20 -bd">Item A</div>
|
|
35
|
-
<div class="-p:20 -bd">Item B</div>
|
|
36
|
-
<div class="-p:20 -bd">Item C</div>
|
|
37
|
-
<div class="-p:20 -bd">Item D</div>
|
|
38
|
-
</div>
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
### `auto-fill`を使用する
|
|
42
|
-
|
|
43
|
-
`l--fluidCols` では、`grid-template-columns` の `repeat()` 関数の第一引数を `--autoMode` で指定できます(デフォルトは `auto-fit`)。`--autoMode:auto-fill`(`autoFill`)を指定することで、要素数が少ない時の挙動が変わります。
|
|
44
|
-
|
|
45
|
-
```jsx
|
|
46
|
-
<FluidCols cols="12em" autoFill g="20" fz="s">
|
|
47
|
-
<Lism as="div" p="20" bd>auto-fill</Lism>
|
|
48
|
-
<Lism as="div" p="20" bd>auto-fill</Lism>
|
|
49
|
-
</FluidCols>
|
|
50
|
-
<FluidCols cols="12em" g="20" fz="s">
|
|
51
|
-
<Lism as="div" p="20" bd>auto-fit</Lism>
|
|
52
|
-
<Lism as="div" p="20" bd>auto-fit</Lism>
|
|
53
|
-
</FluidCols>
|
|
54
|
-
```
|
|
55
|
-
|
|
56
|
-
```html
|
|
57
|
-
<div class="l--fluidCols -g:20 -fz:s" style="--cols:12em; --autoMode:auto-fill">
|
|
58
|
-
<div class="-p:20 -bd">auto-fill</div>
|
|
59
|
-
<div class="-p:20 -bd">auto-fill</div>
|
|
60
|
-
</div>
|
|
61
|
-
<div class="l--fluidCols -g:20 -fz:s" style="--cols:12em">
|
|
62
|
-
<div class="-p:20 -bd">auto-fit</div>
|
|
63
|
-
<div class="-p:20 -bd">auto-fit</div>
|
|
64
|
-
</div>
|
|
65
|
-
```
|
|
66
|
-
|
|
67
|
-
## 関連プリミティブ
|
|
68
|
-
|
|
69
|
-
- [l--columns](./l--columns.md) — ブレイクポイント指定の等幅カラム
|
|
70
|
-
- [l--switchCols](./l--switchCols.md) — 複数列 ↔ 1列の2段階切り替え
|
|
71
|
-
- [l--sideMain](./l--sideMain.md) — メイン幅ベースの2カラム自動切替
|