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>