Materialize – Framework CSS

 

Table des matières

Résumé. 3

Introduction. 4

Installation du framework. 5

Téléchargement de Materialize. 5

Mise en place de Materialize. 6

Présentation du framework. 7

Le système de grille et de positionnement 7

Construction de la page web. 8

Conception du code. 9

Première partie : le menu et le slider dynamique. 9

Seconde partie : les row responsives. 11

Troisième partie : le module parallaxe. 12

Quatrième partie : le footer 13

Conclusion. 14

Références. 15

 

 

 

Résumé

Materialize is a web framework like Bootstrap or Foundation based on a grid concept. He allows you to build a responsive website for a desktop, laptop, tablet and smartphone easily with different HTML, CSS and JavaScript components.

Based on Material Design created by Google, the different element composing Materialize are made with flat design for a better integration and design in many web projects.

 

 

 

Introduction

Materialize, comme les frameworks Bootstrap ou Foundation, est un framework CSS permettant une conception plus rapide et adaptive aux supports actuels tels que les ordinateurs, tablettes et smartphones.

Les différents frameworks cités, dont Materialize, sont conçus autour d’un système de grille et respectent les standards et normes du web et sont compatibles avec l’ensemble des exigences W3C et Google Analytics afin que le référencement du site soit le plus optimal possible.

Une page créée à l’aide d’un framework CSS sera ainsi découpée en différentes sections configurées pour s’adapter à n’importe résolution d’écran que se soit un ordinateur de bureau, un ordinateur portable, une tablette ou encore un smartphone.

Le framework est livré avec, en plus du système de grille, un ensemble de classes CSS applicables directement sur le code HTML comme notamment une palette complète de couleur. Il est donc possible de configurer la couleur d’un conteneur ou d’un texte directement en appelant une classe sans passer par une feuille de style supplémentaire.

Materialize est également livré avec les différents composants HTML et CSS de base comme un formulaire, un menu en ligne, un menu latéral, des boutons cliquables, des listes déroulantes, tableaux, etc.

Enfin, le framework contient également de nombreux modules JavaScript permettant de mettre en place des carrousels de photos, un système de gestion de parallaxe, des menus déroulants, des pop-up et/ou encore des boutons multitâches interactifs.

Materialize est encore en cours de développement et ici, il sera présenté la dernière version 1.0.0 qui se trouve encore être en bêta.

Nous allons donc pouvoir passer à l’installation du framework et commencer ensuite à coder notre première page web avec Materialize !

 

 

 

Installation du framework

 

Téléchargement de Materialize

Materialize propose différents types d’installations de son framework suivant l’utilisation voulue. Pour notre part, nous allons prendre l’installation la plus classique et standard qui se trouve être le téléchargement de l’ensemble des fichiers de Materialize pour ensuite les inclure dans notre feuille HTML.

Pour se faire, il nous faut nous rendre sur le site de Materialize à l’adresse suivante :

https://materializecss.com/getting-started.html

Une fois sur le site internet, il nous faut sélectionner la version souhaitée pour le téléchargement. Nous ne prendrons donc pas la version SASS, mais la version « classique » :

 

 

Une fois le dossier téléchargé et décompressé, vous devriez avoir un dossier nommé materialize contenant les différents éléments suivants :

 

 

 

 

Mise en place de Materialize

Maintenant que nous possédons les fichiers nécessaires au bon fonctionnement de Materialize, il nous faut maintenant commencer à coder afin de comprendre le fonctionnement de ce framework et ainsi mieux le découvrir.

Pour commencer, nous allons créer un dossier qui va contenir l’ensemble du contenu de notre page web ou de notre site web (images, feuilles de style CSS et de scripts JavaScript et feuilles HTML).

Une fois ce dossier crée, le contenu précédemment téléchargé de l’archive Materialize devra être déplacé à l’intérieur de ce dossier. Enfin, pour terminer la première phase de mise en place, il nous faudra créer une page HTML en la nommant « index.html » qui sera notre page d’accueil.

La structure finale de l’intérieur du dossier devrait donc être identique à ça :

 

 

Nous allons maintenant pouvoir inclure les composants de Materialize à notre feuille HTML directement dans nos balises <head> de la manière suivante :

 

 

La balise <link> contient le CSS et la balise <script> contient le JavaScript de Materialize. Tout est maintenant prêt pour que nous puissions commencer à coder notre page web.

 

 

Présentation du framework

Le système de grille et de positionnement

Avant de commencer le code de notre page, il nous faut comprendre le fonctionnement de la grille sur laquelle la majorité des frameworks CSS est créé. La structure est composée de lignes et de colonnes (row et col).

Chaque row rajoute une nouvelle ligne sur notre page internet. Une row est composée de 12 col permettant de disposer les éléments de manières correctes et ainsi pouvoir avoir un contenu responsif. De plus, elle couvre l’ensemble de la largeur de la page. Les colonnes peuvent être définies comme des « boites » dans lesquelles n’importe quel contenu peut être mis (photo, texte, vidéo …).

Voici le positionnement de 2 row dans une page web :

 

 

Comme précédemment expliquée, une row contient 12 col qui définissent la taille de la row. Il est important de garder ce chiffre en tête, car tout le système de grille responsif est basé sur cette taille-là.

Afin de pouvoir positionner les éléments dans la grille et qu’ils puissent s’adapter suivant la résolution de l’écran, les frameworks mettent à disposition un système de gestion de taille des col suivant la taille du périphérique utilisé. C’est avec cette gestion de taille que l’on va pouvoir spécifier, suivant le résultat voulu, la position et la taille des col et ainsi construire notre page.

Voici le tableau contenant les différents paramètres suivant la classe utilisé pour sélectionner la taille d’une col :

 

 

Ainsi, en utilisant les différents préfixes classés ci-dessus, il nous est possible de structurer les informations voulues de manière responsive.

Il est également possible d’utiliser un conteneur plus étroit qui augmente la marge des deux côtés de votre page web. Ainsi, l’ensemble des éléments seront plus centrés dans la page et ainsi plus condensés.

 

 

Construction de la page web

Pour notre article nous allons créer une page avec les éléments suivants : nous aurons une première partie constituée d’un menu qui restera collé en haut durant le scroll de la page et d’un slider de 3 slides avec des informations sera disposé en premier afin de faire un accueil dynamique.

Nous aurons ensuite une seconde partie responsive permettant d’utiliser nos row et col afin de voir comment les éléments s’adaptent sur mobile. Nous mettrons donc sur une première ligne trois textes avec une icône en titre et dans une seconde ligne, deux images. Une fois que l’écran sera en taille mobile ou tablette, tout devra se disposer automatiquement sur une seule ligne.

Une troisième partie présentera le module parallaxe mis à disposition par Materialize.

Enfin, la quatrième et dernière partie de la page se constituée d’un formulaire et d’un footer pour terminer proprement la page.

 

 

 

 

Conception du code

 

Première partie : le menu et le slider dynamique

Nous allons commencer par mettre en place le menu fixe dans notre page web pour ensuite passer au slider. Voici le code nous permettant de créer le menu :

 

 

Détaillons un peu le code. La majorité du travail est effectué par les classes fournies par Materialize. Ici, la classe « navbar-fixed » permet de rendre le menu fixe sur le haut de la page.

Nous changeons également la couleur de la barre de menu grâce à la classe « grey darken-3 ». Materialize fournit une palette de nombreuses couleurs applicables à un conteneur et/ou à un texte.

Le reste de la structure est récupérée directement de la documentation de Materialize disponible sur le site officiel qui est une structure standard de menu réalisable avec le framework.

Passons à la suite du code.

Maintenant que nous avons le menu, nous allons pouvoir continuer avec le slider dynamique qui sera positionné sous le menu. Voici le code du slider :

 

 

De la même manière que le menu, le slider est un basé sur une structure standard fournie par Materialize. Il nous suffit d’adapter la structure fournie en indiquant l’url de nos photos plutôt que celles fournies par Materialize et le tour est joué !

À ce stade, si vous testez le code, le slider ne fonctionne pas. Mais pourquoi ? Parce que le slider fonctionne avec du JavaScript et qu’il faut l’initialiser dans un fichier séparé. Pour se faire, nous allons créer un nouveau fichier init.js que l’on va mettre dans le dossier js et faire deux imports supplémentaires dans le head de notre feuille HTML :

 

 

Il ne reste plus qu’a initialisé à l’aide d’une fonction jQuery notre slider dans notre feuille init.js de la manière suivante :

 

 

Il est important de faire l’import du jQuery avant le fichier init.js sinon cela ne fonctionnera pas. Une fois ces opérations effectuées, notre slider fonctionne.

Pour intégrer nos images personnalisées, il nous faut créer un dossier « images » dans le dossier « css » déjà présent dans notre dossier source. Vous pourrez ensuite stocker toutes les photos dont vous avez besoin dedans et les lier de la même manière que dans ce code.

 

 

Seconde partie : les row responsives

Nous allons mettre en place les row responsives contenant dans la première row les textes avec les icônes et dans la seconde row, les deux images.

Nous voulons donc que sur un écran d’ordinateur, les trois textes et les deux images soient sur leurs lignes respectives et que, sur mobile et tablette, chaque élément se trouve sur une seule ligne.

Voilà comment nous allons nous y prendre :

 

 

À l’aide des classes permettant de gérer la taille d’une col suivant la résolution, nous avons pu préciser qu’en small (s), la col de la row prendra toute la largeur soit 12 alors que sur les écrans larges (l), elle ne prendra que 4 de taille. Il sera donc possible d’aligner 3 col de taille 4 sur une seule ligne pour atteindre la taille maximale de 12.

En gardant ce principe-là, nous mettons en place la seconde row contenant les images en configurant 12 sur les petits et moyens écrans, et 6 en taille large pour pouvoir avoir les deux images sur la même ligne :

 

 

Nos deux row sont mises en place. Afin de rendre le contenu plus aéré, nous créons une feuille de style supplémentaire que l’on rajoute dans le head et qui est disposé dans le dossier css. Elle contient seulement la classe « padding-up-down » qui a pour but d’augmenter de 50 px le padding du haut et du bas de la row afin de l’agrandir.

 

 

Troisième partie : le module parallaxe

Le module parallaxe est, comme le slider et le menu, encore un modèle de base fourni par Materialize.

Il se présente de la manière suivante :

 

 

Comme le slider, le parallaxe est également un module utilisant le JavaScript. Il nous faut donc l’initialiser de la même manière que le slider avec le code suivant :

 

 

L’ensemble des différents modules qui constituent notre page sont tous présents, il ne nous manque plus que de terminer par le footer de la page.

 

 

Quatrième partie : le footer

Le footer est, encore une fois, un modèle de base fourni par Materialize. Le framework est fourni avec de nombreux templates de bases que l’on peut modifier par la suite ce qui permet de construire un site rapidement et facilement. Voici le code du slider :

 

 

Voilà la création de notre page web est terminée. Bien évidemment, de nombreux autres modules sont disponibles sur le site de Materialize ainsi que d’autres classes permettant de gérer différemment les éléments d’une page.

Si certains modules ou affichages ne fonctionnent pas correctement, pensez bien à vérifier que les différents chemins des images et des feuilles de style soient correctement indiqués. De plus, contrôlez bien que l’ordre de chargement des différents éléments JavaScript soit effectué après que le chargement du jQuery soit effectué.

 

 

 

Conclusion

Pour conclure, Materialize est un puissant framework en devenir qui est fonctionnel et simple à utiliser. Encore en développement en version bêta, il est déjà muni de nombreux autres modules et composants que ceux présentés ici à l’adresse suivante :

https://materializecss.com/

 

Une documentation simple ainsi qu’une structure d’exemple est fournie pour chaque exemples et modules ainsi que la méthode d’initialisation Javascript pour les modules en ayant besoin.

De plus, de nombreuses classes CSS permettent de disposer les éléments de manières correcte dans la grille ainsi que de gérer plus finement les alignements et réaction des row suivant la taille de l’écran.

 

 

Références

[1] – Documentation du frameworks Materialize : https://materializecss.com/

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *