1.0.3 • Public • Published

Laravel Materialize

Want to quickly integrate Materialize into a Laravel project in a clean, yet customizable way without the hassle of configuring everything? Then you've come to the right place!

With the help of Laravel Elixir, this package pulls in the components from Materialize for easy integration with Laravel.



This package can work with new or existing Laravel projects. If you don't already have a Laravel application, create one.

laravel new app

For help creating a new Laravel application, have a quick look at the docs.

Next, install the package.

npm install laravel-elixir-materialize-css --save-dev

In your gulpfile.js, require and use the package. For example:

var elixir = require('laravel-elixir');
elixir(mix => {

Run gulp and all the assets will be compiled. Yeah, that's it!


To include the assets into your layout add this to your <head> (this don't replace tour app.css)

<!-- Material Styles -->
<link rel="stylesheet" href=",400,500,700">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="{{ asset('css/materialize.css') }}">

And this right before the end of your <body>

<!-- Material JavaScripts -->
<script src="{{ asset('js/materialize.js') }}"></script>

Now go add mdl components and classes to your views! Check out the mdl documentation for quick reference.

For example, add a simple button to any of your views to make sure everything is working:

<!-- Colored Add button with ripple -->
<a class="btn-floating btn-large waves-effect waves-light red"><i class="mdi mdi-library-plus"></i></a>


Want to change the colors of your app? How about the font? Want to tweak the defaults of Material Design to make it unique to your app? Sure, it's easy!

Add a file in your sass resources resources/assets/sass/_variables-materialize.scss. This file can be used as descrived in Marerialize

In this file you can also import your variables file if needed: @import "variables";

NOTE: Because problems with materialize icons, we use mdi as iconset

Even more customization

If for whatever reason your Laravel file structure is different than the default, you can configure Laravel Elixir to work with your project. If you do that, your changes will also be reflected in this package, so you won't have to worry about it. If however you have some need to manually change the paths for this package, have a quick look at the Config.js file at the root of the package.


Have an idea of how this could be even easier to use? Have any other random comment you'd like to share? Just create a new issue and we can chat about it.

Package Sidebar


npm i laravel-elixir-materialize-css

Weekly Downloads






Last publish


  • maztch