Tutoriel Vidéo CSS Materialize Framework CSS : Materialize

Télécharger la vidéo

Je vous propose aujourd'hui de découvrir un nouveau Framework CSS très sympa, j'ai nommé Materialize. Comme vous le devinez, ce Framework est basé sur le Material design.

Ce Framework CSS n'est pas simplement un thème particulier pour Twitter Bootstrap, mais il s'agit réellement d'un Framework à part entière qui a ses propres composants et ses propres règles CSS. L'avantage de l'approche Material design, c'est qu'elle permet d'itérer facilement et de créer rapidement une interface propre. Materialize inclut en plus une série de composants JavaScript qui permettent de réaliser des effets comme les vagues sur les boutons, ou encore de gérer des effets de parallaxe.

L'installation

Pour installer ce Framework, vous avez plusieurs possibilités :

Vous pouvez tout simplement charger le CSS et le JavaScript en les téléchargeant préalablement, ou en les chargeant depuis un CDN.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>

Vous pouvez aussi télécharger une version au format SCSS. Cette option permet d'avoir plus de contrôle sur les différents composants à inclure, mais aussi de personnaliser facilement le CSS de base en utilisant les variables. Personnellement, je vous recommande cette seconde méthode. De la même manière, les sources sont téléchargeables en utilisant NPM ou Bower.

La grille

Avant même de parler du style propre à ce Framework, il est important de parler de la grille. C'est en effet la base de tout Framework CSS. Le fonctionnement reste le même que celui de Twitter Bootstrap à un détail près, les règles n'ont pas le même nom. On doit entourer nos grilles d'une div .row puis utiliser les class s_, m_ et l_.

  <div class="row">
    <div class="col s12"><p>s12</p></div>
    <div class="col s12 m4 l2"><p>s12 m4</p></div>
    <div class="col s12 m4 l8"><p>s12 m4</p></div>
    <div class="col s12 m4 l2"><p>s12 m4</p></div>
  </div>
  <div class="row">
    <div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
    <div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
    <div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
    <div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
  </div>

Il est aussi possible de gérer les offset si vous avez besoin de décaler une colonne.

Les couleurs avec Materialize :

Le Material design est aussi caractérisé par ses couleurs. Materialize arrive avec une palette de couleur complète qui vous permet de gérer la couleur de vos éléments, mais aussi du texte.

<div class="red lighten-2">Regarder cette couleur de fond !</div>

Cette première classe red permet d'attribuer une couleur de fond et la deuxième classe lighten-2 permet de spécifier la luminosité de cette dernière.

<div class="red-text text-lighten-2">Regarder cette couleur de texte !</div>

Ici les deux classes sont casiments identiques sauf que vous remarquerez que j'ai rajouté text au deux classes pour tout simplement leurs dirent que je veux donner ces couleurs au texte et non au fond !

Les formulaires

Les formulaires sont évidemment inspirés de ce que l'on a l'habitude de voir avec le Material design, ils sont très simples et s'adaptent facilement à différents cas d'utilisation. Le code HTML est lui aussi relativement simple :

<div class="input-field">
 <input placeholder="Placeholder" id="first_name" type="text">
 <label for="first_name">First Name</label>
</div>

Mais ce n'est pas tout, Materialize permet de gérer les erreurs de validation HTML. On peut notamment valider un champ de type e-mail et ajouter un label en fonction de ce qui est tapé :

<div class="input-field col s12">
 <input id="email" type="email" class="validate">
 <label for="email" data-error="wrong" data-success="right">Email</label>
 </div>

Les champs avancés, comme les select ou les checkbox sont aussi stylisés par le Framework (si vous voulez utiliser le sélect natif du navigateur en ajoutant la classe browser-default) :

  <div class="input-field col s12">
    <select>
      <option value="" disabled selected>Choose your option</option>
      <option value="1">Option 1</option>
    </select>
    <label>Materialize Select</label>
  </div>

La NavBar

Les NavBar sont totalement reponsives et totalement personnalisables. Vous pouvez mettre votre logo à gauche, à droite, vous pouvez mettre des drop-down, une sidebar, vous avez vraiment plein de possibilités.

// Ici notre dropdown
<ul id="dropdown1" class="dropdown-content">
  <li><a href="#!">one</a></li>
  <li><a href="#!">two</a></li>
  <li class="divider"></li>
  <li><a href="#!">three</a></li>
</ul>
<nav>
  <div class="nav-wrapper">
    <a href="#!" class="brand-logo">Logo</a> // Ici notre logo
    <ul class="right hide-on-med-and-down"> // Et notre barre de navigation à gauche
       <li><a href="sass.html">Sass</a></li>
       <li><a href="badges.html">Components</a></li>
       <!-- Dropdown Trigger -->
       <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="material-icons  right">arrow_drop_down</i></a></li>
    </ul>
  </div>
</nav>

Le code HTML reste relativement simple et peut vraiment être personnalisé, n'hésitez pas à faire un tour sur la documentation si vous voulez en apprendre plus.

Les icônes

Comme pour les autres Framework, Materialize utilise une police pour gérer les icônes. Cette police n'est pas incluse avec le Framework et il vous faudra la charger depuis Google Font :

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

Ensuite, lorsque vous souhaitez insérer une icône dans votre page, il vous suffira d'utiliser la classe `material-icons' :

<i class="material-icons">star</i>

Il est ensuite possible de gérer la taille de l'icône, en utilisant des classes tels que tiny, small, medium...

Quelques classes utiles

En plus des différentes classes liées au style Material, le Framework intègre quelques classes qui vont vous permettre de simplifier des tâches courantes comme le centrage des textes ou le masquage des éléments :

par exemple si vous souhaitez centrer verticalement un texte il vous suffira de lui appliquer la class valign

<div class="valign-wrapper">
  <h5 class="valign">This should be vertically aligned</h5>
</div>

On peut aussi gérer le masquage ou l'affichage suivant la taille de l'écran :

  <div class="hide-on-small-only"></div>

Conclusion

je ne vous ai montré ici que quelques éléments parmi l'ensemble des fonctionnalités offertes par le Framework. Si vous vous rendez sur la documentation vous vous rendrez très rapidement compte il intègre de nombreux éléments pour créer rapidement un prototype d'application.

*Par rapport à Twitter Bootstrap ? *

Par rapport à Twitter Bootstrap, ce Framework offre un design plus poussé et plus proche de ce que l'on peut retrouver en production. De manière générale le code HTML est plus simple qu'avec Twitter Bootstrap notamment sur les formulaires et la NavBar. Ceci étant dit, il peut s'avérer parfois trop verbeux lorsqu'il s'agit de rajouter des effets sur les boutons ou de styliser les couleurs de nos éléments :

 <a class="btn-floating btn-large waves-effect waves-light red lighten-1 blue-text text-darken-2"><i class="material-icons">add</i></a>

Aussi, je pense que c'est un Framework intéressant si vous n'avez pas forcément de guide au niveau design. Il vous permet d'expérimenter et de placer les éléments facilement. En revanche si vous souhaitez avoir un design précis il sera toujours plus efficace de créer soi-même son propre CSS afin de garder un code HTML propre.