”Lism UI” は、WEBサイトの骨組みをサクっと作れる軽量なフレームワークプロジェクトです。

独自のCSS設計理論（Lism CSS）と、それを元にしたコンポーネント集（Lism Components）を提供します。

以下のコンセプトを掲げています。

• ゼロビルドで素のHTMLサイトにも導入できる。
• 軽量で、かつ、汎用性も高い。

入念に設計された Lism UI を学習することで、HTML,CSSの設計を何度も何度も模索し直す時間を削減できます。

Lism CSS

Lism CSS では、WEBサイトデザインを以下の概念に分類します。

※ Every Layout + Bootstrap を 混ぜ合わせたようなイメージです。

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

Lism Components

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

Chakra UI や MUI のような使い心地で、Lism CSSの設計思想に則ったモジュールを手軽に扱えるようになります。

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

特徴

ゼロビルドでどんな環境でも使えるフレームワーク

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

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

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

CSS変数とクラスの組み合わせ

Lism には、汎用性を確保しつつ、読み込むCSSを軽量に抑えるための工夫が詰まっています。
また、CSSを軽くする代償としてHTMLのコード量が爆増してしまうようなことがないように、バランスを考えつつ設計しています。

その結果、LismではCSS変数とクラスを組み合わせる設計が多くなっています。

特に、その特徴が一番現れるのがレスポンシブ対応です。

その他の特徴

コンテナクエリの採用

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

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

レイヤー階層・セレクタ優先度まで設計

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

これに則ることにより、CSSで問題になりやすい詳細度の複雑化を軽減します。

Inspirations

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