L5#1 – Swapping Bootstrap for Foundation within Laravel 5

This is the first in a short series of Laravel 5 explorative how-to’s. I am assuming you have Laravel installed, have plenty of PHP knowledge and are looking to get started quickly. I plan to keep things simple and easy, and obviously all the code will be available on my Github page.

Let’s go! I need to get used to Laravel 5’s new folder structure and layout with something nice and simple. I’ve noticed on install that it comes with a few default views for logging in & registering new users. This is all built using Twitter Bootstrap, Less and something called Laravel Elixir (that apparently makes Gulp and asset management really easy).

Lets strip out Bootstrap & Less and put Foundation & Sass in…

the gulpfile.js currently looks like this:

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

/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Less
| file for our application, as well as publishing vendor resources.
|
*/

elixir(function(mix) {
mix.less('app.less');
});

Ok. Fairly simples. The documentation says:

In the example above, Elixir assumes that your Less files are stored in resources/assets/less.

And in that folder, there is an app.less file that imports the bootstrap less files…

@import "bootstrap/bootstrap";

@btn-font-weight: 300;
@font-family-sans-serif: "Roboto", Helvetica, Arial, sans-serif;

body, label, .checkbox label {
font-weight: 300;
}

First things first… Lets change the Gulp file to look for a sass file instead. Really simple change:

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

/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Less
| file for our application, as well as publishing vendor resources.
|
*/
elixir(function(mix) {
mix.sass('app.scss');
});

I am assuming you’re on homestead with all the right nope packages installing. Go to the laravel install directory and type the following command

 Gulp 

This will run all of the Gulp commands you have set up in the gulpfile.js – which at the moment, is just one, the sass command. However, we have no sass file, no foundation and nothing else ready – so this should fail on us. The output I got was:

[15:15:11] Using gulpfile ~/laravelfive/gulpfile.js

[15:15:11] Starting 'default'...

[15:15:11] Starting 'sass'...

[15:15:13] Finished 'default' after 1.93 s

[15:15:13] Finished 'sass' after 1.93 s

What has that done? Nothing. But we know all the right node packages are installed, so thats a plus! next, lets make a sass directory in the resources folder and create a app.scss file with some simple test css… you can do this in the terminal..

mkdir resources/assets/sass

then let’s create the new sass file app.scss and add some test css…

 nano resources/assets/sass/app.scss 

will open up nano, then in there let’s change the body colour…

 body {background-color: black;} 

What have we done? Let’s refresh the app in the browser and see…

Screen Shot 2015-03-02 at 21.26.09

Easy eh? Now all we need to do is get Foundation’s sass files, put them in the right folder, import them with our app.scss file and change the default views a little! Easy Peasy…

The foundation less files can be found here: https://github.com/zurb/bower-foundation (download the zip in the bottom right). Create the new directory  resources/sass/foundation and put the contents of the sass folder their. It should now look like this:

  • resources/
    • assets/
      • sass/
        • app.scss
        • foundation/
          • foundation/
          • foundation.scss
          • normalize.scss

Now, let’s import that normalize and foundation sass file into our app.scss,which should look something like this:

@import "foundation/normalize";
@import "foundation/foundation";

Again, let’s run Gulp in the terminal and see what we get in the browser…

Screen Shot 2015-03-03 at 14.28.47

Alright! now we’re getting somewhere. I mean, that nav is all wrong, but that’ll be a super easy fix. At the moment, the nav is in the resources/assets/views/app.blade.php.. We want to get rid of the current nav completely and replace it with the following:

<nav class="top-bar" data-topbar role="navigation">

<ul class="title-area">
<li class="name">
<h1><a href="/">Laravel</a></h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
</ul>

<section class="top-bar-section">

<!-- Right Nav Section -->
<ul class="right">
@if (Auth::guest())
<li><a href="/auth/login">Login</a></li>
<li><a href="/auth/register">Register</a></li>
@else
<li class="has-dropdown">
<a href="#">{{ Auth::user()->name }}</a>
<ul class="dropdown">
<li><a href="/auth/logout">Logout</a></li>
</ul>
</li>
@endif
</ul>

<!-- Left Nav Section -->
<ul class="left">
<li><a href="/">Home</a></li>
</ul>
</section>
</nav>

I also got rid of the Roboto fonts link, as it’s not needed. Did you notice some we’ve missed at the bottom of that template? Javascript! Before we move onto the JS, check that the nav is looking better in your browser.

Screen Shot 2015-03-03 at 14.33.44

Loads better! Still a little jumbled up, but that’s a none issue we can come back to at the end when we’re getting rid of the rest of Bootstrap. Next priority – JS! Again, really easy. There are some files in the Foundation download we need for it to work properly – plus some nice little extras.

The documentation tells us that the Elixir ‘scripts’ function

assumes all paths are relative to the resources/js directory.

So, let’s create that. Then, from the foundation download, get the minified foundation.min.js file and the vendor directory and put it into the js directory. It should now look like this:

  • resources/
    • js/
      • foundation.min.js
      • vendor/
        • fastclick.js
        • jquery.cookie.js
        • jquery.js

Now we want Gulp to concatenate all these files and put it somewhere in the public directory. Again, super simple – update the gulpfile.js with the following:

elixir(function(mix) {
mix.scripts([
'vendor/jQuery.js',
'vendor/fastclick.js',
'foundation.min.js',
],'public/js/main.js');
});

This will generate a nice concatenated file in the public/js folder. We just need to call that script within the app template and initialise foundation. Your app template footer should look something like this:

@yield('content')

<script src="/js/main.js"></script>
<script>
$(document).foundation();
</script>

</body>
</html>

Two more steps – we want to replace all the bootstrap content within the auth/ views and the home.blade.php – to do this, exchange all

<div class="col-md-10 col-md-offset-1">

with this:

<div class="large-10 large-offset-1 columns">

And all these:

<div class="col-md-8 col-md-offset-2">

with these:

<div class="large-8 large-offset-2 columns">

You’ll also want to change all ‘alert’ classes to ‘alert-box’. And finally, lets add a little space to the container – in the app.scss file, change it to this:

@import "foundation/normalize";

@import "foundation/foundation";

.container, .container-fluid {
margin: 20px 0 0 0;
}

run ‘Gulp’ one last time in terminal and go and have a look at your site.

Screen Shot 2015-03-03 at 14.59.51

Done. How easy is Laravel Elixir and Gulp now? Very. Sure, there is plenty of clean up left, but I just wanted to get the main thrust of it down.

Feeling a little more comfortable with L5 now? I am. Next, let’s go make a user management package based on the default L5 auth system!