CSSフレームワークと言えばBootstrapが有名だと思いますが、今回は【軽量】なものに少しフォーカスして探してみました。言うまでもありませんが、軽量なデータはユーザーがページへのアクセスした時のストレスを軽減してくれるメリットがあります。 こちらのランディングページ用テンプレートもチェックしてみてください。 【無料】高品質でおしゃれなランディングページテンプレート10選!

FlexboxがベースのSPECTRE

軽量のCSSフレーム ワークSPECTRE https://picturepan2.github.io/spectre/ GZIP圧縮で10KBという軽量なCSSフレームワークです。レスポンシブでFlexboxをベースに組み込まれています。

GZIP圧縮で6KBのMustard-UI

GZIPで6KBのCSSフレームワークMustard UI https://mustard-ui.com/ これもGZIP圧縮で6KBの超軽量なCSSフレームワークです。オープンソースで作成されています。

FlexboxがベースのBulma

GitHubで人気のCSSフレームワーク https://bulma.io/ GitHubで28000以上のスターが付いている人気のCSSフレームワークの一つです。

マウスオーバーアニメーションもチェックUIKit

アニメーション付きCSSフレームワーク https://getuikit.com/ マウスオーバー時のアニメーションが用意されています。

BEMを念頭に開発されたtentCSS

BEMを念頭に開発されたCSSフレームワーク https://css.sitetent.com/ BEMを念頭に開発されたCSSフレームワークとなっており、GZIP圧縮で5KBです。

マテリアルデザインで作成Materialize

人気のCSSフレームワーク https://materializecss.com/ マテリアルデザインで作成された人気のCSSフレームワークの一つです。

応答性の高い設計Foundation

応答性の高いCSSフレームワーク https://foundation.zurb.com/ どのデバイスでも見た目の美しい応答性の高いWebサイト、アプリケーション、電子メールを簡単に設計できるようになっていることが売りだそうです。

GitHubで42000以上のスターSemantic-UI

クラス名に特徴があるフレームワークSemantic UI https://semantic-ui.com/ 下記のように見てもらうと分かるのですが、人間が理解しやすい名前がクラス名に使われている設計になっています。GitHubで42000以上のスターを獲得している人気のCSSフレームワークです。

マテリアルデザインがベースMUI

マテリアルデザインがベースのCSSフレームワーク https://www.muicss.com/ マテリアルデザインのガイドラインに基づいて作成されたフレームワークで、GZIP圧縮で6.6KBと軽量です。

モバイルデバイスを念頭に開発Pure

モバイルデバイスを念頭に開発されたCSSフレームワーク https://purecss.io/ モバイルデバイスを念頭に開発されたもので、ファイルサイズを小さくすることを第一にCSSは深く検討されたものとなっています。

応答性の高いグリッドと最新コンポーネントによる設計mini.css

応答性の高いグリッドなCSSフレームワーク https://minicss.org/ 10KB未満と応答性の高いグリッドと最新のコンポーネントにより、機能だけではなく美しく見えるようにも設計されています。

小さなプロジェクトに最適Skeleton

小さなプロジェクトに最適なCSSフレームワーク http://getskeleton.com/ 小さなプロジェクトや、大きなフレームワークのすべての有用性を必要としない場合は、スケルトンを使用するのがいいかもしれません。

Not UIフレームワークMilligram

CSSフレームワークMilligram https://milligram.io/ コードがよりクリーンになるように設計されたものとなっています。

SCSSに多くの変数とクラスPicnic CSS

SCSSで書かれたCSSフレームワークPicnic CSS https://picnicss.com/ Picnic CSSはSCSSに多くの変数とクラス(プレースホルダー)で書かれており、簡単に拡張できるようになっています。 それでは今回はこんなところで。 関連記事

あわせて読みたい記事