Lism CSS
WEBサイト向けのレイアウトファーストなCSSフレームワーク。
コーディングを軽やかに。デザインに調和とリズムを。
軽量
Start from just 30kb~, with responsive design.
ビルド不要
No config, No build. Just load the CSS to start using.
モダンCSS
@layer, Container Query, Grid, CSS Variables
無料
Lism CSS is available for free.
独自のCSS設計
reset.css レベルからの設計
Lism CSSは、reset.cssからユーティリティクラスまで、サイト全体のCSS設計理論を構築しています。
デザイントークン
事前にデザイントークンをCSS変数で定義します。それらを流用することでサイト全体の一貫性を保ちます。
レイアウトファースト
WEBサイトでよく使われるレイアウト要素を細分化し、基礎となるモジュールを定義しています。
モダン設計
@layer, Containerクエリなど、モダンなCSSの機能を積極的に活用しています。
レスポンシブ対応
ユーティリティ & CSS変数を組み合わせてレスポンシブ対応する独自アプローチを採用しています。
どんなサイトにも使えます
Lismはあくまで設計理論。設定・ビルド不要で素のHTMLコーディングにも活用できます。
Astro/React用のコンポーネント
Lism CSSを手軽に扱えるように、ReactやAstroで利用できるコンポーネントを無償で提供しています。
<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>;