Help us understand the problem. What is going on with this article?

CSSフレームワークBourbon超速入門

More than 3 years have passed since last update.

はじめに

やあ (´・ω・`)

今回Bourbon(バーボン)というcssフレームワークを初めて触ってみました。特長やら何やらをざっとまとめてみましたので、興味のある方の参考にでもなれば幸いです。

なお説明はすべてバージョン4.2.4を想定しています(2015/08/31最新)

目次

  • Bourbon(バーボン)とは
  • Bourbonに依存するフレームワークの紹介
  • 機能の紹介
  • 使い方

Bourbon(バーボン)とは

sass用のmixin/functionsをまとめたcssのフレームワークです。基本@includefuncName()のように使うので、htmlに依存しません。まぁcompassと同じようなものかと思います。

公式サイト
http://bourbon.io/

特長

  • 軽量でシンプル
  • Neat, Bittersといったcssフレームワークの基になる
  • コンポーネントやモジュールといった複数のタグやプロパティを組み合わせて使用するようなものはない

Bourbonに依存するフレームワークの紹介

Neat

http://neat.bourbon.io/

グリッドシステムを提供するcssフレームワーク。Bourbonと同じように基本@includeとして使うので、htmlに依存しません。

現在のバージョン4.2.4では、Bourbon単体でもグリッドシステムを利用できるfunctionsもありますが、次回メジャーアップ時に削除され、Neatを使うよう推奨されています。

Bitters

http://bitters.bourbon.io/

タイポグラフィ、リスト、テーブル、フォームといったベーススタイルを提供するcssフレームワーク。normalize.cssを少し拡張したようなものでしょうか。同じくhtmlに依存しません。

Refills

http://refills.bourbon.io/

こちらはフレームワークではなく、BourbonとNeatを使ってこんな感じに書くとこういったものができるよ、というコンポーネントやパターンなどを説明したスタイルガイド・カタログのようなものです。

機能の紹介

Bourbonは、大きく分けてMixin, Functions, Add-onの3種類の機能を提供します。それぞれ概要と個人的によく使いそうなものをピックアップしてみます。あまり数は多くないので、詳細は公式ドキュメントを見ていただければと思います。

Mixin

主にベンダープレフィックスの追加を行ないます。@include NAME()とするだけで、-webkit-やら-moz-やらプレフィックスをプロパティに付与してくれます。プレフィックス自体の制御は以下のように設定できます。

global-prefix.scss
$prefix-for-webkit:    true;
$prefix-for-mozilla:   true;
$prefix-for-microsoft: true;
$prefix-for-opera:     true;
$prefix-for-spec:      true;

よく使いそうなもの

  • Animation
  • Flexbox
  • Font Face
  • Keyframes
  • Linear Gradient
  • Transform, Transition

Functions

主にコンバートや変換などを処理します。グリッドシステムはNeatへ移動するため、個人的には多用することは少ないかもしれません。ただ色の変更は使いそうなので、メモしておきます。

  • tint(COLOR, 0%): %分の白を加える
  • shade(COLOR, 0%): %分の黒を加える

sassのlighten() / darken() は明度を調整するのに対して、tint() / shade()は白黒を混ぜて色を調整します。参考として画像を作成してみました。

colors.png

Add-on

色々とショートハンドな書き方をすることができます。個人的にはこれが一番うれしいです。無理やり分類すると以下のようなことができます。

  • borderやmargin、positionなどの細かい制御を一行で書ける
  • よく使うスタイルを一行で書ける
  • 複雑なeasingを簡単に書ける
  • プレフィックスの細かい制御
  • inputタグの属性一括指定

borderやmargin、positionなどの細かい制御を一行で書ける
何と言っても特定の値を無視するnullが良いです。従来のような「この値だけは上書きしたくないからショートハンドは使えないなぁ」ということが避けられます。

@include border-color(red green null blue);
  // border-top-color: red;,
  // border-right-color: green;
  // border-left-color: blue;

@include margin(null 10px 3em 20vh);
  // margin-right: 10px;
  // margin-bottom: 3em;
  // margin-left: 20vh;

@include position(relative, 0 null null 10em);
  // position: relative;
  // top: 0;
  // left: 10em;

よく使うスタイルを一行で書ける

// clearfix
@include clearfix;

// hide text(画像置換)
@include hide-text;
background-image: url(logo.png);

// retina対応
@include retina-image(home-icon, 32px 20px);

// size(width,heightを一度で指定)
@include size(2em); // width: 2em; height: 2em;

// 三角形の作成
@include triangle(12px 6px, gray lavender, up-left);

複雑なeasingを簡単に書ける
jQuery UIのeasing functionsと同じ動きを、cssの3次ベジェ曲線(cubic-bezier())を使って再現してくれます。

@include transition(all 5s $ease-in-circ);
  // -webkit-transition: all 5s cubic-bezier(0.6, 0.04, 0.98, 0.335);
  // -moz-transition: all 5s cubic-bezier(0.6, 0.04, 0.98, 0.335);
  // transition: all 5s cubic-bezier(0.6, 0.04, 0.98, 0.335); 

プレフィックスの細かい制御

@mixin box-sizing($box) {
  @include prefixer(box-sizing, $box, webkit moz spec);
}

inputタグの属性一括指定

#{$all-text-inputs} {}
#{$all-text-inputs-focus} {}
#{$all-text-inputs-hover} {}
#{$all-text-inputs-active} {}

/*
input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
...
input[type="color"]:focus,
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
...
input[type="color"]:hover,
input[type="date"]:hover,
input[type="datetime"]:hover,
input[type="datetime-local"]:hover,
...
*/

使い方

単純に使う場合は、インストール(ファイルをダウンロード)してきて、app/assets/stylesheets/内を作業ディレクトリに置き、.scss内に@import "{PATH}/bourbon";を記述した上でコンパイルすればOKです。

gulpを使う場合

  • gulp-sassを使う場合は、node-bourbon, node-neatを利用します
  • gulp-ruby-sassを使う場合は、オプションでbourbon, nestを指定するとよいそうです(未確認)

参考
http://dev.classmethod.jp/client-side/javascript/gulp-solo-adv-cal-09/

おわりに

htmlに依存しないという点でも、思ったより学習コストは低そうです。今まで私がcssフレームワークを採用する時は、デザイン性を重視しない(orスピード重視)の場合はBootstrap、それ以外はCompassという使い分けをしてきましたが、これからはBourbon/Neat/Bittersを基に、ガシガシとコードを書いていくのも選択肢として取り入れてみようかなと思いました。

        ∧_∧
        (`・ω・) シュッ
        (つ と彡 /
          /   /
        /    /
      / //  /
    / 旦   / ツツー
  /       /
nekoneko-wanwan
Webデザイン、フロントエンド開発を主にやっています。真面目なものから、変なものまで。色々な記事を投稿していければと思います。
hotstartupinc
「ペライチ」を開発する会社です。
https://peraichi.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした