グリッドシステム

Bootstrapのグリッドシステムを導入しました。
決められたclassを書くだけで簡単にレスポンシブ対応のレイアウトを作ることが出来ます。
・グリッドシステムを使ってコーディングをする
・グリッドシステムを使ってデザインをする

box-sizing: border-box;

グリッドシステムを導入したことにでボックスの定義が変わりました。
今までは width + padding + border = ボックスの幅 でしたが、
本テンプレートでは width = ボックスの幅 となり、paddingやborderはボックスの内側に含まれるようになっています。
ボックス幅をいちいち計算しなくて良いので、あまり崩れを気にせず作業できます。

命名規則

今までは単語を「_」だけでつないでいましたが、BEMのルールに近い考え方の命名規則を採用しました。
Block__Element + is-Modifier の形で表現されます。
Block…かたまり
Element…かたまりの中のパーツ
is-Modifier…上記が基本状態と異なる場合

例）
class="news-list"（Blockが複数単語の場合は[-]でつなぐ）
class="news-list__item"
class="c-btn is-primary"
class="u-mbm u-opa"

Font Awesome

アイコンフォントを導入しました。
以下の様なアイコンをソースをコピペするだけで使えます。

ソースURL http://fontawesome.io/icons/
デザイン用チートシート http://fontawesome.io/cheatsheet/

Layout内のファイル名が変わりました

それぞれにプレフィックスをつけました。