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.
Installation
Install:
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
Compile:
In your gulpfile.js
, require and use the package. For example:
var elixir = ; ;; ;
Run gulp
and all the assets will be compiled. Yeah, that's it!
Usage
To include the assets into your layout add this to your <head>
(this don't replace tour app.css)
<!-- Material Styles -->
And this right before the end of your <body>
<!-- Material JavaScripts -->
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 -->
Customization
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.
Contributing
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.