Integrate Laravel and Foundation CSS Framework
Well, maybe this post is too “you don’t say”, but it was a problem for me as a newbie in Laravel Framework. I started using Laravel a week ago and didn’t know how to integrate Foundation into my project. I didn’t even know where to put my css code. 😀
So, for some newbie like me, here it is. Laravel put any public file such as css, javascript, assets, images, etc in public folder in the project. Extract all Foundation files in public folder of Laravel. After that your directory will be like this:
You can use this code as an initial template for your web:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]--> <html class="no-js" lang="en" > <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Foundation 5</title> <!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. --> {{ HTML::style('css/foundation.css') }} {{ HTML::style('css/normalize.css')}} <script src="{{ URL::asset('js/vendor/custom.modernizr.js') }}"></script> </head> <body> <!-- body content here --> <script src="{{ URL::asset('js/vendor/jquery.js') }}"></script> <script src="{{ URL::asset('js/foundation.min.js') }}"></script> <script> $(document).foundation(); </script> </body> </html> |
That code will be used in layout file, so you don’t have to load all foundation files repeatedly. The point is you should load the Foundation’s files with the right path. In the code above, Foundation’s files are loaded with this command:
|
1 2 3 4 5 6 7 8 |
<!-- CSS Files --> {{ HTML::style('css/foundation.css') }} {{ HTML::style('css/normalize.css')}} <!-- Javascript Files --> <script src="{{ URL::asset('js/vendor/custom.modernizr.js') }}"></script> <script src="{{ URL::asset('js/vendor/jquery.js') }}"></script> <script src="{{ URL::asset('js/foundation.min.js') }}"></script> |
That’s all. Now you can use Foundation CSS in your code. I use Laravel 4 and Foundation 5 btw. 🙂
Good luck! 😀
can you show me your directory list ? i still some confused to put directory files from foundation . Thx
Hi Nurul,
Thanks for your comment. I have updated the post. Hope it helps. 🙂
This is great!
Hi, anybody done this for Laravel 5 yet?
Would love to see someones file structure.
Cheerz
Honestly.. It’s exactly the same.
Thanks so much, this really helped me get started.
Thank’s. Help so much.
No creo que sea lo mas adecuado para un proyecto real, si quieren desarrollar aplicaciones realmente optimas deben usar la versión sass de foundation
I do not think that is the most suitable for a real project, if you really want to develop optimum applications must use the sass version of foundation