How to integrate laravel with materializecss
|Integrating Materializecss with laravel – Materializecss is modern responsive framework which is based on material design, It’s easy to work with and very response. Here we are going to learn how to integrate laravel with materializecss and display a demo page showing successful integration.
- Let’s get our hands dirty with coding.
- Open your command prompt and navigate to the directory where you want to place your project.
- Run the following command.
- This command will create a new project called app.
- Alternatively you can use composer to create a new laravel project by running the following.
- To test if the project was successful created run the following command.
- Open your browser and type localhost:8000 and you will see your project being displayed.
- The next thing is to generate authentication key.
- Run the following command in your project directory.
- Download materializecss from materializecss website
- Unzip it after downloading
- Copy and paste the css and js to our laravel project.
- Open your laravel project create a new folder under public and name it assets.
- Create 2 more folders namely css and js in your assets folder.
- Copy the css and js from the materialize framework you downloaded to your laravel project
- Create a new file under resources/views and name it master.blade.php
- This file loads all the css and js.
- Copy and Paste the code below in your master.blade.php.
- Create a new file in your views name it demo.blade.php.
- In this demo file we shall only display navbar just to show successful integration.
- You can add more component by adding codes.
- Copy and paste the code below in your demo.blade.php.
- Open web.php located under routes folder
- Copy and Paste the code below.
- That’s all let’s now run our project.
- In your command prompt navigate to your project and type.
- Open your browser and type localhost:8000/demo and you will see the following output.
- To download source code use the link below
- Download Source Code
- If you have need more help or have a question do comment below.
Contents
Creating a new laravel project
1 2 3 |
Laravel new app |
1 |
composer create-project --prefer-dist laravel/laravel app |
1 |
php artisan serve |
1 |
php artisan key:generate |
Downloading Materialize CSS
Copying materialize css and js to our project
-
materialize-v1.0.0-beta/materialize/css/materialize.min.css => app/public/assets/css/
-
materialize-v1.0.0-beta/materialize/css/materialize.min.js => app/public/assets/js/
Configuring css and js in our project
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="msapplication-tap-highlight" content="no"> <meta name="description" content="Materialize is a modern responsive CSS framework based on Material Design by Google. "> <title>Materialize</title> <!--Import materialize.css--> <link type="text/css" rel="stylesheet" href="{{asset ('assets/css/materialize.min.css')}}" media="screen,projection"> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> @yield('content') <!--JavaScript at end of body for optimized loading--> <script type="text/javascript" src="{{asset ('assets/css/materialize.min.js')}}"></script> |
Creat a demo page
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 28 29 30 31 32 33 34 35 |
@extends('master') @section('content') <nav> <div class="nav-wrapper"> <a href="#" class="brand-logo">Logo</a> <ul id="nav-mobile" class="right hide-on-med-and-down"> <li><a href="sass.html">Sass</a></li> <li><a href="badges.html">Components</a></li> <li><a href="collapsible.html">JavaScript</a></li> </ul> </div> </nav> @endsection |
Create a route to load your demo page
1 2 3 4 5 |
Route::get('demo', function () { return view('demo'); }); |
1 |
php artisan serve |