PRIMITIVES

Layout Primitives

レイアウト用の語彙クラス `l--*` を並べて比較

Stack

子要素を縦に等間隔で積む

Item 1

Item 2

Item 3

Item 4

横並び(折返しあり)。Cluster は Flex の折返し特化版

Chip 1

Chip 2

Chip 3

Chip 4

Chip 5

Chip 6

明示的なカラム指定グリッド

最小幅を指定すると自動でタイル数が決まる

Tile 1

Tile 2

Tile 3

Tile 4

Tile 5

Tile 6

マルチカラムレイアウト(雑誌風)

Lism CSS は Every Layout / Tailwind / ITCSS / Chakra の良いとこ取りをした、レイアウト重視の軽量 CSS フレームワークです。

Primitives と呼ばれるレイアウト用クラスを組み合わせるだけで、ほとんどのページ骨格が書けます。

さらに Property Class で細かい調整を行い、独自 CSS は lism-custom レイヤーに書くのが推奨です。

サイドバー + メイン。狭いと縦積みに

Sidebar

Nav / メタ情報など

Main

メインコンテンツ。コンテナ幅が狭くなると自動で縦積みに切り替わります(Container Query ベース)。