Composez des interfaces utilisateurs en Material Design

6 heures
Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

Mis à jour le 04/01/2021

Utilisez le framework "Materialize CSS"

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.

Et si vous obteniez un diplôme OpenClassrooms ?

Formations jusqu’à 100 % financées
Date de début flexible
Projets professionnalisants
Mentorat individuel

Trouvez la formation et le financement faits pour vous

Être orienté Comparez nos types de formation