How to load Materialize CSS in a Symfony project?

Recently I used materialize CSS in this new experimental project: magpie.

What is Materialize?

It's a front-end framework (SASS/CSS + JQuery/javascript) based on Google Material Design.

Download Materialize SASS

Go to the site and download the SASS version, it's a zipped folder materialize-src.

If you don't have jQuery, download the latest version.

Copy in your project

Assuming you have your bundle ( src/AppBundle/ ) copy the unzip directory in a "public" location like Resource/public.

Now you have this folder here src/AppBundle/Resources/public/materialize-css

Copy jQuery in src/AppBundle/Resources/public/jquery-2.1.4.js

Add the assets

Now open app/config/config.yml and add the new assets with assetic, sass compilation e css rewrite

# Assetic Configuration
assetic:
    debug:          "%kernel.debug%"
    use_controller: false
    bundles:        [ ]
    #java: /usr/bin/java
    assets:
        roboto-bold-ttf:
            inputs: '@AppBundle/Resources/public/materialize-src/font/roboto/Roboto-Bold.ttf'
            output: 'font/roboto/Roboto-Bold.ttf'
        roboto-bold-woff:
            inputs: '@AppBundle/Resources/public/materialize-src/font/roboto/Roboto-Bold.woff'
            output: 'font/roboto/Roboto-Bold.woff'
        roboto-bold-woff2:
            inputs: '@AppBundle/Resources/public/materialize-src/font/roboto/Roboto-Bold.woff2'
            output: 'font/roboto/Roboto-Bold.woff2'
        roboto-light-ttf:
            inputs: '@AppBundle/Resources/public/materialize-src/font/roboto/Roboto-Light.ttf'
            output: 'font/roboto/Roboto-Light.ttf'
        roboto-light-woff:
            inputs: '@AppBundle/Resources/public/materialize-src/font/roboto/Roboto-Light.woff'
            output: 'font/roboto/Roboto-Light.woff'
        roboto-light-woff2:
            inputs: '@AppBundle/Resources/public/materialize-src/font/roboto/Roboto-Light.woff2'
            output: 'font/roboto/Roboto-Light.woff2'
        roboto-medium-ttf:
            inputs: '@AppBundle/Resources/public/materialize-src/font/roboto/Roboto-Medium.ttf'
            output: 'font/roboto/Roboto-Medium.ttf'
        roboto-medium-woff:
            inputs: '@AppBundle/Resources/public/materialize-src/font/roboto/Roboto-Medium.woff'
            output: 'font/roboto/Roboto-Medium.woff'
        roboto-medium-woff2:
            inputs: '@AppBundle/Resources/public/materialize-src/font/roboto/Roboto-Medium.woff2'
            output: 'font/roboto/Roboto-Medium.woff2'
        roboto-regular-ttf:
            inputs: '@AppBundle/Resources/public/materialize-src/font/roboto/Roboto-Regular.ttf'
            output: 'font/roboto/Roboto-Regular.ttf'
        roboto-regular-woff:
            inputs: '@AppBundle/Resources/public/materialize-src/font/roboto/Roboto-Regular.woff'
            output: 'font/roboto/Roboto-Regular.woff'
        roboto-regular-woff2:
            inputs: '@AppBundle/Resources/public/materialize-src/font/roboto/Roboto-Regular.woff2'
            output: 'font/roboto/Roboto-Regular.woff2'
        roboto-thin-ttf:
            inputs: '@AppBundle/Resources/public/materialize-src/font/roboto/Roboto-Thin.ttf'
            output: 'font/roboto/Roboto-Thin.ttf'
        roboto-thin-woff:
            inputs: '@AppBundle/Resources/public/materialize-src/font/roboto/Roboto-Thin.woff'
            output: 'font/roboto/Roboto-Thin.woff'
        roboto-thin-woff2:
            inputs: '@AppBundle/Resources/public/materialize-src/font/roboto/Roboto-Thin.woff2'
            output: 'font/roboto/Roboto-Thin.woff2'
        material-design-icons-eot:
            inputs: '@AppBundle/Resources/public/materialize-src/font/material-design-icons/Material-Design-Icons.eot'
            output: 'font/material-design-icons/Material-Design-Icons.eot'
        material-design-icons-svg:
            inputs: '@AppBundle/Resources/public/materialize-src/font/material-design-icons/Material-Design-Icons.svg'
            output: 'font/material-design-icons/Material-Design-Icons.svg'
        material-design-icons-ttf:
            inputs: '@AppBundle/Resources/public/materialize-src/font/material-design-icons/Material-Design-Icons.ttf'
            output: 'font/material-design-icons/Material-Design-Icons.ttf'
        material-design-icons-woff:
            inputs: '@AppBundle/Resources/public/materialize-src/font/material-design-icons/Material-Design-Icons.woff'
            output: 
        material-design-icons-woff2:
            inputs: '@AppBundle/Resources/public/materialize-src/font/material-design-icons/Material-Design-Icons.woff2'
            output: 'font/material-design-icons/Material-Design-Icons.woff2'
    filters:
        cssrewrite: ~
        sass: ~
        #closure:
        #    jar: "%kernel.root_dir%/Resources/java/compiler.jar"
        #yui_css: 
        #    jar: "%kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar"

Load the new assets in your view template

Open your template app/Resources/views/base.html.twig and add CSS link in the head

{% block stylesheets %}
{% stylesheets filter="sass"
    '@AppBundle/Resources/public/materialize-src/sass/materialize.scss' %}
      
    {% endstylesheets %}            
{% endblock %}

and the javascripts at the bottom of the page

{% block body %}{% endblock %}
        {% block javascripts %}
            {% javascripts
            '@AppBundle/Resources/public/jquery-2.1.4.js'
            '@AppBundle/Resources/public/materialize-src/js/*'            
            %}
            
            {% endjavascripts %}
        {% endblock %}

Done.