概要

“Lism CSS” は、WEBサイトの骨組みをテンポ良くサクっと作るための軽量なCSS設計フレームワークです。
ビルドや設定は不要。CSSを読み込むだけでも使えます。

デザインに自然と心地よいリズムを生み出すトークン設計。
レイアウトファーストなモジュール設計。
CSS変数を活かした、柔軟でレスポンシブなユーティリティ設計。

Lism CSS はレイアウト全体の構築をサポートしますが、細かい作り込みや装飾はネイティブCSSで自由に書くことを前提としています。

HTML側にクラスを書くだけでよい、というものではありません。

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

Lism CSS の特徴

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

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

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

（ただし、後述するReact, Astro向けの専用コンポーネントを使った方が利便性は上がります。）

Lism CSS専用のコンポーネントがある

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

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

↓

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

Lism CSS

The some description text is here…

Documents Github

リサイズ可能

<Center p='30' ar='3/2' bgc='base' g='10'>
  <HTML.h lv='1' fz={['3xl', '4xl']} ff='accent'>
    Lism CSS
  </HTML.h>
  <HTML.p c='text-2'>
    The some description text is here...
  </HTML.p>
  <Flex g='20' my-s='30'>
    <HTML.a href='###' d='in-flex' bdrs='10' td='none' c='base' bgc='text' py='10' px='20'>
      Documents
    </HTML.a>
    <HTML.a href='###' d='in-flex' bdrs='10' td='none' c='text' bd py='10' px='20'>
      Github
    </HTML.a>
  </Flex>
</Center>

サイト全体のCSS設計を担う

Lism CSS はユーティリティクラスのパッケージではありません。

デザイントークンの設計
クラス名と変数名の命名規則
reset.css レベルからのレイヤー(@layer)階層

などを定義しており、Lismベースでサイト全体を構築することを前提にしたCSS設計となっています。

そのため、他のフレームワークとの共存は考慮されていません。

レイアウトファースト

Lism CSS では、WEBサイトで一般的によく使われるレイアウト要素を細分化して汎用的に使い回せる設計になっています。

これは、Every Layout でのレイアウトプリミティブという思想を参考にしたものです。

l--flex
l--center
l--columns

などのレイアウトモジュールクラスが定義されています。

CSS変数を組み合わたユーティリティ設計

LismではCSS変数を活用したユーティリティクラスが多くなっています。

その特徴が一番現れるのがレスポンシブ対応用のユーティリティクラスです。

↓

実際の活用例

BOX

リサイズ可能

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

このようにして、主要なCSSプロパティに関して、簡単にブレイクポイントでの切り替えができるようになっています。

メディアクエリに依存しないレイアウト設計

Lism CSS では、メディアクエリではなくコンテナクエリをデフォルトで採用しています。

さらに、Lism CSSには、メディアクエリやコンテナクエリに依存しないレイアウトモジュールもいくつか用意しています。

コンテナ要素の中では position: fixed の挙動が変わったり、サイズ関係の挙動が少し変わったりすることがあるため注意が必要となっています。

Inspirations

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