美しいバランスの黄金比をWebページに取り入れることができるシンプルなテーマファイル -Gold Bootstrap

Post on:2015年9月4日

Gold Bootstrapの特徴

Gold Bootstrapは、Bootstrap 3.xに黄金比を適用するテーマファイルです。

ライセンスは「Apache License, Version 2.0」で、個人でも商用でも無料で利用できます。

グリッドやさまざまな要素に、自然が生み出した神の比率「1:1.618」を適用します。

グリッドには、「.col-gold-lg」と「.col-gold-sm」を使うだけ黄金比のグリッドを利用できます。

見出しは、そのレベルごとに黄金比の倍率に基づいてサイズが設定されています。

ナビゲーション・フォーム・テーブル・タブなどのコンポーネントは、Bootstrapのデフォルトの「line-height」を変えることで、黄金比を適用しています。

使い方は簡単で、Bootstrapで作成したページに、外部ファイルを加えるだけで準備が完了です。

<head>
  ...
  <link rel="stylesheet" type="text/css" href="goldbootstrap/css/goldbootstrap.css">
</head>

黄金比のグリッドを使用する時は、下記のようにclassを使用します。

<div class="row">
  <div class="col-gold-sm">...</div>
  <div class="col-gold-lg">...</div>
</div>

見出しなどは、h1, h2タグを使用するだけで適用されます。

Bootstrapの基本的な使い方は、下記を参考にどうぞ。