Pure.css の Grid
米 Yahoo! が開発している Pure.css という CSS フレームワークがある。名前の通りピュアなため、どんなサイトにも適合するとのこと。
今回はその中の1つの構成要素の Grids について。
Grids
Twitter Bootstrap の Grid は12列だったが、この Pure.css は24列まで細分化されている。
使い方は簡単で、親要素に pure-g を指定し、子要素に pure-u-* とすると、指定した割合になると言うもの。また、 pure-u-sm-* や pure-u-md-* とすると Media Query を使用して幅の指定ができる。
* に指定できる数値は、あるものの約数になるものは除かれているため、少々わかりづらい。ただ 24 の場合は全ての指定ができるため、これを単純に使えば良いのかもしれない。具体的には以下の通り。
| 24 分割した際の指定方法 | その他の指定方法 | その他の指定方法2 | パーセント |
|---|---|---|---|
1-24 |
4.1667% | ||
2-24 |
1-12 |
8.3333% | |
3-24 |
1-8 |
12.5000% | |
4-24 |
1-6 |
16.6667% | |
5-24 |
20.8333% | ||
6-24 |
1-4 |
25% | |
7-24 |
29.1667% | ||
8-24 |
1-3 |
33.3333% | |
9-24 |
3-8 |
37.5000% | |
10-24 |
5-12 |
41.6667% | |
11-24 |
45.8333% | ||
12-24 |
1-2 |
50% | |
13-24 |
54.1667% | ||
14-24 |
7-12 |
58.3333% | |
15-24 |
5-8 |
62.5000% | |
16-24 |
2-3 |
66.6667% | |
17-24 |
70.8333% | ||
18-24 |
3-4 |
75% | |
19-24 |
79.1667% | ||
20-24 |
5-6 |
83.3333% | |
21-24 |
7-8 |
87.5000% | |
22-24 |
11-12 |
91.6667% | |
23-24 |
95.8333% | ||
24-24 |
1-1 |
1 |
100% |
特殊な分割として 5 で指定するものがある。これは単純に 24 の約数になりえないためと思われる。
1-5(20%)2-5(40%)3-5(60%)4-5(80%)5-5(100%)
さて、上記の表の通り 24 の場合以外は歯抜けになっているのがわかると思う。
例えば 10-12 としたい場合、 5-6 と指定しなくてはならない。Bootstrap 感覚では使えない。Bootstrap ライクに使うなら先述の通り常に 24 を使用すれば良い。
全ての約数で使用したいのであれば Fork して自分で追加せよということなのだろう。