Lism CSS とは

Lism CSS は、WEBサイトの骨組みをテンポ良く美しく作るための軽量なCSS設計フレームワークです。

サイト全体に自然と心地よいリズムを生み出すタイポグラフィ設計。
ワイヤーフレーム作成が簡単にできるレイアウトファーストなプリミティブ設計。
柔軟でレスポンシブにも対応できるCSS変数を活かしたユーティリティ設計。

Every Layout のレイアウトプリミティブやハーモニックモジュラースケーリング、Tailwind CSS のCSSプロパティ単位でのユーティリティファーストなアプローチから着想を得て、独自のCSS設計を組み立てました。

Why Lism CSS?

自分でCSS設計を考えなくてよい。 — ベーススタイリング、@layer 階層、トークン、命名規則まで、サイト全体のCSS設計を丸ごと引き受けます。
CSSを読み込むだけで使える。 — ビルドや設定は不要です。軽量なスタイルシートを一つ読み込むだけですぐに導入できます。
React・Astroでは、より快適に。 — 専用コンポーネントを使えば、レスポンシブ対応やレイアウト構築をpropsで直感的に行えます。

各特徴の詳細については「特徴」ページで解説しています。

Lism CSSの特徴

Lism CSS の設計思想と主な特徴について詳しく解説します。

ビルド不要で、どんな環境でも使えます。

Lism CSS の主体はあくまでもCSSの設計理論であり、その設計ルールに沿ってまとめられたCSSファイルをコア機能として提供しています。

CSSを読み込むだけで導入できるため、素のHTMLサイトでも利用できるものになっています。

↓

たった1行のコードで、CDNから読み込むだけでも使い始めることができます。

<link href="https://cdn.jsdelivr.net/npm/lism-css@0.30.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-cli`	プロジェクトの雛形生成や、UIコンポーネントのコピーができるCLI
`@lism-css/mcp`	AIコーディングツール向けのMCPサーバー

すべて無料・オープンソース（MIT）で開発されています。

JSXコンポーネントの使用例

Lism CSS を簡単に扱えるようにした専用のコンポーネントを React, Astro 形式で配布しています。

Lism CSS

The some description text is here…

Documents Github

リサイズ

<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" mbs="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>

<div class="l--center -p:30 -ar:3/2 -bgc:base -g:10">
  <h1 class="-fz:3xl -fz_sm -ff:accent" style="--fz_sm:var(--fz--4xl)">Lism CSS</h1>
  <p class="-c:text-2">The some description text is here…</p>
  <div class="l--flex -g:20 -mbs:30">
      <a class="-d:inline-flex -bdrs:10 -td:none -c:base -bgc:text -py:10 -px:20" href="###">Documents</a>
      <a class="-d:inline-flex -bdrs:10 -td:none -c:text -bd -py:10 -px:20" href="###">Github</a>
  </div>
</div>

Inspirations

Lism CSS は以下のプロジェクトから多くのインスピレーションを受けています。

Every Layout — レイアウトプリミティブとハーモニックモジュラースケーリングの考え方を取り入れています。
Tailwind CSS — 単一のCSSプロパティに対応するクラスを用意する設計を参考にしました。
Chakra UI, MUI — コンポーネントの使用感を参考にしました。

IntroductionLism CSS とは