Dans ce chapitre, j'ai invité Céline, développeuse et professeur chez OpenClassrooms, pour vous expliquer comment utiliser le framework "Materialize CSS".
Découvrez le principe de Materialize CSS
Le framework "Materialize CSS" permet de reproduire en un rien de temps des pages web dans le style du Material Design en réutilisant des modèles prêts à l'emploi.
Littéralement, il s'agit d'un cadre de travail dont la promesse est de respecter une charte graphique, en l'occurrence ici, celle du Material Design.
Téléchargez et initialisez le framework
Rendez-vous dans l'onglet "Démarrer" du site Materialize pour télécharger le framework.
Téléchargez le framework sur votre ordinateur
Dans le dossier que vous avez téléchargé, vous remarquerez que vous avez plusieurs dossiers :
css
fonts
js
Créez votre fichier HTML
Dans tous les cas (téléchargement du framework ou non), vous allez devoir créer un fichier et l'intituler index.html ; c'est dans ce fichier que vous allez copier-coller des modèles d'éléments d'UI.
Sur la page "Démarrer", vous trouverez un code de base ; c'est le squelette de votre futur site :
<!DOCTYPE html>
<!--Import Google Icon Font-->
href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"
<!--Import materialize.css-->
type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"
<!--Let browser know website is optimized for mobile-->
name="viewport" content="width=device-width, initial-scale=1.0"
<!--Import jQuery before materialize.js-->
type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"
type="text/javascript" src="js/materialize.min.js"
Copiez le code et collez-le dans votre fichier index.html.
Utilisez le CDN
Changez les lignes 7 et 16 du code ci-dessus par (respectivement) les lignes 2 et 5 ci-dessous :
<!-- Compiled and minified CSS -->
rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css"
<!-- Compiled and minified JavaScript -->
src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"
Ajoutez des composants Material Design à votre site web
Ajoutez des "breadcrumbs"
Vous retrouverez le code à intégrer sur le site Materialize dans l'onglet Components > Breadcrumbs.
Nous vous redonnons le code ici :
class="nav-wrapper"
class="col s12"
href="#!" class="breadcrumb"First
href="#!" class="breadcrumb"Second
href="#!" class="breadcrumb"Third
Copiez le code et collez-le dans votre fichier index.html à l'intérieur du body.
Maintenant, ouvrez votre fichier dans un navigateur, pour voir ce que ça donne.
Oh c'est magique, c'est responsive !
Allez ! Essayons d'intégrer autre chose.
Un bouton flottant
Emblématique du Material Design, nous vous proposons d'ajouter un bouton flottant à votre site.
Vous retrouverez le code à intégrer dans votre fichier index.html sur le site Materialize dans l'onglet Components > Buttons > Floating button.
Nous vous redonnons le code ici :
class="fixed-action-btn"
class="btn-floating btn-large red"
class="large material-icons"mode_edit
class="btn-floating red" class="material-icons"insert_chart
class="btn-floating yellow darken-1" class="material-icons"format_quote
class="btn-floating green" class="material-icons"publish
class="btn-floating blue" class="material-icons"attach_file
Copiez le code et collez-le dans votre fichier index.html dans le body.
Vous savez maintenant comment fonctionne ce framework ! N'hésitez pas également à essayer d'autres frameworks, comme "Material Design Lite" qui propose d'autres éléments d'UI.