Foundationで作ったサイト コンテンツを入れていきましょう

Foundation ヘッダー完成イメージ foundation

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

Foundationの実力やいかに

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

結果はこちら。

Foundation 完成イメージ

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

注目ポイントは

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にも色を付けたいケースが出てくると思いますのでやってみました。

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

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

コメント