How to add Zurb Foundation 5 to a Laravel 4 App

I needed to rebuild a simple game timer app and figured it would be a great way to get my feet wet with Laravel. I’ve heard great things about it and wanted to give it a try. I also wanted to upgrade the application to use Zurb Foundation 5, since I already used 4 with the application and wanted to use the latest and greatest. Unfortunately, there aren’t any composer packages or ruby gems or other handy installers to get Zurb into my Laravel project. It turns out it isn’t as hard as you might think.

To add Zurb Foundation 5 to your Laravel 4 project, you simply need to do the following:

  1. Follow the Laravel Quickstart to start a fresh application if you don’t have one already.
  2. Download Zurb Foundation 5 from their site. Note: Don’t install the Sass version. This may be a deal breaker for you, but not for me.
  3. Copy the css resources into the public/css folder in your Laravel project.
  4. Copy the javascript resources into the public/js folder in your Laravel project. This will wind up having a subfolder for foundation and vendor, but that is okay. All of the scripting paths are relative and can find things without a hassle.
  5. Edit your app/views/layout.blade.php file so that it looks something like this:[gist ae09983bf26427908e9e]

That’s all there is to it! You can see where there are yield statements for title, content, and custom script imports, as well as a basic top bar with navigation in place. You can customize this to your heart’s content.

Enjoy Laravel 4 and Zurb Foundation 5 quick and easy!

…Proudly published using Desk PM

What are your 10 bits on the matter? I want to know!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s