Créé et conçu par Google, Material Design est un langage de conception qui combine les principes classiques d'un design réussi avec l'innovation et la technologie. L'objectif de Google est de développer un système de conception permettant une expérience utilisateur unifiée pour tous ses produits sur n'importe quelle plate-forme.

Comment installer Materialize-css à côté d'un projet Symfony

Commencer par installer webpack encore

composer require symfony/webpack-encore-bundle

Puis lancer yarn

yarn install

Installer SASS:

Décommenter l'option .enableSassLoader() dans le fichier webpack.config.js

Executer la commande suivante

yarn add sass-loader@latest sass –dev

Installer materializecss

yarn add materialize-css --save 

Créer un fichier global.scss ne pas oublier de le relier au app.js

import './styles/global.scss';

Importer materialize dans global.scss

@import "~materialize-css/sass/materialize";

Créer dans les assets un dossier scripts dans lequel sera créé un fichier materialize-int.js

Ce fichier servira à initialiser et personnaliser les composants de materialize. Dans ce fichier, implémenter ces lignes

require('materialize-css')
M.AutoInit() ;

Importer le fichier fans app.js

import './scripts/materialize-init';

Ne pas oublier de décommenter les liens dans block stylesheets et block script du fichier de template base.html.twig

      {% block stylesheets %}
            {{ encore_entry_link_tags('app') }}
            <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        {% endblock %}

        {% block javascripts %}
            {{ encore_entry_script_tags('app') }}
        {% endblock %}

Enfin ne pas oublier d'aller chercher les fonts google pour les icones

        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Materialize-css a des composants très joli et permet de sortir de la routine bootstrap

Enjoy