概要

“Lism CSS” は、WEBサイトの骨組みをテンポ良くサクっと作るための軽量なCSSフレームワークです。
デザインには自然と心地よいリズムがうまれるように、CSS設計もゼロから構築しています。

レイアウトファーストなモジュール設計。
CSS変数を組み合わせたレスポンシブなユーティリティ設計。
ビルドや設定は不要。CSSを読み込むだけでも使えます。

Lism CSS ではレイアウト全体の構築をサポートしますが、全てをHTML側にクラスを書けばよいというものではありません。細かい作り込みや装飾はピュアCSSで自由に書くことを前提としています。

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

React/Astro で使える Lism コンポーネント

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>

Lism CSS の特徴

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

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

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

ただし、React, Astroで専用コンポーネントを使った方が便利です。

reset.css レベルからサイト全体のレイヤー階層を設計

Lism CSS では、モジュールクラスやユーティリティクラス、トークン設計を提供するだけではありません。

CSSのレイヤー階層も定義しており、reset.css レベルからサイト全体のCSS設計を担います。

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

レイアウトファースト

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

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

CSS変数を組み合わたレスポンシブなユーティリティ設計

LismではCSS変数とクラスを組み合わせる設計が多くなっていますが、その特徴が一番現れるのがレスポンシブ対応が可能なユーティリティクラスの設計です。

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

↓

実際の活用例

BOX

リサイズ可能

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

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

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

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

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

Inspirations

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