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

  • 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.
  • Serving New Laravel Project

  • 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

    Downloading Materialize CSS

  • Download materializecss from materializecss website
  • Unzip it after downloading
  • Materialize css

  • 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.
  • materialize css and js folder

  • Copy the css and js from the materialize framework you downloaded to your laravel project
    1. 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.
  • 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.
  • Create a route to load your demo page

  • 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.
  • Serving New Laravel Project

  • Open your browser and type localhost:8000/demo and you will see the following output.
  • how to integrate laravel with materializecss

  • To download source code use the link below
  • Download Source Code
  • If you have need more help or have a question do comment below.