[Susy2] Susy2 によるレスポンシブレイアウトと Breakpoint

Susy2 でレスポンシブデザインを実現するために、Breakpoint をインストールします。

インストール

Breakpoint は、Compass の extension

% gem install breakpoint

もしくは下記の内容で bundle install します。

Gemfile
gem "breakpoint", "~>2.4.6"

config.rb で require します。

config.rb
# Require any additional compass plugins here.
require 'susy'
require 'breakpoint'

scss に import します。

_grids.scss
@import "breakpoint";

breakpoint のつかいかた

breakpoint を設定して Media Queries コードを生成する

今までのサンプルで基本的なレイアウト設定をこんな形で書いていましたので流用します。
なお、gutter-position: after だと、サンプルのようにレイアウトが乱れました。

_grids.scss
@import "compass";
@import "compass/reset";
@import "susy";
@import "breakpoint";
$susy: (
  columns: 12,
  gutters: 1/4,
  math: fluid,
  output: float,
  gutter-position: inside,
  container: 80%,
);
$contents: 8 at 5;
$aside: 4;
.container {
  @include container;
  @include clearfix;
}
.contents {
  @include span($contents);
}
.aside {
  @include span($aside);
}

breakpoint を利用します。

_grids.scss
.container {
  @include container;
  @include clearfix;
}
@include breakpoint(500px) {
  .contents {
    @include span($contents);
  }
  .aside {
    @include span($aside);
  }
}

こんな css が生成されました。

style.css
@media (min-width: 500px) {
  .contents {
    width: 66.10169%;
    float: right;
    margin-right: 0;
  }
  .aside {
    width: 32.20339%;
    float: left;
    margin-right: 1.69492%;
  }
}

ブラウザの横幅が 500px になると、一段組みになりました。

2014-08-02_susy_01

breakpoint を追加する

例えば横幅が広い場合は、パラグラフを2カラムにするようなレイアウトを作成してみる。

index.html
    <div class="contents">
      <h2>contents</h2>
      <p class="col1">lorem...</p>
      <p class="col2">lorem...</p>
    </div><!-- /.contents -->

1200px 時に col1, col2 を分割してみます。

_grids.scss
@include breakpoint(1200px) {
  .contents {
    @include span(8 at 5);
    .col1, .col2 {
      @include span(6);
    }
  }
  .aside {
    @include span(4);
  }
}

横幅が 1200px 以上

2014-08-02_susy_02

500px 以上、1200px 未満

2014-08-02_susy_03

500px 未満

2014-08-02_susy_04

※ 上記分かりやすくするために cssreset を外しました

susy breakpoint

shortcut ということらしい。

This is a shortcut for combining the breakpoint and with-layout mixins.

書き換えると下記のようになります。

_grids.scss
@include susy-breakpoint(1200px, 12) {
  .contents {
    @include span(8 at 5);
    .col1, .col2 {
      @include span(6);
    }
  }
  .aside {
    @include span(4);
  }
}

補遺