CODEWITHSUNDEEP
phplaravelgulplaravel-5bower
Leah P. Matthew
Leah P. Matthew

Reputation: 1

Laravel 5 with Foundation 5

I installed foundation via bower under "resources/assets/bower_components".

I don't know what to do with the _settings.scss file and where to put it.

My app.scss file just has:

@import "../bower_components/foundation/scss/foundation";
@import "../bower_components/foundation/scss/normalize";

I can't get the javascript to work. I don't know why. In my gulpfile I've combined all the javascript files into one file app.js.

Here is my gulpfile.

elixir(function(mix) {

var bowerPath = "resources/assets/bower_components/";

mix.sass(
    [
        "app.scss"
    ],
    "public/css",
    {
        includePaths: [
            bowerPath + "foundation/scss"
        ]
    }
)
    .scripts(
    [
        "jquery/dist/jquery.js",
        "fastclick/lib/fastclick.js",
        "jquery.cookie/jquery.cookie.js",
        "jquery-placeholder/jquery.placeholder.js",
        "foundation/js/foundation.js"
    ],
    "public/js/app.js",
    bowerPath
);
});

Here is my current project structure: http://postimg.org/image/jhppu3lab/0789eba0/

Someone please help. I'm stuck and I think I've done something wrong along the way. If someone can walk me through installing Foundation 5 to Laravel 5 from a fresh Laravel project, that would be awesome!

Upvotes: 0

Views: 398

Answers (2)

ceejayoz
ceejayoz

Reputation: 180065

For JavaScript, we used mix.scripts's third argument to set the base path to the application root, which seemed to work better.

mix.scripts(sharedJs.concat([
  'bower_components/jquery/dist/jquery.js',
  'bower_components/fastclick/lib/fastclick.js',
  'bower_components/jquery.cookie/jquery.cookie.js',
  'bower_components/jquery-placeholder/jquery.placeholder.js',
  'bower_components/foundation/js/foundation.js'
]), 'public/js/app.js', './');

Upvotes: 0

Peter
Peter

Reputation: 2711

Sometimes using bower is much more trouble than SIMPLE manual solutions.

I am using the below solution:

I added these lines to my master template:

@if( \App::environment() == 'local')   
  @include('layouts.files_local')
@else
  @include('layouts.files_cdnjs')
@endif

Inside the files_local I have 

{!! HTML::script('js/jquery-2.1.4.min.js') !!}
{!! HTML::script('js/uikit.min.js') !!}
{!! HTML::style('css/uikit.almost-flat.min.css') !!}

And inside filescdnjs I have

{!! HTML::script('//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js') !!} 
{!! HTML::style('//cdnjs.cloudflare.com/ajax/libs/uikit/2.20.2/css/uikit.almost-flat.min.css') !!}
{!! HTML::script('//cdnjs.cloudflare.com/ajax/libs/uikit/2.20.2/js/uikit.min.js') !!}

  1. This was my workaround for connection problems when working locally. If you work on-line on a reliable conection, it is enough to use only CDNJS versions

  2. I used UI-Kit in this example as after prolonged development f three CSS frameworks (next to Semantic-UI) I concluded that it is the best solution in my case. Replace my UI-kit with Foundation and the job would be done.

Upvotes: -1

Related Questions