Sassが使えるレスポンシブなCSSフレームワーク

MUELLER GRID SYSTEM

スマートフォンの普及率を考えると、これからのWebデザインに「レスポンシブ」は必須になってくるかもしれません。

レスポンシブに対応させるために幾つかの手法がありますが、私はメディアクエリを使っています。

今回は、メディアクエリを効率的に書くためのCSSフレームワークをご紹介します。

ちなみに、Sass+Compassを使えるもの限定です。

 

 

Foundation

Foundation- The Most Advanced Responsive Front-end Framework from ZURB

一番最初は有名なFoundationから使ってみました。

ダウンロードの方法は3つあり、全てのファイルをダウンロードするか、必要なファイルだけをダウンロードするか選ぶことが出来ます。

私はSassで使いたいので、もう一つのgemでダウンロードする方法を選びました。

 

ダウンロード方法です。

  1. コマンドプロンプトを起動する。
  2. [codesmall]gem install zurb-foundation[/codesmall]
  3. アップデートする場合は、gem update zurb-foundation
  4. compassをインストールしていない場合は、gem install compass
  5. cd プロジェクトを作成するフォルダ を指定する。
  6. compass create  -r zurb-foundation –using foundation

これでプロジェクトでSass+Compass+Foundationが使える環境になります!

 

実際にscssフォルダを開いてみると、app.scssと_setting.scssができています。

app.scssの中は全てインポートするファイルの設定です。

インポートしなくてよいものは、ここでコメントアウトしましょう。

_setting.scssも最初は全てコメントアウトされているので、デフォルト値を変更したい箇所だけコメントアウトを外して変更します。

ファイルの中で日本語を使いたい場合は1行目に、

@charset “UTF-8”;  と書きます。

 

実際に使ってみたら、とても簡単に綺麗な見栄えのデザインが出来上がりました。

DEMO SITE

(このデザインでWEBサイト作成依頼もお受けしています。カスタマイズも可能です。お問合せください。)

 

Gumby

Gumby - A Flexible, Responsive CSS Framework - Powered by Sass

Foundationと同じように高機能なフレームワークです。

高機能だから当たり前なんですが、ファイル数が多いです。自由にカスタマイズできるまで理解するには時間がかかりそう・・

 

Centurion

Centurion - Responsive CSS Framework

こちらも高機能なフレームワークです。

FoundationやGumbyに比べると、ファイル数は少なくすっきりしているかもしれません。

 


高機能は素晴らしいけど、もっと自由が欲しい!(ちゃんと理解すれば高機能でも自由にできるのかもしれないんですけど)

ここからは素っ気無いほどシンプルなフレームワークたちです。


 

helium

Helium, a lighter-than-air responsive front end

デザインは最小限です。でも、フォーム、ナビ、ドロップダウン、モーダル、などの機能はついています。

特にインストール作業も必要なく、Compassがインストールされていればあとはgithubからダウンロードするだけで使えます。

レスポンシブに対応させるためには、bodyタグのクラスに”responsive”を指定します。

 

inuit.css

Home - inuit.css - a powerful, scalable, Sass-based, BEM, OOCSS framework

ロゴのイヌイットくんが可愛いので、つい使ってみちゃいました。

とてもシンプルで好みっぽかったんですが、内部構造をよく理解するまでは至っていません。時間ができれば次はこれを使って作ってみたいなーと思ってます。

 

Susy

Susy- Responsive grids for Compass

Susyはフレームワークというか、グリッドシステムに特化しています。

このサイトをSusyを使って作ってみました。

シンプルで融通も効いて良い感じです。

トップページはこんな感じ → ko.a laborator

 

Susyもgemでインストールして使います。

インストール方法です。(Compassをインストールした後です。)

  1. コマンドプロンプトを起動する。
  2. gem install susy
  3. cd プロジェクトを作成したいフォルダを指定する
  4. compass create -r susy -u susy

これだけです。作成されたconfig.rbの先頭にrequire “susy”と書かれているはずです。

 

MUELLER GRID SYSTEM

MUELLER GRID SYSTEM

基本的にサイトデザインが自分の好みだ、とかシンプルだ、とかで「これ使ってみよ!」と決めちゃいます。

MUELLER GRID SYSTEMもサイトデザインが好みなので、次はコレです。

使ってみて良かったら、また紹介します。