WinRoadのLaravel4初心者講座

次世代PHPフレームワークのLaravel4を初心者向けに解説して参ります。

Winroad徒然草の管理人がお届けします
Foundation4の導入

Foundation4の導入

このエントリーをはてなブックマークに追加

CSSフレームワークのFoundationが、バージョン4になって、モバイルファーストの観点から完全に書き直されたみたいです。そこで、Foundation4をlaravel4で使用する方法を調べてみたいと思います。

下記のサイトのDefaultCSSからFoundation4をダウンロードします。

http://foundation.zurb.com/download.php

laravel023

解凍したfoundation-4.2.2フォルダをf4名(任意)に変更します。

名称変更したf4フォルダをC:\xampp\htdocs\laravel\publicフォルダ内にコピーまたは、移動します。

次に、下記のページのHTML Page Markupの中身をコピーします。

http://foundation.zurb.com/docs/

laravel024

app/views/layoutsフォルダにf4フォルダを作成し、base.blade.phpファイルを作成し、上記のコピーした内容を貼り付けます。

作成したbase.blade.phpを下記のように修正します。

app/views/layouts/base.blade.php
<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="ja"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="ja"> <!--<![endif]-->

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Foundation 4</title>

{{ HTML::style('f4/css/normalize.css') }}
{{ HTML::style('f4/css/foundation.css') }}
{{ HTML::script('f4/js/vendor/custom.modernizr.js') }}

</head>
<body>

@yield('content')

{{ HTML::script('f4/js/foundation/foundation.js') }}
{{ HTML::script('f4/js/foundation/foundation.alerts.js') }}
{{ HTML::script('f4/js/foundation/foundation.clearing.js') }}
{{ HTML::script('f4/js/foundation/foundation.cookie.js') }}
{{ HTML::script('f4/js/foundation/foundation.dropdown.js') }}
{{ HTML::script('f4/js/foundation/foundation.forms.js') }}
{{ HTML::script('f4/js/foundation/foundation.joyride.js') }}
{{ HTML::script('f4/js/foundation/foundation.magellan.js') }}
{{ HTML::script('f4/js/foundation/foundation.orbit.js') }}
{{ HTML::script('f4/js/foundation/foundation.placeholder.js') }}
{{ HTML::script('f4/js/foundation/foundation.reveal.js') }}
{{ HTML::script('f4/js/foundation/foundation.section.js') }}
{{ HTML::script('f4/js/foundation/foundation.tooltips.js') }}
{{ HTML::script('f4/js/foundation/foundation.topbar.js') }}
{{ HTML::script('f4/js/foundation/foundation.interchange.js') }}<script type="text/javascript">// <![CDATA[
 document.write('<script src="f4/js/vendor/'
        + ('__proto__' in {} ? 'zepto' : 'jquery')
        + '.js"><\/script>');
// ]]></script><script type="text/javascript">// <![CDATA[
    $(document).foundation();

// ]]></script>

これで、Foundation4のベースになるテンプレートは作成できました。

そのうち、Foundation4の詳しい使い方も調べてみたいと思います。

 

« »

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です