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