独自のCSS設計
レイアウトモジュール
WEBサイトでよく使われるデザイン要素を細分化したものをモジュール化しています。
デザインステート
複数のモジュールに対して状態として付与できるようなデザイン機能を切り分けて定義しています。
デザイントークン
事前にデザイントークンをCSS変数で定義し、それらを流用することでサイト全体の一貫性を保ちます。
レスポンシブなユーティリティ設計
主要なCSSプロパティに対応したユーティリティクラスがあり、さらに重要なプロパティはレスポンシブ対応できる設計になっています。
専用コンポーネント
上記のような独自のCSS設計を手軽に扱えるように、ReactやAstroで利用できるコンポーネントを無償で提供しています。
↓
専用のコンポーネントはこんな感じで使います
<Frame aspect='16/9' hasGutter bgc='base-2'> <Center minH='100'> <Text tag='h1' fz='3xl' ff='serif' lts='l' lh='xs'>Lism UI</Text> <Text c='content-2' fz='s'>The dammy description text...</Text> <Flex gap={20} mbs={40}> <Button href='###' bdrs='m'>Docs</Button> <Button href='###' variant='outline' bdrs='m'>Buy</Button> </Flex> </Center></Frame>その他の特徴
- どこでも利用可能: Lism UIのコアはただのCSS設計理論。ゼロビルドでも使えるので、素のHTMLコーディングやWordPressにも活用できます。
- 軽量: 高い柔軟性を持ちながらも、全てのユーティリティクラスをインポートしても軽量です。
- モダンCSSの活用: CSS変数の活用はもちろんのこと、コンテナクエリ、
color-mix間数、:hasセレクタ等も採用しています。 - 日本発: 日本人が開発しているので、日本語のドキュメントやサポートが充実しています。