スタイルシートの Flexbox を使ってグリッドレイアウトが生成できる Sass Mixin「Flexbox Grid Mixins」をリリースしました。
グリッドを自由自在につくりたい
どういうものかというと、以下のサンプルのような HTML と Sass があると、サクッとグリッドの CSS をつくってくれます。
HTML
<div class="grid">
<div class="grid__col-3">
3
</div>
<div class="grid__col-9">
9
</div>
</div>
Sass
@import 'node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins';
$default-grid-gutter: 2%;
.grid {
@include grid($gutter: $default-grid-gutter);
> .grid__col-3 {
@include grid-col($col: 3, $gutter: $default-grid-gutter);
}
> .grid__col-9 {
@include grid-col($col: 9, $gutter: $default-grid-gutter);
}
}
CSS
.grid {
box-sizing: border-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
margin: 0 -1%;
}
.grid > .grid__col-3 {
box-sizing: border-box;
-webkit-flex: 0 0 23%;
-ms-flex: 0 0 23%;
flex: 0 0 23%;
margin: 0 1% 2%;
}
.grid > .grid__col-9 {
box-sizing: border-box;
-webkit-flex: 0 0 73%;
-ms-flex: 0 0 73%;
flex: 0 0 73%;
margin: 0 1% 2%;
}
グリッドシステムも作れます
ほんの数行の Sass コードでグリッドシステムがつくれます。
よく使われる 12 カラムのグリッドシステムはデフォルトでつくれることはもちろん。カラム数のオプションを指定すれば、いくつのカラム数のグリッドシステムも自由自在につくれます。
HTML
<div class="grid">
<div class="grid__col-12">
12
</div>
</div>
<div class="grid">
<div class="grid__col-1">
1
</div>
<div class="grid__col-11">
11
</div>
</div>
<div class="grid">
<div class="grid__col-2">
2
</div>
<div class="grid__col-10">
10
</div>
</div>
<div class="grid">
<div class="grid__col-3">
3
</div>
<div class="grid__col-9">
9
</div>
</div>
<div class="grid">
<div class="grid__col-4">
4
</div>
<div class="grid__col-8">
8
</div>
</div>
<div class="grid">
<div class="grid__col-5">
5
</div>
<div class="grid__col-7">
7
</div>
</div>
<div class="grid">
<div class="grid__col-6">
6
</div>
<div class="grid__col-6">
6
</div>
</div>
Sass
@import 'node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins';
$default-grid-columns: 12;
$default-grid-gutter: 2%;
.grid {
@include grid($gutter: $default-grid-gutter);
@for $i from 1 through $default-grid-columns {
> .grid__col-#{$i} {
@include grid-col($col: $i, $grid-columns: $default-grid-columns, $gutter: $default-grid-gutter);
}
}
}
CSS
.grid {
box-sizing: border-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
margin: 0 -1%;
}
.grid > .grid__col-1 {
box-sizing: border-box;
-webkit-flex: 0 0 6.33333%;
-ms-flex: 0 0 6.33333%;
flex: 0 0 6.33333%;
margin: 0 1% 2%;
}
.grid > .grid__col-2 {
box-sizing: border-box;
-webkit-flex: 0 0 14.66667%;
-ms-flex: 0 0 14.66667%;
flex: 0 0 14.66667%;
margin: 0 1% 2%;
}
.grid > .grid__col-3 {
box-sizing: border-box;
-webkit-flex: 0 0 23%;
-ms-flex: 0 0 23%;
flex: 0 0 23%;
margin: 0 1% 2%;
}
.grid > .grid__col-4 {
box-sizing: border-box;
-webkit-flex: 0 0 31.33333%;
-ms-flex: 0 0 31.33333%;
flex: 0 0 31.33333%;
margin: 0 1% 2%;
}
.grid > .grid__col-5 {
box-sizing: border-box;
-webkit-flex: 0 0 39.66667%;
-ms-flex: 0 0 39.66667%;
flex: 0 0 39.66667%;
margin: 0 1% 2%;
}
.grid > .grid__col-6 {
box-sizing: border-box;
-webkit-flex: 0 0 48%;
-ms-flex: 0 0 48%;
flex: 0 0 48%;
margin: 0 1% 2%;
}
.grid > .grid__col-7 {
box-sizing: border-box;
-webkit-flex: 0 0 56.33333%;
-ms-flex: 0 0 56.33333%;
flex: 0 0 56.33333%;
margin: 0 1% 2%;
}
.grid > .grid__col-8 {
box-sizing: border-box;
-webkit-flex: 0 0 64.66667%;
-ms-flex: 0 0 64.66667%;
flex: 0 0 64.66667%;
margin: 0 1% 2%;
}
.grid > .grid__col-9 {
box-sizing: border-box;
-webkit-flex: 0 0 73%;
-ms-flex: 0 0 73%;
flex: 0 0 73%;
margin: 0 1% 2%;
}
.grid > .grid__col-10 {
box-sizing: border-box;
-webkit-flex: 0 0 81.33333%;
-ms-flex: 0 0 81.33333%;
flex: 0 0 81.33333%;
margin: 0 1% 2%;
}
.grid > .grid__col-11 {
box-sizing: border-box;
-webkit-flex: 0 0 89.66667%;
-ms-flex: 0 0 89.66667%;
flex: 0 0 89.66667%;
margin: 0 1% 2%;
}
.grid > .grid__col-12 {
box-sizing: border-box;
-webkit-flex: 0 0 98%;
-ms-flex: 0 0 98%;
flex: 0 0 98%;
margin: 0 1% 2%;
}
オプションでさらに自由自在なグリッドに
Sass Mixin「Flexbox Grid Mixins」には、たくさんのオプション (引数) が用意されています。くわしくは、Mixins リファレンスを読んでもらえればと思いますが。グリッドのカラム数やカラム周りのマージン指定の他、flexbox のプロパティ、事前に用意したカラム (プリセットカラム) が生成できたり。サンプルページもありますので、参考に一度ご覧ください。いろんなレイアウトが組めると思います。
作った理由。なぜフレームワークではなくライブラリなのか
Sass Mixin ライブラリ「Flexbox Grid Mixins」を作った理由は、3つあります。
まず自由自在なグリッドレイアウトを作りたいと思ったこと。CSSフレームワークでは、12 カラムのグリッドシステムが定番でそれを元に作っていくのですが。もっとシンプルに、作りたいグリッドを作りたいカラム数でその場で柔軟に作っていきたい。
次にフロントエンド開発環境。昨今ウェブアプリの開発環境で起こっていることがフロントエンド開発環境に波及していること。一例を挙げると、Node.js とそのパッケージ管理 npm のもと、package.json で依存関係を解決することで、プロジェクトのポータビリティが向上したことが挙げられます。また gulp や grunt などのタスクライナーで自動化、効率化が図られています。スタイルシートも Sass などプリプロセッサを通じて生成することが多くなりました。
最後にCSSフレームワーク。はじめ開発者向けに作られた Bootstrap はバージョンを繰り返し、フルスタックで様々なプロジェクトに導入されるようになりました。さらに多種多様なCSSフレームワークがたくさん作られています。フレームワークを導入すると、便利に効率的な開発ができます。しかし、フレームワークを導入することは融通さを犠牲にすることもあり、バランスを取るのが難しくなります。とくにスタイルシートは最終的に静的ファイルに生成するため、事前に様々なことを想定していろいろなものを詰め込んでしまいます。次第に複雑さが増し柔軟性がなくなっていきます。それは同時にプロジェクトにも柔軟性がなくなることを意味します。フレームワークの次が求められています。
そしてフレームワークの先へ...
これからのフロントエンド開発を考えるに、いかに柔軟性をもちつつ、開発ができる環境を整えるかが重要になってきます。プロジェクトの中でパッケージ管理を行い、必要な機能や部品だけをライブラリという形で取り込み、Sass などプリプロセッサで組み合わせて使っていくコンポーメントベースに向かっていくのではないか。と仮説を立ててみました。これも昨今のウェブアプリの開発環境と同じ方向に向かうのでは。フレームワークとは言えないほど薄っぺらいフレームワークを利用してウェブサイトを開発していく未来に。
という未来を見据え、実現に一歩近づきつつ、Sass Mixin ライブラリ「Flexbox Grid Mixins」が産まれました。
個人的にはこれをなんとかしたい。class属性の嵐
フレームワークを使ったり、OOCSS をもとに実装すると、HTML の class属性 にいっぱい値を記述しがちです。ボクもよくやりがち。
CSS の設計で構造と見た目の分離をした分、HTMLの方にしわ寄せがいって、気づいたら構造と見た目の class属性、状態の class属性でいっぱいになってしまいます。
必要最小限の記述でシンプルな解決を目指しつつ、Sass Mixin「Flexbox Grid Mixins」を作ったところもあります。
サンプルを作ってみた感想
flexbox ベースのグリッドは、ブラウザのサポート状況から float ベースのグリッドから次第に採用が増えたり、移行されたりすると思います。現状は flexbox のだいたいは使えるが、ブラウザの実装によっては細かいところでまだまだ不十分なところがありますね。これからもいろいろ改良をしていきたいと思います。
ということで
是非 Sass Mixin「Flexbox Grid Mixins」を使ってウェブサイトを設計したり、グリッドシステムを作ったりしてみてくださいね。
Flexbox Grid Mixins
Flexbox Grid Mixins is Sass Mixins library to help you write well-structured, readable, maintainable, component-based grid using Flexbox (CSS Flexible Box Layout Module).
Flexbox Grid Mixins documentation: https://thingsym.github.io/flexbox-grid-mixins/
Mixins Reference and Example
GitHub: https://github.com/thingsym/flexbox-grid-mixins
License
The MIT License (MIT)
