Necessary Pigeonholing Mechanism
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    laravel-elixir-materialize-csspublic

    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.

    install

    npm i laravel-elixir-materialize-css

    Downloadsweekly downloads

    3

    version

    1.0.3

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar