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>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>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 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
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 :
<nav>
<div class="nav-wrapper">
<div class="col s12">
<a href="#!" class="breadcrumb">First</a>
<a href="#!" class="breadcrumb">Second</a>
<a href="#!" class="breadcrumb">Third</a>
</div>
</div>
</nav>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 :
<div class="fixed-action-btn">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
<li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
<li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
<li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>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.
