catch

レスポンシブWebデザインに使えるCSSフレームワーク&グリッドシステム

レスポンシブWebデザイン使えるCSSフレームワークとグリッドシステムをまとめました。※随時更新中です

CSSフレームワーク

Bootstrap

Bootstrap

様々なコンポーネントも揃った高機能フレームワーク。Customizeから必要なファイルのみ選択してダウンロードもできますが、gitからはless形式で提供されてるのでこちらを使用したほうがよりカスタマイズがしやすいです。

Foundation

Foundation

様々なコンポーネントも用意された高機能フレームワーク。必要なCSSのみ選択してダウンロードもできますが、gemでSass形式のものをダウンロードしたほうがカスタマイズしやすいです。

Gumby

Gumby

様々なコンポーネントも用意された高機能フレームワーク。必要なCSSのみ選択してダウンロードもできますが、gitでcloneするとSass形式が入手できるので、そちらのほうがカスタマイズしやすいです。

GroundworkCSS

GroundworkCSS

様々なコンポーネントも用意された高機能フレームワーク。Sass+Compassで作成されてます。

Skeleton

Skelton

様々なコンポーネントも用意されたフレームワーク。最小限の装飾となってます。

Wirefy

Wirefy

様々なコンポーネントも用意されたフレームワーク。最小限の装飾となってます。

Base

Base

様々なコンポーネントも用意されたフレームワーク。lessファイルも提供されてます。最小限の装飾です。

CSSHórus

CSShorus

様々なコンポーネントも用意されたフレームワーク。lessファイルも提供されてます。

Tuktuk

Tuktuk

フラットUIのようなデザインのフレームワーク。gitからはStylus形式で提供されてます。

Amazium

Amazium

様々なコンポーネントも用意されたフレームワーク。最小限の装飾となってます。

YAML CSS Framework

YAML

様々なコンポーネントも用意されたフレームワーク。

Centurion

Centurion

様々なコンポーネントも用意されたフレームワーク。Sassファイルも提供されてます。

Workless

Workless

必要最小限のコンポーネントを備えたフレームワーク。

helium

helium

様々なコンポーネントも用意されたフレームワーク。Sass+Compassで作成されてます。最小限の装飾です。

Almost Flat UI

Almost Flat UI

Flat UIのフレームワーク。Foundationがベースになってます。

グリッドシステム

名前にフレームワークと書いてあってもグリッドシステムがメインのものはこちらに分類してます。

Responsive Grid System

Responsive Grid System

12カラムのグリッドシステム。メディアクエリでカラム数を変更することができます。

The Semantic Grid System

The Semantic Grid System

less、Sass、Stylusファイルも提供されてるのでカスタマイズしやすいグリッドシステムです。

Golden Grid System

Golden Grid System

less、Sass、Stylusファイルも提供されてるのでカスタマイズしやすいグリッドシステムです。

Responsive Grid System

Responsive Grid System

カラム数12、16、24のグリッドシステムが提供さてます。

BluCSS

BluCSS

シンプルなグリッドシステムです。

Columnal

Columnal

グリッドシステムの他にワイヤーフレームなども提供されてます。

Gridiculous

Gridiculous

12カラムのシンプルなグリッドシステムです。

Frameless

Frameless

シンプルなグリッドシステム。less、Sass形式で提供されてます。

Less+ Framework

Less+Frameworks

複数のカラム数のグリッドシステムが提供されてます。

Titan Framework

Titan Framework

12、16カラムのグリッドシステムです。CSSのみ提供されてます。

Ingrid

Ingrid

Sassファイルも提供されてます。

Gridism

Gridism

class属性が1/2、1/3のような書き方をするグリッドシステムです。

Simple Grid

Simple Grid

12カラムのシンプルなグリッドシステムです。

Responsive Aeon Framework

Responsive Aeon Framework

12カラムのグリッドシステム。lessファイルも提供されてます。

Toast

Toast

class属性が1/2、1/3のような書き方をするシンプルなグリッドシステムです。

MUELLER GRID SYSTEM

MUELLER GRID SYSTEM

class属性が1/2、1/3のような書き方をするシンプルなグリッドシステムです。

Susy

Sussy

Sass+Compassで使用するグリッドシステムです。

Proportional Grids

Proportional Grids

Flurid

Flurid

16カラムのシンプルなグリッドシステムです。

Micro Responsive Grid

Micro Responsive Grid

Sassファイルも提供されてます。

Unsemantic CSS Framework

Unsemantic CSS Framework

Sass+Compassで使用するグリッドシステムです。960 grid systemがベースになってます。

Singularity

singularity

Sassファイルで提供されてます。

Bedrock

Bedrock

18カラムのシンプルなグリッドシステムです。

996 Grid

996 Grid

12カラムのシンプルなグリッドシステムです。グリッド画像もついてます。

Jeet Framework

Jeet Framework

ジェネレータ

Gridpak

Gridpak

Responsify.it

Responsify.it

Tiny Fluid Grid

Tiny Fluid Grid

Variable Grid System

Variable Grid System

RWD Calculator

RWD Calculator

その他

Gridless

Gridless

グリッドシステムは自分で作成する形でその他レスポンシブWebデザインに必要なファイルのみ用意されてます。

The Goldilocks Approach to Responsive Web Design

The Goldilocks Approach

メディアクエリをemで作成。

Cool Kitten

Cook Kitten

パララックス対応。

Add Comment

本文

  1. […] レスポンシブWebデザインに使えるCSSフレームワーク&グリッドシステム http://design-spice.com/2013/05/19/rwd-frameworks-gridsystems/ 2013年上半期、チェックしておきたいCSSのフレームワークのまとめ […]

PAGE TOP