FoundationのGrid Centered Columnsでページをセンタリングします

Foundation Centered Columns
,

さらにサイトの制作を進めていきます。FoundationのGridを利用して1カラムのページを組み立てていきます。
まず、FoundationというかCSSフレームワークの一番の使いどころだと思ってますが、ページ全体をセンタリングします。
wrappであっちへ寄せたり、こっちへ寄せたり苦労していたのがウソのような便利な機能です。

/src/layouts/default.htmlを修正します。

  1. l5. lang設定をjaに書き換えます。
  2. l17-18 FoundationのGridでCentered Columnsを利用します。11カラムでセンタリングします。
  3. l23-24 上のタグを閉じます。

    4. FoundationのGridの説明は以下です。

    http://foundation.zurb.com/sites/docs/grid.html

    {{!-- This is the base layout for your project, and will be used on every page. --}}

<!doctype html>
<html class="no-js" lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation for Sites</title>
    <link rel="stylesheet" href="{{root}}assets/css/app.css">
  <!-- [if lt IE 9]>
    <script src="bower_components/html5shiv/dist/html5shiv.js"></script>
  <![endif]-->
  </head>
  <body>
  <div class="row">
    <div class="medium-11 medium-centered columns">
    {{> header}}
    {{> navigation}}
    {{> body}}
    {{> footer}}
    </div>
  </div>
    <script src="{{root}}assets/js/app.js"></script>
  </body>
</html>