Adding Foundation 5 to a Laravel 5 Application

Posted November 10, 2015 |

Last month I wrote about getting started with Laravel 5. In that post, I outlined the steps to get a bare bones Laravel application up and running. Now … I don’t know about you, but I rarely have the need for a bare bones website of any sort.

Every developer has their own framework that they like to use on the websites they develop, whether it’s a homegrown framework or something that someone else has developed and made available for other developers to use. My framework of choice is Foundation. I’ve been using it for the past few years and have come to really like it. I gave Bootstrap a look, but wasn’t all that fond of it.

I am also a huge fan of SASS (or SCSS). The ability to use variables when setting up your styles … what developer doesn’t want to be able to do that?

The Foundation documentation shows you how to add it to a project. But the instructions expect you to use Grunt, which I’m not all that big of a fan of. Now don’t start screaming at me about how awesome Grunt is. I understand that some developers swear by it. I just haven’t been able to wrap my head around it. I like using Compass to compile my SASS, especially for all of the mixins that are available with it.

This post outlines how to include Foundation into a Laravel application using Compass, Bower, and Bundler, with a little Laravel Elixir thrown in the mix. If these tools aren’t your cup of tea, then this post isn’t for you.

I understand that there are many ways to incorporate Foundation into an application. The method I’m outlining has worked the best for me. I’ve used a similar setup, minus Elixir, for some of the WordPress themes that I’ve developed.

In order to add Foundation 5 to a bare bones Laravel 5 application, you will need to add a few files to the root of your project.

.bowerrc

This is where you specify where you want your Bower component files to be downloaded to.

{ "directory": "bower_components" }

bower.json

This will pull in the Compass template for working with SASS. It is the official package from Zurb.

{
  "name": "foundation-compass-app",
  "version": "0.0.1",
  "private": "true",
  "dependencies": {
    "foundation": "zurb/bower-foundation"
  }
}

Gemfile

This is where you specify the version of SASS and Compass that you want to use in your project. If you are using any other Ruby Gems that you need specific versions of, you would include them here as well.

source "https://rubygems.org"

gem "sass", "~> 3.4.0"
gem "compass", "~> 1.0"

config.rb

This is where you set up how you want your SASS to compile. I’ve included the version that I generally use. You can adjust the various directory paths to match your development environment. Since I have more than one theme (an admin theme and a public facing theme), I put my SASS files in the site root and structure my /scss/ directory so that the compiled stylesheets will be generated in the appropriate theme.

# Set the path to where the Foundation SASS files are located in your project:
add_import_path "bower_components/foundation/scss"

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = ""
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "js"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
output_style = :compact

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

# To disable debugging comments that display the original location of your selectors.
line_comments = false

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

scss/_settings.scss

To get the most up-to-date settings, grab the contents of the file on Github. Put this file in the location that is most appropriate for your setup. Since I am developing multiple themes, I include a base copy of it in each of the theme SASS directories so that I can customize each theme appropriately.

scss/app.scss

As with the _settings.scss file, put this file in the location that is most appropriate for your setup.

@import "settings";
@import "foundation";

// Or selectively include components
// @import
//   "foundation/components/accordion",
//   "foundation/components/alert-boxes",
//   "foundation/components/block-grid",
//   "foundation/components/breadcrumbs",
//   "foundation/components/button-groups",
//   "foundation/components/buttons",
//   "foundation/components/clearing",
//   "foundation/components/dropdown",
//   "foundation/components/dropdown-buttons",
//   "foundation/components/flex-video",
//   "foundation/components/forms",
//   "foundation/components/grid",
//   "foundation/components/inline-lists",
//   "foundation/components/joyride",
//   "foundation/components/keystrokes",
//   "foundation/components/labels",
//   "foundation/components/magellan",
//   "foundation/components/orbit",
//   "foundation/components/pagination",
//   "foundation/components/panels",
//   "foundation/components/pricing-tables",
//   "foundation/components/progress-bars",
//   "foundation/components/reveal",
//   "foundation/components/side-nav",
//   "foundation/components/split-buttons",
//   "foundation/components/sub-nav",
//   "foundation/components/switches",
//   "foundation/components/tables",
//   "foundation/components/tabs",
//   "foundation/components/thumbs",
//   "foundation/components/tooltips",
//   "foundation/components/top-bar",
//   "foundation/components/type",
//   "foundation/components/offcanvas",
//   "foundation/components/visibility";

Once you have these files included in your project and customized for your application, you will need to run a couple of commands via the command line. These commands will download the Foundation files that you need.

bower install
bundle install

You will also need to run the following command via command line to compile your Foundation SASS.

bundle exec compass compile

At this point, all of your Foundation goodness will be living in the /bower_components/ folder in your site root (unless you modified your .bowerrc file to put them elsewhere). That’s all well and good, but you’re going to need those files where your application can use them. The first option is to manually copy the files into your /public/assets/ directory, which I admit was the way I did things at first. But then I discovered Laravel Elixir and realized that these tools are here to make my job a little less painful.

I’m only using Elixir at this point to copy over the JavaScript files that I need to get Foundation up and running and merge them into a single file for production. I know there’s more you can do with it, like compile your SASS files, but I’m still learning. 🙂 

In order to utilize Elixir, you will need to have Gulp installed on your machine. Once you have that installed, you need to create a gulpfile.js file in the root of your project. Here’s the Gulp file that I’m using to copy my JavaScript to my public directory.

var elixir = require('laravel-elixir');

elixir(function(mix) {
    
	// copy Foundation javascript files to the resources directory
	mix.copy('bower_components/foundation/js/foundation', 'resources/assets/js/foundation');

	// copy the other javascript files being used to the public assets directory
	mix.copy('bower_components/foundation/js/vendor/fastclick.js', 'public/assets/js/fastclick.js');
	mix.copy('bower_components/foundation/js/vendor/modernizr.js', 'public/assets/js/modernizr.js');
	mix.copy('bower_components/foundation/js/vendor/jquery.js', 'public/assets/js/jquery.js');
	
	// merge the Foundation files being used into a single file and put it in the public assets directory
	mix.scripts([
			'foundation/foundation.js',
			'foundation/foundation.alert.js',
			'foundation/foundation.dropdown.js',
			'foundation/foundation.offcanvas.js',
			'foundation/foundation.reveal.js',
			'foundation/foundation.topbar.js',
		], 'public/assets/js/foundation.js');
    
});

Once you have this file all set up, you will need to run another command via command line.

gulp

Or if you want to minify your javascript, add a flag.

gulp --production

One last file that you are going to need in order to get Foundation up and running is the app.js file. This is the file that initializes Foundation and all of its scripts. It’s a simple file. It really only needs one line.

$(document).foundation();

I’ll leave the inclusion of the app.js, app.css, and Foundation related files in your theme up to you. You’re a smart developer. 😀