概要
“Lism CSS” は、WEBサイトの骨組みをテンポ良く美しく作るための軽量なCSS設計フレームワークです。
- サイト全体に自然と心地よいリズムを生み出すタイポグラフィ設計。
- ワイヤーフレーム作成が簡単にできるレイアウトファーストなプリミティブ設計。
- 柔軟でレスポンシブにも対応できるCSS変数を活かしたユーティリティ設計。
Every Layout のレイアウトプリミティブやハーモニックモジュラースケーリング、Tailwind CSS のユーティリティファーストなアプローチ、ITCSS のレイヤー設計を融合した、独自のCSS設計体系です。
Why Lism CSS?
- 自分でCSS設計を考えなくてよい。 — ベーススタイリング、
@layer階層、トークン、命名規則まで、サイト全体のCSS設計を丸ごと引き受けます。 - CSSを読み込むだけで使える。 — ビルドや設定は不要です。軽量なスタイルシートを一つ読み込むだけですぐに導入できます。
- React・Astroでは、より快適に。 — 専用コンポーネントを使えば、レスポンシブ対応やレイアウト構築をpropsで直感的に行えます。
各特徴の詳細については「特徴」ページで解説しています。
ゼロビルドでどんな環境でも使えます。
Lism CSS はあくまでもCSSの設計理論が主体になっており、それに沿って作成された一つのCSSファイルが本体です。
CSSを読み込むだけで導入できるため、素のHTMLサイトでも利用できるものになっています。
↓
たった1行のコードで、CDNから読み込むだけでも使い始めることができます。
<link href="https://cdn.jsdelivr.net/npm/lism-css@0/dist/css/main.css" rel="stylesheet" />つまり、Lism CSSの導入に特殊なビルド処理は必須ではありません。
ただし、lism-cssというnpmパッケージに内包されている React や Astro 向けの専用コンポーネントを使えば、さらに快適な開発体験が得られます。
また、SCSS設定の上書きや、lism.config.jsの導入でより柔軟にカスタマイズして利用していただくことも可能です。
Lism CSS のエコシステム
Lism CSS はコアのCSSライブラリだけでなく、開発をサポートするパッケージ群をOSSとして提供しています。
| パッケージ | 説明 |
|---|---|
lism-css | コアCSS + React / Astro レイアウトコンポーネント |
@lism-css/ui | アコーディオンやタブ、ボタンリンクなどのUIコンポーネント集 |
@lism-css/cli | UIコンポーネントをプロジェクトにコピーしてカスタマイズできるCLI |
@lism-css/mcp | AIコーディングツール向けのMCPサーバー |
すべて無料・オープンソース（MIT）で開発されています。
JSXコンポーネントの使用例
Lism CSS を簡単に扱えるようにした専用のコンポーネントを React, Astro 形式で配布しています。
<Center p="30" ar="3/2" bgc="base" g="10"> <Heading level="1" fz={['3xl', '4xl']} ff="accent"> Lism CSS </Heading> <Text c="text-2">The some description text is here...</Text> <Flex g="20" my-s="30"> <Link href="###" d="inline-flex" bdrs="10" td="none" c="base" bgc="text" py="10" px="20"> Documents </Link> <Link href="###" d="inline-flex" bdrs="10" td="none" c="text" bd py="10" px="20"> Github </Link> </Flex></Center>Inspirations
Lism CSS は以下のプロジェクトから多くのインスピレーションを受けています。
- Every Layout — レイアウトプリミティブとハーモニックモジュラースケーリングの考え方を取り入れています。
- ITCSS — レイヤー階層の定義を参考にしました。
- Tailwind CSS — 単一のCSSプロパティに対応するクラスを用意する設計を参考にしました。
- Chakra UI, MUI — コンポーネントの使用感を参考にしました。