GoogleWordpress

Un thème wordpress avec Materialize

Par Guillaume Thavaud - Publié le 23 octobre 2017

Changement d’époque, changement de thème… Aujourd’hui, j’ai eu envie de tester le framework Materialize. Il n’y a pas que Bootstrap dans la vie !

Pour la petite histoire, le Material Design a été créé par Google en 2014. C’est un framework qui est largement utilisé sur tous ses sites (moteur de recherche, Youtube, Google Actualités), et qui allie responsive design et une certaine élégance, le tout au service de l’expérience utilisateur.

Comme pour Bootstrap, il existe une importante documentation en ligne, disponible ici : http://materializecss.com/ et partiellement traduite en français. On y trouve tous les exemples nécessaires pour fabriquer son code HTML. Il y a même une petite bibliothèque de sites réalisés avec Materialize, ce qui donne une idée des possibilités. C’est vrai qu’on peut faire beaucoup de choses !

Est-ce que Materialize est plus intéressant que Bootstrap ? Je ne vais pas refaire le match, tout dépend de ses goûts en matière de design… De prime abord, le Material Design me semble plus raffiné, plus travaillé que son aîné. Voici quelques points que j’ai apprécié :

La responsivité à tous les niveaux

Comme Bootstrap, Materialize utilise un système de grilles qui s’adapte à la taille de l’écran, et il intègre en natif un menu responsif, qui va se replier gentiment sur un support mobile.

Par contre Google va un peu plus loin, en proposant des images responsives, c’est à dire dont la taille s’adapte à celle de l’écran. Ca n’a l’air de rien, mais c’est une propriété bien pratique : il suffit d’ajouter la classe responsive-img sur une image pour qu’elle soit adaptative.

Aure point intéressant : le texte lui aussi est responsif. Il existe une classe flow-text, qui permet au texte de changer progressivement de taille en fonction des écrans, ceci afin d’éviter des changements trop brutaux quand on passe de l’ordinateur à la tablette, et de la tablette au téléphone.

Des couleurs, beaucoup de couleurs !

En comparaison de la petite poignée de couleurs proposée dans Bootstrap, c’est le jour et la nuit. Materialize ne propose pas moins de 20 palettes de couleurs à utiliser dans ses composants.

Vous me direz qu’un bon webmaster doit être capable de personnaliser facilement n’importe quel élément en ajoutant un code couleur, mais c’est quand même bien pratique de ne pas avoir à modifier le style CSS. Il suffira d’utiliser le nom de la couleur dans une classe, comme ceci : <div class= »teal lighten-2″>…</div>.

Les formulaires : bof bof

J’avoue que je n’aime pas tellement le look des formulaires proposés par le Material Design. Je prèfère de loin la mise en forme proposée par Bootstrap, qui est plus ordonnée.

Ce que Materialize propose est assez bizarre, on ne voit pas bien les champs de saisie, et les libellés se promènent un peu n’importe où. Chacun jugera…

Pas de liste à puce ?

Un autre point que je trouve assez aberrant : Materialize ne connait pas les listes à puce et les listes numérotées, il les remplace par des « collections », qui sont des blocs séparés horizontalement. C’est esthétique, mais ça ne vaut pas une bonne liste à puces.

Comme par défault Materialize met une propriété « list-style-type: none » sur toutes les listes, il faut indiquer dans le code que l’on veut revenir à l’état d’origine. Pour cela, il faut utiliser la classe « browser-default ». Ce n’est pas très pratique.

 

Quelques mots sur l’intégration dans mon nouveau thème WordPress

Je ne vais pas faire un cours sur la création de thème WordPress, il y a de très bons sites pour cela… Voici  dans un premier temps quelques astuces que j’ai mis en oeuvre pour dompter Materialize :

Les images responsives

Comme je l’ai dit plus haut, pour obtenir le redimensionnement automatique il faut ajouter une classe spéciale aux images, de la façon suivante:

<img src="monimage.jpg" class="responsive-img">

Oui mais voilà, WordPress utilise ses propres classes (par exemple : <img class= »aligncenter size-medium wp-image-791″ src=…>), donc c’est un peu risqué de tout casser.

Ma solution a été de faire appel à Jquery, pour ajouter dynamiquement une classe à toutes les images. Cela ressemble à ça :

<script>
jQuery(document).ready(function($) {
 $("img").addClass("responsive-img");
}) 
</script>

Le Flow-text fait mal aux yeux…

Avoir une taille de texte qui s’adapte à la taille de l’écran c’est bien, mais quand on a un gros écran, ça pique les yeux, le texte est beaucoup trop gros… J’ai donc du repasser sur les tailles de police proposée par la classe flow-text, de façon à avoir quelque chose d’un peu moins désagréable. A noter que Google utilise l’utilité de mesure rem, pour plus d’explications je vous renvoie vers cet excellent article.

Du coup dans mon style.css, j’ai quelque chose qui ressemble à ça :

@media only screen and (min-width: 660px){.flow-text{font-size:1.110rem}}
@media only screen and (min-width: 690px){.flow-text{font-size:1.120rem}}
@media only screen and (min-width: 720px){.flow-text{font-size:1.130rem}}
@media only screen and (min-width: 750px){.flow-text{font-size:1.140rem}}
@media only screen and (min-width: 780px){.flow-text{font-size:1.150rem}}
@media only screen and (min-width: 810px){.flow-text{font-size:1.160rem}}
@media only screen and (min-width: 840px){.flow-text{font-size:1.170rem}}
@media only screen and (min-width: 870px){.flow-text{font-size:1.180rem}}
@media only screen and (min-width: 900px){.flow-text{font-size:1.190rem}}
@media only screen and (min-width: 930px){.flow-text{font-size:1.2rem}}
@media only screen and (min-width: 960px){.flow-text{font-size:1.210rem}}
@media only screen and (max-width: 360px){.flow-text{font-size:1.1rem}}

Menu et pagination

Bon là, j’avoue que j’ai repris le travail d’autres développeurs.

  • intégration du menu Materialize pour mobile dans le menu WordPress : merci à Rodrigo Brandão alias Knoonrx
  • intégration de la pagination Materialize : merci à Sylvain Marty

Quand on ne sait pas trop ce qu’on fait, il est toujours utile de faire appel à la communauté WordPress. Il y a toujours quelqu’un qui a été confronté au même problème que vous, et il y a (presque toujours) une solution à mettre en oeuvre…

Je reviendrai plus en détail dans un autre article sur la création du thème et sur les différents templates et composants que j’ai utilisé.