Bourbon Neatのvisual-gridをレスポンシブ化する方法

Bourbon Neat

スマートフォンサイズの画面でもvisual-gridを表示させたい

Boubon Neatのvisual-gridはとても便利ですが、下のようにスマートフォンサイズの画面デザインをしている時にも表示できたら良いですよね。

visual-gridをスマホで表示した画像

やり方

scssやsassでvisual-gridの設定をする

scssやsassで以下のようなvisual-gridの設定をする必要があります。ファイル名は何でもよいのですが、ここでは_grid-settings.scssとしておきます。

_grid-settings.scss

1
2
3
4
5
6
7
8
9
@import "neat-helpers";

$mobile: new-breakpoint(max-width 480px 4);
$laptop: new-breakpoint(min-width 481px 12);

$visual-grid: true;
$visual-grid-index: front;
$visual-grid-color: yellow;
$visual-grid-opacity: 0.2;

読み込む場所

通常scssやsassではall.scss等のメインのファイルから全てのパーシャルを以下のようにimportしていると思います。

1
2
3
4
5
6
7
@charset "utf-8";
@import "font-awesome";
@import "bourbon";
@import "grid-settings";
@import "neat";
@import "layout/*";
@import "modules/*";

4、5行目のように、必ず@import "neat";よりも前にimportしてください。そうでないとvisual-gridは表示されません。

これで設定は終わりで、PCサイズの画面の時は以下のようにvisual-gridが12カラムで表示され、スマホサイズの時は4カラムで表示されます。

visual-gridをスマホで表示した画像

改めて_grid-settings.scssの解説

先ほども書きましたが、ファイル名は任意に決めて良いし、all.scssなどのメインのファイルに直接書いてもOKです。ポイントだけ説明します。
(ちなみにBittersを使っている方は、base/_grid-settings.scssというファイルが生成されるので、そこに書くのがオススメです。)

3、4行目

1
2
$mobile: new-breakpoint(max-width 480px 4);
$laptop: new-breakpoint(min-width 481px 12);

このbrekpointを作る部分がない、もしくは@import "neat";以降にあると、以下のようにスマホでも12カラムで表示されてしまいます。
なので、この3、4行目がここにあります。

visual-gridをスマホで表示した画像(12カラム)

なお、このあたりを修正したり増やしたりして、カラム数やbreakpointを変えたり、タブレット用のbreakpointを増やしたりすることが可能です。

1行目

1
@import "neat-helpers";

変な話ですが、3、4行目のnew-breakpoint()というメソッドは実はNeatで定義されるものなので、neatをimportする前の段階のここでは通常使えません。なので、1行目で@import "neat-helpers";をしてメソッドを使えるようにしているのです。

6行目

1
$visual-grid: true;

visual-gridを有効にしている部分です、通常はこの行のみコメントアウトしておきます。そして、visual-gridを表示したい時だけ、コメントを外すという運用が良いと思います。

7~9行目

1
2
3
$visual-grid-index: front;
$visual-grid-color: yellow;
$visual-grid-opacity: 0.2;

visual-gridの色等の見た目を決める部分です。詳しくは公式ドキュメントをごらんください。

参考

羊毛や小麦