レイアウトコンポーネント

LismCSS の強力なレイアウト機能を Vue コンポーネントとしてパッケージ化した、主要なレイアウトコンポーネント群の解説です。

これらのコンポーネントはすべて内部で Lism コンポーネントを使用しており、すべての Lism Props を利用できます。

LismBox

もっとも基本的なボックスコンポーネントです。特定のレイアウト構造を持たず、余白や背景、ボーダーなどを付与するために使用します。

仕様

• デフォルトタグ: div

• 主要クラス: l--box (内部で layout="box" を指定)

使用例

<template>
  <!-- パディング、背景色、角丸、ボーダーを設定 -->
  <LismBox p="30" bgc="base-2" bdrs="3" bd>
    ボックスの内容
  </LismBox>

  <!-- ホバーエフェクトの追加 -->
  <LismBox p="20" bd :hov="{ bgc: 'brand', c: 'white' }">
    ホバーでスタイルが変化
  </LismBox>
</template>

LismFlex

Flexbox レイアウトを簡単に構築するためのコンポーネントです。

仕様

• デフォルトタグ: div

• 主要クラス: l--flex (内部で layout="flex" を指定)

• 便利なプロパティ: g (gap), ai (align-items), jc (justify-content), fxw (flex-wrap) など

LismStack

要素を垂直に積み重ねる（flex-direction: column）ためのコンポーネントです。

仕様

• デフォルトタグ: div

• 主要クラス: l--stack (内部で layout="stack" を指定)

• 便利なプロパティ: g (gap) で垂直方向の間隔を指定できます。

LismGrid

CSS Grid レイアウトを使用するためのコンポーネントです。

仕様

• デフォルトタグ: div

• 主要クラス: l--grid (内部で layout="grid" を指定)

• 便利なプロパティ: gtc (grid-template-columns), gtr (grid-template-rows), g (gap) など

LismContainer

コンテンツの最大幅を制限し、中央寄せにするためのコンポーネントです。

仕様

• デフォルトタグ: div

• 主要クラス: is--container

• 便利なプロパティ: is-wrapper (コンテナのサイズ指定: s, m, l 等。コンポーネント独自の size プロパティでも指定可能)

LismCluster

要素を横並びにし、端に到達すると自動的に折り返す（Flex wrap）レイアウトです。タグ、バッジ、ボタンの並びなどに適しています。

仕様

• デフォルトタグ: div

• 主要クラス: l--cluster (内部で layout="cluster" を指定)

LismFrame

アスペクト比を維持したボックスを作成します。画像（img）や動画（iframe）などのメディア要素のアスペクト比を固定するのに便利です。

仕様

• デフォルトタグ: div

• 主要クラス: l--frame (内部で layout="frame" を指定)

• 便利なプロパティ: ar (aspect-ratio)

LismSideMain

サイドバーとメインコンテンツの2列レイアウトを作成します。メイン側の幅が指定値を下回ると、自動的に1列（スタック）に切り替わります。

仕様

• デフォルトタグ: div

• 主要クラス: l--sideMain (内部で layout="sideMain" を指定)

• 便利なプロパティ:

  • side-w: サイドバーの幅

  • main-w: メインエリアで維持したい最小幅

LismLayer

要素を絶対配置（レイヤー）として重ね合わせます。背景ぼかし（backdrop-blur）やオーバーレイなどの表現に最適です。

仕様

• デフォルトタグ: div

• 主要クラス: is--layer

• 便利なプロパティ:

  • blur, brightness, contrast 等: backdrop-filter として自動的に適用されます。

  • pos="rel" な親要素内に配置して使用します。

使用例

<template>
  <LismFrame ar="16/9" pos="rel">
    <img src="..." />
    <!-- 背景をぼかし、文字を中央に配置するレイヤー -->
    <LismLayer blur="10px" bgc="rgb(255 255 255 / 20%)" d="f" ai="c" jc="c">
      <Lism fz="2xl" fw="bold">BACKDROP BLUR</Lism>
    </LismLayer>
  </LismFrame>
</template>

LismFlow

要素の間隔（垂直方向）を管理するためのレイアウトコンポーネントです。子要素の間に一括でマージンを適用し、文書などの構造的なコンテンツの並びを簡単に制御できます。

仕様

• デフォルトタグ: div

• 主要クラス: l--flow (内部で layout="flow" を指定)

• 便利なプロパティ:

  • flow: 間隔の強さを指定します（s, l, または任意の数値/キーワード/数値）。

使用例

<template>
  <LismFlow flow="s">
    <p>この段落と...</p>
    <p>次の段落の間の余白は自動的に制御されます。</p>
    <LismBox bgc="base-2" p="20">
      ネストされたボックス
    </LismBox>
  </LismFlow>
</template>

LismFluidCols

カラムの最小幅を指定するだけで、画面幅に合わせて「1列 ↔ 複数列」を自動的に切り替えるレスポンシブなグリッドレイアウトです。メディアクエリを使わずにカードレイアウトなどを実装するのに最適です。

仕様

• デフォルトタグ: div

• 主要クラス: l--fluidCols (内部で layout="fluidCols" を指定)

• 便利なプロパティ:

  • cols: 各カラムが維持する最小幅を指定します（例: 280px, 20rem）。

  • autoFill: true を指定すると、要素が少ない場合でも列を埋める（親要素の幅を使い切る）ように動作します。

使用例

<template>
  <!-- 各要素が 280px 以上の幅を保ちつつ、自動的に敷き詰められる -->
  <LismFluidCols auto-fill cols="280px" g="20">
    <LismBox bd p="20">Card 1</LismBox>
    <LismBox bd p="20">Card 2</LismBox>
    <LismBox bd p="20">Card 3</LismBox>
  </LismFluidCols>
</template>

LismColumns

等分割のカラムレイアウトを作成するコンポーネントです。display: grid を使用し、すべてのカラムが同じ幅で並びます。

仕様

• デフォルトタグ: div

• 主要クラス: l--columns (内部で layout="columns" を指定)

• 便利なプロパティ: cols (カラム数。数値やレスポンシブな配列指定が可能)

使用例

<template>
  <LismColumns cols="3" g="20">
    <LismBox p="30" bgc="base-2" bd>Column 1</LismBox>
    <LismBox p="30" bgc="base-2" bd>Column 2</LismBox>
    <LismBox p="30" bgc="base-2" bd>Column 3</LismBox>
  </LismColumns>
</template>

LismSwitchCols

特定の幅（breakSize）を下回ると、自動的に 1 カラムに切り替わるレスポンシブレイアウトを作成します。メディアクエリを使わずに、「横並び ↔ 縦並び」を制御するのに最適です。

仕様

• デフォルトタグ: div

• 主要クラス: l--switchCols (内部で layout="switchCols" を指定)

• 便利なプロパティ: breakSize

使用例

<template>
  <LismSwitchCols breakSize="1000px" g="20">
    <LismBox p="30" bgc="base-2" bd>Card A</LismBox>
    <LismBox p="30" bgc="base-2" bd>Card B</LismBox>
  </LismSwitchCols>
</template>

LismDummy

ダミーテキスト、画像、リストを生成するためのコンポーネントです。開発中のプレビューやレイアウト調整に便利です。

src/core/dummy-adapter.tsにて、Adapterしてあります。

仕様

• デフォルトタグ: p

• 主要クラス: なし (内部で getContent ロジックを使用)

• 便利なプロパティ:

  • lang: 言語指定 (ja, en, ar)。デフォルトは en。

  • length: テキストの長さ (xs, s, m, l, xl, codes)。デフォルトは m。

  • pre: ダミーテキストの前に挿入する文字列。

  • offset: テキストの開始位置のオフセット。

  • as="img": https://cdn.lism-css.com/dummy-image.jpg をソースとしたダミー画像を表示します。

  • as="ul" / as="ol": テキストを句読点で分割し、<li> タグとして出力します。

使用例

<template>
  <!-- 日本語のダミーテキスト -->
  <LismDummy lang="ja" length="m" />

  <!-- ダミー画像 (アスペクト比指定など Lism Props も併用可能) -->
  <LismDummy as="img" ar="16/9" />

  <!-- ダミーリスト -->
  <LismDummy as="ul" length="s" g="10" />
</template>