カスタマイズ性抜群!Sassに対応したCSSフレームワークがアツイ!

ハルエ


カスタマイズ性抜群!Sassに対応したCSSフレームワークがアツイ!

こんにちは。デザイナーのはるえです。

レスポンシブWebサイトを作成する際に重宝されているCSSフレームワークですが、「自由度が低い」「使わないUIパーツは邪魔になる」「カスタマイズするのに手間がかかる」「結果CSSファイルが肥大化してしまう」など、利用するうえでのデメリットも多々ありました。

実際フレームワークって、レスポンシブの大枠ができちゃってるし、コンポーネントが充実してる分あまり作り込む必要がないんで楽っちゃ楽なんですが、テンプレートに束縛されちゃデザイナーとしては面白くないしあまり頼りたくないってのも正直なところ。似たりよったりになるし。。

過去にCSSフレームワークの代表的存在「Bootstrap」を利用しましたが、柔軟性の低さに苦しめられたのを覚えています。
ですが最近はCompassのようにSassファイルが収められたシンプルでカスタマイズ性の高いCSSフレームワークが増えてきているようで、少し興味が湧いてきたので調べてみました。

そこで今回は、冒頭で挙げた弱点を補ってくれるSass対応のCSSフレームワーク「Gumby」をメインにご紹介させていただきます。

Sass対応のCSSフレームワーク「Gumby」

まずは公式サイトのご紹介。
Gumby

Gumbyとは

Gumbyはカスタマイズを前提とした設計になっているので、非常に柔軟性のあるフレームワークです。
Gumbyはダウンロード時に初期設定のカスタマイズができるので、事前にプロジェクトの構成をしっかり把握しておくといいでしょう。もちろんSassファイルで後から一括変更することも可能なので、そちらでカスタマイズすることをおすすめします。

カスタマイズダウンロードの一例

カスタマイズダウンロードの一例を見ていきましょう。

必要なCSSファイルやjavascriptファイルの選択

必要なCSSファイルやjavascriptファイルを選

パーツの色の選択

パーツの色を選択

ブレイクポイント(レイアウトが切り替わるポイント)の設定

ブレイクポイントの設定

デザインスタイルの選択が可能

デザインスタイルの選択
フラットデザインにするかリッチデザインにするかを選択できます。

充実したコンポーネント

コンポーネントも充実しています。

インジケーターやラベル、アラート用のスタイル

インジケーターやラベル、アラート用のスタイル

テーブル

テーブル
基本、テーブルに限らずフォームやタグなどもとってもシンプルです。カスタマイズ前提なのでそれも納得。

Gumbyで作ったサイト

Gumbyで作られたサイトをご紹介しますね。

Borderfree Global eCommerce

Gumbyで作ったサイト

Tilting Point – Independent Games Partner

Gumbyで作ったサイト

かっこいいじゃない。

ただSassのファイルの多さにびっくりしました。
用途別に分けられているので管理がしやすいのですが、初めはどこにどのファイルで設定がされているのか理解するのに時間がかかります。。

Gumby以外にも色々ある!Sass形式で作成されたフレームワーク

他にもSass形式で作成されたフレームワークがたくさんありましたので、ざっとご紹介いたします。

Bourbon NEAT

Burbon NEAT

Sassのmixinライブラリが詰まった「Burbon」で構築された可変グリッドのフレームワークです。

Foundation

Foundation

こちらも必要なCSSを選択してカスタマイズした状態でダウンロードすることが可能です。

Centurion

Centurion

コンポーネントが豊富な高機能なフレームワークです。

まとめ

いかがでしたか?
フレームワークの自由度を懸念していた方にとっても、カスタマイズを前提とした設計のものが増えてきているのはとても喜ばしいことですね!
できればSassやCompassをきちんと理解したうえで使ってみることをおすすめします。

SassやCompassについてはすでにLIGのデザイナー陣がたくさん記事を書いているので、そちらをご覧ください!

【Sassに関連するLIGブログ内の記事】

ハルエ
この記事を書いた人
ハルエ

デザイナーチーム

2012年入社

この記事を読んだ人におすすめ

こちらもおすすめ

最強のCSS設計 チーム開発を成功に導くケーススタディ

最強のCSS設計 チーム開発を成功に導くケーススタディ

  • 著者堀口 誠人
  • 価格¥ 2,376(2015/12/17 11:48時点)
  • 出版日2015/10/24
  • 商品ランキング171,870位
  • 単行本208ページ
  • ISBN-104797384557
  • ISBN-139784797384550
  • 出版社SBクリエイティブ