前回は、アイコンフォントを使って連絡先を作ってみました。今回はいよいよ、コンテンツを入れていきたいと思います。（ダミーですけどね。）

Foundationの実力やいかに

/src/pages/index.htmlがコンテンツ本体のページです。とりあえず、よく使いそうなものを入れてみました。

<!-- body -->
<div class="content">
<div class="row">
<div class="medium-11 medium-centered columns">
<h1 class="subheader">見出し1</h1>
<h2 class="subheader">見出し2</h2>
<h3 class="subheader">見出し3</h3>
<h4 class="subheader">見出し4</h4>
<h5 class="subheader">見出し5</h5>
<h6 class="subheader">見出し6</h6>
<p>これは段落です。これは段落です。これは段落です。これは段落です。これは段落です。これは段落です。これは段落です。これは段落です。これは段落です。これは段落です。これは段落です。</p>
<ul class="no-bullet">
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
<ol>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ol>
<dl>
<dt>リスト</dt>
<dd>説明</dd>
<dt>リスト</dt>
<dd>説明</dd>
<dt>リスト</dt>
<dd>説明</dd>
</dl>
<blockquote>
これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。これは引用文です。
</blockquote>
<hr>
<p class="button">これはボタンです</p>
<p class="hollow button">これはボタンです</p>
<p class="callout">これはコールアウトです</p>
</div>
</div>
</div>
<!-- /body -->

結果はこちら。

ご覧のとおりCSSのResetはされていませんが、app.cssの冒頭に以下の記述がありますので、normalize.cssを読み込んでいるようです。

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
   * 1. Set default font family to sans-serif.
   * 2. Prevent iOS and IE text size adjust after device orientation change,
   *    without disabling user zoom.
   */

注目ポイントは

Foundationの機能もさりげなく使ってみました。

1. 左右にスペースをとるためにl.3-4で11カラムのGridの中に入れました。
2. 見出しに、.subheaderを付けると、薄い色にしてくれます。
3. リストは.no-bulletを付けると、リストマークを消してくれます。
4. ボタンは塗りつぶしと、枠線のみのボタンを作れます。Foundation標準のカラーパレットから色を選べます。
5. コールアウトという囲み罫があります。Foundation標準のカラーパレットで背景色を選べます。

今までCSSを駆使してやってきたことが、クラスを付与するだけで実現できます。素晴らしすぎです。

ヘッダー、フッター、Global naviも

ヘッダーとフッターを6:6のカラムで分けていましたが、バランスを整えて8:4にしました。

さらに、ヘッダーとフッター、Global navigationにも色を付けたいケースが出てくると思いますのでやってみました。

/* ヘッダー　*/
.header {
	background: $primary-color;
	color: #fff;
	padding: 25px;
}
/* Global Navigation */
.top-bar,.top-bar-left,.top-bar-left li,.title-bar,ul.menu {
	background: $secondary-color;
}
.top-bar-left li a {
	color: #fff;
}
/* フッター */
.footer {
	background: $alert-color;
	color: #fff;
	padding: 25px;	
}

色指定は、Foundationのカラーパレットに沿って用意されている変数で指定できます。メニューの「Three」が青くなっていますが、これも.activeクラスを付与するだけで実現できます。

<ul class="vertical medium-horizontal menu">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li class="active"><a href="#">Three</a></li>
</ul>

ただ、上下の枠が残ってしまってかっこ悪いですね。前のVersion.5では、枠は無かったと思うのですが。