前回は、ページ全体をセンタリングしました。さらに各部を作っていきます。まずは、ヘッダーとフッターです。
1カラムのページですが、企業ページなどでよく見るような連絡先をヘッダーとフッターに入れてみます。

FoundationのGridでヘッダーとフッターのみ2カラムにして、狭い画面ではタテに並べます。レスポンシブというと大げさですが、これもCSSフレームワークを使うと何も考えずに対応できます。

partialsで分解してある各部を修正していきましょう。
⇒ Partialsの復習はこちらをご覧ください。

/src/partials/header.htmlを編集します。

<div class="row">からがGridです。全体で12カラムのところを6カラムずつに分けているイメージです。

<!-- header -->
<div class="header">
<div class="row">
  <div class="medium-6 columns">foundation-site template</div>
  <div class="medium-6 columns">連絡先</div>
</div>
</div>
<!-- /header -->

同じく/src/partials/footer.htmlを編集します。

<!-- footer -->
<div class="footer">
<div class="row">
  <div class="medium-6 columns">&copy; foundation-site template</div>
  <div class="medium-6 columns">連絡先</div>
</div>
</div>
<!-- /footer -->

バランスは再考の余地がありますが、こんな感じになります。

ブラウザの幅を狭めていくとタテに並びます。