Sassでinline-blockをベースにしたグリッドシステムを作成する

グリッドシステムといえばBootstrapやFoundationがよく使われていると思いますが、csswizardry (Harry Roberts)が公開しているcsswizardry-gridsが使い勝手がよさそうだったので、それをベースにグリッドシステムを作ってみました。

demo

See the Pen Grid layout class-name custom by ManabuYasuda (@gaku) on CodePen.

CODE PENで作成したデモです。ブレイクポイントを768px以上に指定しているので、PCで確認してください。

変数を定義する

Sassの特徴のひとつは変数を使用できる点です。今回定義している変数から重要なところをピックアップします。

// メディアクエリはmin-widthをベースにする

$mediaQuery--min: min-width !default;

$mediaQuery--max: max-width !default;

$mediaQuery--base: $mediaQuery--min !default;

// ブレイクポイントを定義する

$breakPoint--tiny: 400px !default;

$breakPoint--small: 768px !default;

$breakPoint--medium: 1000px !default;

$breakPoint--large: 1200px !default;

$breakPoint--small-max: ($breakPoint--small - 1px) !default;

// containerに使用するmax-width

$maxWidth--container: 1200px !default;

// グリッドの合計カラム数

$column--grid: 12 !default;

// ガターに使用する余白

$gutterWidth--grid: 15px !default;

$gutterWidth--grid-left: $gutterWidth--grid !default;

$gutterWidth--grid-right: $gutterWidth--grid !default;

// レスポンシブ用のクラスに使用するクラス名

$class--grid-tiny: --tiny !default;

$class--grid-small: --small !default;

$class--grid-medium: --medium !default;

$class--grid-large: --large !default;

$class--grid-smallMax: --smallMax !default;

ベーススタイルとmodifierを指定する

グリッドシステムに使用するスタイルを指定します。このグリッドシステムはfloatではなくinline-blockを使用しているので、floatやclearfixの指定はありません。inline-blockは要素を並べた時に要素間に余白ができてしまいます。これに関してはfont-sizeプロパティを使用しています。そのため<html>に対してページのベースになるfont-sizeをpxで指定しておく必要があります。max-widthとremを使用しているのでIE9以上になります。

html { font-size: 16px; }

/* コンテナブロックです。max-widthで最大幅を指定します。 */

.c-container {

width: 100%;

// 変数で1200pxに定義されている

max-width: $maxWidth--container;

margin-right: auto;

margin-left: auto;

}

/**

* `.c-grid-`に指定しているinline-blockにできる余白を取り除くためのclassです。

* `<html>にベースになるfont-sizeを指定してください。

* `.c-grid`の直接の親要素としてマークアップしてください。

* `<ul>`と`<ol>`でマークアップできるようにスタイルをリセットしています。

.c-row {

// <ul>や<ol>でも使用できるようにスタイルをリセット

display: block;

margin: 0;

padding: 0;

// いったんfont-sizeをリセット

font-size: 0 !important;

}

/* `.c-grid-`のベーススタイルです。 */

[class*=" c-grid-"],

[class^="c-grid-"] {

display: inline-block;

width: 100%;

// リセットしたfont-sizeを戻す

font-size: 1rem !important;

vertical-align: top;

}

modifierクラスを指定します。モディファイアというのはベーススタイルのバージョン違いです。余白や縦位置の指定、カラムを左右に移動させるクラスなどがあります。個人的にinline-blockをベースにしたグリッドシステムはvertical-alignの指定ができたり、高さの違うカラムでもレイアウトが崩れないのが利点なのかなと思っています。詳しくはdemoを確認してください。

/* `.c-row-`にはガターが、`.c-grid-`には余白が指定できます。 */

.c-row--hasgutter {

// .c-rowのスタイルを継承

@extend .c-row;

margin-right: - $gutterWidth--grid-right;

margin-left: - $gutterWidth--grid-left;

> [class*=" c-grid-"],

> [class^="c-grid-"] {

padding-right: $gutterWidth--grid-right;

padding-left: $gutterWidth--grid-left;

}

/* `.c-grid-`にvertical-align: middle;`を指定できます。 */

.c-row--middle {

> [class*=" c-grid-"],

> [class^="c-grid-"] {

vertical-align: middle;

}

/* `.row-`の幅に`.grid-`の幅の合計が足りない場合、要素間に均等な余白をつけられます */

.c-row--justify {

text-align: justify;

text-justify: distribute-all-lines;

&:after {

content: "";

display: inline-block;

width: 100%;

}

> [class*=" #{$prefix--component}grid-"],

> [class^="#{$prefix--component}grid-"] {

text-align: left;

}

/* `.c-push-`と`.c-pull-`のベーススタイルです。 */

[class*="c-push-"],

[class*="c-pull-"] {

position: relative;

}

pushとpullクラスはこの後にwidthを指定するクラスをif文で生成します。

メディアクエリ用の@mixinを作成する

レスポンシブ対応のグリッドシステムにするためにメディアクエリを指定します。Sassには@mixinと@contentという機能があり、ブレイクポイントなどの管理が変数でできるようになります。

@mixin mediaQuery--tiny {

@media screen and ($mediaQuery--base: $breakPoint--tiny) {

@content;

}

@mixin mediaQuery--small {

@media screen and ($mediaQuery--base: $breakPoint--small) {

@content;

}

@mixin mediaQuery--small-max {

@media screen and ($mediaQuery--max: $breakPoint--small-max) {

@content;

}

@ifでクラスを生成する

グリッドのwidth指定は8÷12×100%=66.66667%のように指定するカラム数を合計のカラム数で割ってパーセンテージに計算します。これをSassの@mixinと@ifというif文の機能を使って自動で計算させてクラスを生成します。さいごの@include grid-setup;でメディアクエリなしのクラスを生成しています。

// class指定を@ifで自動生成します。

// @mixinにすることで任意のメディアクエリの変数と組み合わすことができます。

@mixin grid-setup($media-class: "") {

@for $i from 1 through $column--grid {

.c-grid-#{$i}#{$media-class} {

// Sassのパーセンテージ関数

width: percentage($i / $column--grid);

}

.c-push-#{$i}#{$media-class} {

left: percentage($i / $column--grid);

}

.c-pull-#{$i}#{$media-class} {

right: percentage($i / $column--grid);

}

@include grid-setup;

メディアクエリ用に作成しておいた@mixinを使ってブレイクポイントごとにクラスを生成します。grid-setupという@mixinの引数$media-classに定義しておいた変数を指定することでクラス名を付け足します。

@include mediaQuery--tiny {

@include grid-setup("#{$class--grid-tiny}");

}

@include mediaQuery--small {

@include grid-setup("#{$class--grid-small}");

}

@include mediaQuery--small-max {

@include grid-setup("#{$class--grid-smallMax}");

}

これで以下のようなクラスが生成されます。

.c-grid-8 { width: 66.66667%; }

.c-push-8 { left: 66.66667%; }

.c-pull-8 { right: 66.66667%; }

.c-grid-9 { width: 75%; }

.c-push-9 { left: 75%; }

.c-pull-9 { right: 75%; }

@media screen and (min-width: 768px) {

.c-grid-8--small { width: 66.66667%; }

.c-push-8--small { left: 66.66667%; }

.c-pull-8--small { right: 66.66667%; }

}

マークアップ

グリッドシステムをマークアップする方法です。rowクラスの中にgridクラスを指定します。

</div>

</div>

3カラムの場合はメインコンテンツを真ん中に配置するため、pushとpullクラスで移動させます。pushでメインコンテンツを右に、pullでサイドバーを左に動かします。左サイドバーの2カラムも同じ要領で指定できます。

もとになるソースコードはGitHubで公開しています。修正をしている可能性があるので、必ずしも同じではない点に注意してください。Sassは色んなことができるのでおもしろいですね！

さいごに参考にしたソースコードを紹介します。

Feedlyで購読する Twitterで購読する