chot Inc.

ちょっと株式会社 社員ブログ
Blog
  • ホーム
  • ブログ
  • class不要のCSSフレームワーク。「Classless CSS」を色々まとめてみた。

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

ナレッジ・ノウハウ
class不要のCSSフレームワーク。「Classless CSS」を色々まとめてみた。

SHARE

ちょっと株式会社 エンジニアのたっちーです。
今回は、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フレームワークを利用するよりも
早い速度で実装が可能かと思います。
ぜひ利用してみてください(ˊᗜˋ*)

たっちー

フロントエンドエンジニア

1995年生まれ。2018年にweb業界に足を突っ込んだ同人イラストレーター。 現在ではフロントエンド領域を生業としながら幅広くwebをカバーしてます。 コーヒーとジャパンサブカルと技術のお話が大好きです。 ちょっと社では「たっちー」の愛称で呼ばれ、SNSでは「hanetsuki」と言う名前で活動しています。

関連記事

Copyright © 2022, chot inc.