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.

Contents

• 1 Creating a new laravel project
• 2 Downloading Materialize CSS
• 3 Copying materialize css and js to our project
• 4 Configuring css and js in our project
• 5 Creat a demo page
• 6 Create a route to load your demo page
• 7 Share this:
• 8 Related

Creating a new laravel project

• Open your command prompt and navigate to the directory where you want to place your project.
• Run the following command.
Laravel new app

1 2 3

Laravel new app



• This command will create a new project called app.
• Alternatively you can use composer to create a new laravel project by running the following.
composer create-project --prefer-dist laravel/laravel app

1	composer create-project --prefer-dist laravel/laravel app

• To test if the project was successful created run the following command.
php artisan serve

1	php artisan serve



• 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.
php artisan key:generate

1	php artisan key:generate



Downloading Materialize CSS

• Download materializecss from materializecss website
• Unzip it after downloading



• Copy and paste the css and js to our laravel project.

Copying materialize css and js to our 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
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

• 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.
<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>

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

• 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.
@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

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

• Open web.php located under routes folder
• Copy and Paste the code below.
Route::get('demo', function () { return view('demo'); });

1 2 3 4 5

Route::get('demo', function () {     return view('demo'); });

• That’s all let’s now run our project.
• In your command prompt navigate to your project and type.
php artisan serve

1	php artisan serve



• 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.