🎨 独自のCSS設計
reset.css レベルからの設計
Lism CSSは、reset.cssからユーティリティクラスまで、サイト全体のCSS設計理論を構築しています。
デザイントークン
事前にデザイントークンをCSS変数で定義します。それらを流用することでサイト全体の一貫性を保ちます。
レイアウトファースト
WEBサイトでよく使われるレイアウト要素を細分化し、基礎となるモジュールを定義しています。
モダン設計
@layer, Containerクエリなど、モダンなCSSの機能を積極的に活用しています。
レスポンシブ対応
ユーティリティ & CSS変数を組み合わせてレスポンシブ対応する独自アプローチを採用しています。
どんなサイトにも使えます
Lismはあくまで設計理論。設定・ビルド不要で素のHTMLコーディングにも活用できます。
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設計を手軽に扱えるように、ReactやAstroで利用できるコンポーネントを無償で提供しています。
↓
専用のコンポーネントはこんな感じで使います
<Center p='40' ar='16/9' bgc='base'> <HTML.h lv='h1' fz='4xl' lh='1' ff='accent'> Lism CSS </HTML.h> <HTML.div my-s='20' o='-10'> The some description text is here... </HTML.div> <Flex g='30' my-s='40'> <HTML.a href='###' d='in-flex' bdrs='5' td='none' c='base' bgc='text' py='5' px='20'> Documents </HTML.a> <HTML.a href='###' d='in-flex' bdrs='5' td='none' c='text' bd py='5' px='20'> Github </HTML.a> </Flex></Center>