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.
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_.
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.
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.
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 :
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é :
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) :
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.
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 :
Ensuite, lorsque vous souhaitez insérer une icône dans votre page, il vous suffira d'utiliser la classe `material-icons' :
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
On peut aussi gérer le masquage ou l'affichage suivant la taille de l'écran :
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 :
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.