美しいバランスの黄金比をウェブページのレイアウトに実用的に取り入れる -Golden Bootstrap

Post on:2012年10月31日

sponsors

黄金比を使ったグリッドを組み立てたり、エレメントに使ったりなど、美しいレイアウトを生み出すGolden Bootstrapを紹介します。

Golden BootstrapはBootstrapのプラグインで、「bootstrap.less」にファイルをインクルードして利用します。

// Grid system and page structure
...
@import "golden-bootstrap/golden-bootstrap.less"; // Add support for Golden Bootstrap

ファイルをインクルードすると、黄金比用の3つの変数を利用できます。

@goldenRatio:  1.6180339887498948482;
@goldenLarge:  1/@goldenRatio;
@goldenSmall:  1-@goldenLarge;

「@goldenRatio」で黄金比を定義し、1:1.6をsmallとlargeで利用します。

この黄金比をレイアウトに使用した実用的なデモもあります。
まずは、ページ全体のレイアウトから。

各カラムのHTMLは非常にシンプルです。

<div class="golden-small">...</div>
<div class="golden-large">...</div>

「small」が小さい方「large」が大きい方で1:1.6になり、全体の幅はラッパーで指定します。
カラムレイアウトのデモもFixedとFluidの2種類が用意されています。

グリッドやカラム以外に、エレメントのサイズにも適用できます。

2つのフォームエレメントがそれぞれ黄金比のサイズに