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

グリッドをはじめ、見出しやフォームやタブなどさまざまなコンポーネントに黄金比を適用し、美しいバランスのとれたレイアウトを生み出すBootstrapの無料のテーマファイルを紹介します。

黄金比を採用したBootsrapのテーマ

Gold Bootstrap -GitHub

Gold Bootstrapの特徴

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

サイトのキャプチャ

Gold Bootstra

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

神の比率「1:1.618」

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

サイトのキャプチャ

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

サイトのキャプチャ

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

サイトのキャプチャ

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

Gold Bootstrapの使い方

使い方は簡単で、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の基本的な使い方は、下記を参考にどうぞ。

top of page

©2017 coliss