“Lism CSS” は、WEBサイトの骨組みをサクっと作るための軽量でモダンなCSSフレームワークです。

CSS設計理論をゼロから構築しています。

• レイアウトファーストなモジュール設計をベースに、装飾はユーティリティクラスが担います。
• クラスとCSS変数の組み合わせでレスポンシブレイアウトが素早く組める。
• ビルドや設定は不要。CSSを読み込むだけでも使えるため、WordPressにも導入できる。

HTML側で全部書こうとせず、細かい作り込みやリッチな装飾はCSS側で書くことを前提としています。

Every Layout + Bootstrap + Tailwind CSS を 混ぜ合わせたようなCSS設計になっています。

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

Chakra UI や MUI のような使い心地で、Lism CSSの設計思想に則ったコンポーネントを手軽に扱えるようになります。

<Center p='40' ar='16/9' bgc='base'>
  <Lism tag='h1' fz='4xl' lh='1' ff='accent'>
    Lism CSS
  </Lism>
  <Lism mbs='20' op='high'>
    The some description text is here...
  </Lism>
  <Flex g='30' mbs='40'>
    <Link href='###' d='if' bdrs='5' td='n' c='base' bgc='text' py='5' px='20'>
      Documents
    </Link>
    <Link href='###' d='if' bdrs='5' td='n' c='text' bd py='5' px='20'>
      Github
    </Link>
  </Flex>
</Center>

WEBサイトで一般的によく使われるレイアウト・デザイン要素を細分化し、汎用的に使い回せるような設計思想なっています。

あくまでもHTMLとCSSの設計理論が主体になっており、特殊なビルド処理は必須ではありません。

（一部、アコーディオンやタブの動作に関するJavaScriptが付属しています。）

ただし、Lism コンポーネントを使った方が圧倒的に開発体験は向上します。基本的には Next.js、Astro 等の開発環境上でのコンポーネントの活用を推奨しています。

Lism CSS では、デザイン的なモジュールクラスやトークン設計を提供するだけでなく、reset.css レベルからCSSの階層構造をあらかじめ定義しています。

事前に決められた階層ルールに従うことで、CSSで問題になりやすい詳細度の複雑化も軽減します。

Lism CSS では、WEBサイトのデザインを以下のような概念に分解して考えています。

これらそれぞれの階層ごとの主要な要素に対して変数やクラスを定義し、流用できるようにしています。

LismではCSS変数（カスタムプロパティ）とクラス属性を組み合わせる設計が多くなっていますが、特に、その特徴が一番現れるのがレスポンシブ対応です。

<div class="-p:20 -p_sm -p_md -bd" style="--p_sm:var(--s30);--p_md:var(--s50);">
  BOX
</div>

<Box p={[20, 30, 50]} bd>
  BOX
</Box>

Lism は @layer をデフォルトで採用しています。

Lism は メディアクエリではなくコンテナクエリをデフォルトで採用しています。
そのため、慣れていない方は少し注意が必要です。

コンテナ要素内では position: fixed の挙動が変わったり、サイズ関係の挙動が少し変わったりすることがあります。

• Every Layout : “レイアウトプリミティブ”という考え方をLismでもベースに取り入れています。
• ITCSS : レイヤーの概念を参考にしています。
• daisyUI : カラートークンの設計やコンポーネントの豊富さが非常に参考になりました。
• SmartHR Design System : デザイントークン設計が非常に参考になりました。
• Chakra UI, MUI : コンポーネントの使用感が非常に参考になりました。
• Tailwind CSS : CSSプロパティと値のセットで細かくクラス化するという考え方が非常に参考になりました。