Overview

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

独自のCSS設計理論をゼロから構築しており、以下のようなコンセプトになっています。

HTML側にクラスとCSS変数を書くだけでざっくりとしたレイアウトが素早く組める。
細かい装飾や複雑なデザインはCSSでちゃんと書く。（Lism は干渉しない）
CSSを読み込むだけで、素のHTMLサイトやWordPressサイトにも導入できる。

なんでもかんでも全部のスタイルをHTMLやJSX側に書いていくのではなく、主要なレイアウトやCSSプロパティをクラスとCSS変数だけで簡単に適用できるようにしつつも、細かい作り込みはCSS側に任せるという想定で設計しています。

※ Every Layout + Bootstrap + Tailwind CSS を混ぜ合わせたようなイメージで設計しました。

Lism CSSを元にしたコンポーネント集 をnpmパッケージとして提供しており、ReactとAstroではより手軽に利用できます。

Lism コンポーネント

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

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

↓

専用のコンポーネントはこんな感じで使います

Lism CSS

The some description text is here…

Documents

Github

<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='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>

CSS設計の特徴

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

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

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

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

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

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

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

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

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

WEBデザインの細分化

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

Design Tokens
Layout State
Layouts
Components
Utilities

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

CSS変数とクラスの組み合わせによるレスポンシブ対応

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

主要なプロパティに関して、専用のクラスとそれに対応する変数を指定するだけで簡単にブレイクポイントでの切り替えができるようになっています。

↓

実際の活用例

BOX

リサイズ可能

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

その他の特徴

`@layer`の採用

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

コンテナクエリの採用

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

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

Inspirations

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