❤
npm
Sign UpSign In

This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

laravel-elixir-materialize-css

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.

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 = require('laravel-elixir');
 
require('laravel-elixir-materialize-css');
require('laravel-elixir-vue');
 
elixir(mix => {
    mix.sass('app.scss')
        .materialize()
        .webpack('app.js');
});

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 -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<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>

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.

Dependencies (3)

Dev Dependencies (0)

    Package Sidebar

    Install

    npm i laravel-elixir-materialize-css

    Repository

    github.com/maztch/laravel-elixir-materialize

    Homepage

    github.com/maztch/laravel-elixir-materialize

    Weekly Downloads

    4

    Version

    1.0.3

    License

    MIT

    Last publish

    Collaborators

    • maztch
    Try on RunKit
    Report malware