Il existe énormément de tuto et de ressources sur le web sur ce framework css. Nous allons juste aborder la mise en forme de base.
Comme avec le framework BootStrap que vous pouvez aussi utilier, le framework Materialize utilise une grille de 12 cellules par défaut pour quadriller votre page web.
La page web est découpée en cellule et de fait ressemble à un tableur.
Etapes :
Colonne : on ajoute autant de colonnes suivant nos besoins, avec la classe col à laquelle on ajoute les informations suivantes pour le côté responsive
et ainsi de suite…
Note : s signifie small screens (mobile) m signifier medium screen (tablettes) l signifie large screen (desktop)
Pour agencer vos cellules qui vont contenir vos composants, vous pouvez utiliser offset, pull et push (à découvrir sur le lien en bas de page)
<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>
Ensuite, il vous reste à inclure le code des différents composants du framework. (Vous pouvez faire la même chose avec le framework BootStrap qui permet de réaliser la même chose que Materialize mais en moins de ligne !)
Remarque : les composants de Materialize sont plus dans l’air du temps et plus pointus…
lien pour comprendre et mettre en place une grille