• 6 hours
  • Easy

Free online content available in this course.

Videos available in this course

Certificate of achievement available at the end this course

Got it!

Last updated on 2/5/19

Utilisez le framework "Materialize CSS"

Log in or subscribe for free to enjoy all this course has to offer!

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

Mais libre à vous, si vous souhaitez télécharger le framework.

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.

Example of certificate of achievement
Example of certificate of achievement