🏝️

class不要のCSSフレームワーク。「Classless CSS」を色々まとめてみた。

2022/10/21に公開

ちょっと株式会社 エンジニアのhanetsukiです。
今回は、classの指定が不要なさまざまな Classless CSS を幾つかご紹介したいと思います。

Sakura.css

https://oxal.org/projects/sakura/demo/

テーマが豊富なClassless CSSです。
npmでのinstallも対応されていて、scssの変数を上書きすれば自分の好きな色味にも変更できるのが特徴です。
CDNでの配信されており、対応しやすいのが良いですね。
デフォルトのテーマは柔らかい印象が特徴です。

Water.css

https://watercss.kognise.dev/

ダークモードの対応がされているClassless CSSです。
CDNでの配信のみであるものの、コントラストがしっかり分かれている上で、全体を整えてくれるので
簡易的なドキュメントサイト用などで利用したりしていました。

MVP.css

https://andybrewer.github.io/mvp/

CSS変数でのカスタマイズが可能なClassless CSSです。
ダークモードが対応されていて、npm, CDNの配信もされている為、
導入の入り口が広いのが特徴です。

終わりに

好みのClassless CSSはございましたか?

私はポートフォリオサイトに sakura.css を気にって利用しています。
自分でスタイリングするのも良いですが、まずは情報を公開したい!などの時には、他のUIフレームワークを利用するよりも

早い速度で実装が可能かと思います。
ぜひ利用してみてください(ˊᗜˋ*)

chot Inc. tech blog

Discussion