スクリプトは最小限!レスポンシブ対応CSSベースの軽量フレームワークのまとめ

そのままサイト制作に使ってももちろん便利、自分用のテンプレートを作るための勉強にも役立つCSSベースのフロントエンド用フレームワークを紹介します。
一部のフレームワークで古いIE用にmodernizr.jsrespond.jsなどを使用しています。

サイトのキャプチャ

Kube
Kube -GitHub
レスポンシブ対応、プロ仕様のシンプルでミニマルなフレームワーク。

ファイルサイズ
15.6KB
対応ブラウザ
Chrome, Safari, Firefox, Opera, IE8+, and スマフォ用ブラウザ
ライセンス
個人・商用ともに無料利用可

サイトのキャプチャ

Base
Base -GitHub
レスポンシブ対応、ベーシックなUIエレメントやグリッド揃ったフレームワーク。LESS, Sassだけでなく、.htaccessを含むサイト制作用のフォルダやグリッドのPSDもセットになっています。

ファイルサイズ
3KB(gzip)
対応ブラウザ
Chrome, Safari, Firefox, Opera, IE7+
ライセンス
MIT
サイトのキャプチャ

Cascade Framework
Cascade Framework -GitHub
レスポンシブ対応、さまざまなデザインに利用できるスタイルシートをモジュール形式で提供するフレームワーク。ライト版のCascade Framework Lightもあります。

ファイルサイズ
core.css:2.6KB(gzip)
ライセンス
MIT
サイトのキャプチャ

Atatonic
Atatonic -Google Code
縦のリズムを大切にデザインしたタイポグラフィとグリッド用のフレームワーク。

ファイルサイズ
3KB(gzip)
ライセンス
MIT
サイトのキャプチャ

FlexGRID
レスポンシブ対応、12カラムのグリッドで中身の高さが異なっていても美しく揃えるグリッドシステム。

ファイルサイズ
4KB
対応ブラウザ
Chrome, Safari, Firefox, Opera, IE10+
※古いIEはrespond.jsで対応
サイトのキャプチャ

Responsive Boilerplate
Responsive Boilerplate -GitHub
レスポンシブ対応、モバイルファーストの12カラムのグリッドを使ったフレームワーク。

ファイルサイズ
4.7KB(min)
対応ブラウザ
Chrome, Safari, Firefox, Opera, IE, iOS, Android
ライセンス
MIT
サイトのキャプチャ

Extra Strength Responsive
レスポンシブ対応の柔軟なグリッドを利用できるフレームワーク。

ファイルサイズ
7.5KB
対応ブラウザ
Chrome, Safari, Firefox, Opera, IE
※古いIEはrespond.jsで対応
ライセンス
MIT &GPL
サイトのキャプチャ

Pure
Pure -GitHub
レスポンシブ対応、さまざまなUIエレメントやレイアウトが揃っているYahoo!が開発したフレームワーク。

ファイルサイズ
4.4KB(gzip)
対応ブラウザ
Chrome, Safari, Firefox, IE7+, iOS6.x/7.x, Android4.x
ライセンス
BSD
サイトのキャプチャ

CSSHorus
CSSHorus -GitHub
レスポンシブ対応、ベーシックなさまざなUIエレメントだけでなく、レスポンシブ用の画像、RTLなども用意されています。

ファイルサイズ
7.5KB
ライセンス
MIT
サイトのキャプチャ

Cardinalcss
Cardinalcss -GitHub
レスポンシブ対応、モバイルファーストのさまざまなUIエレメントが揃ったフレームワーク。

ファイルサイズ
30KB
対応ブラウザ
Chrome, Safari, Firefox, Opera, IE9+
※古いIEはrespond.jsで対応
ライセンス
MIT
サイトのキャプチャ

RocketCSS
RocketCSS -GitHub
フラットなスタイルのさまざまなUIエレメントが簡単に実装できるフレームワーク。

ファイルサイズ
6.5KB
ライセンス
MIT

top of page

©2017 coliss