Apprendre à utiliser Material Design Lite : La grille

() translation by (you can also view the original English article)

Récemment nous avons jeté un oeil sur le nouveau Framework front-end de Google, Material Design Life (MDL). Nous avons découvert que MDL est livré avec une floppé de composants pour construire l'interface utilisateur d'un site web grâce à des lignes directrices et des principes de conception matérielle.

Dans cette séries de tutoriels, nous allons examiner les composants individuels de MDL en détail, à commencer par son système de grille qui constitue la base de tout Framework front-end. C'est parti !

Commençons

Avant de pouvoir utiliser la grille, ou tout autre composant de MDL, nous devons d'abord implanter ses librairies CSS et Javascript. Il y a beaucoup de possibilités quant à cette intégration, la plus simple étant l'utilisation des liens vers les CDN Google. Et ces fichiers comportent :

Les feuilles de styles pour les icones de MDL
La police Roboto qui est la police principale
La feuille de styles générale
Le fichier Javascript

1	<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
2	<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,500,400italic,700,700italic' rel='stylesheet' type='text/css'>
3	<link rel="stylesheet" href="//storage.googleapis.com/code.getmdl.io/1.0.1/material.teal-red.min.css" />
4	<script src="//storage.googleapis.com/code.getmdl.io/1.0.1/material.min.js"></script>

Les couleurs

Une fois implanté, nous pouvons commencer à construire l'interface utilisateur avec les couleurs définies dans les feuilles de styles. Le fichier CSS principal est nommé celon cette convention : material.{primary}-{accent}.min.css La couleur primaire est le bleu "canard" tandis que le rouge est la couleur complémentaire. Ces couleurs sont utilisées pour les composants comme la barre de navigation ou les boutons, ils n'ont aucune impacte sur la grille sauf si nous ajoutons des classes spéciales comme .mdl-color--primary et .mdl-color--accent

Vous pouvez modifier la combinaison de couleur avec celles que vous préférez en vous référençant aux spécifications de couleurs matérielles, exemple : material.purple-pink.min.css,material.blue_grey-pink.min.css, et material.blue-orange.min.css.

Cependant, si vous préférez spécifier la combinaison dans le fichier CSS, vous pouvez utiliser l'outil de personnalisation à la place. Séléctionnez les couleurs que vous souhaitez puis remplacez votre fichier CSS par celui que l'outil vous génère.

Material Design color wheel — Copier la feuille de style

Construire la grille

La grille, tout comme le menu de navigation et le pied de page dans MDL, fait partie du composant Layout. La grille dans MDL est construite en utilisant Flexbox, ce qui la rend beaucoup plus maléable que les Frameworks traditionnels reposant souvent sur des floats. La grille comprend des colonnes ; douze colonnes pour "la taille ordinateur (desktop)", huit colonnes pour la "tablette (tablet)" (<800px), et quatre colonnes pour la taille "téléphone (phone)" (<500px).

Nous commençons une grille avec une balise div vide. Puis, on lui ajoute la classe mdl-grid, et éventuellement d'autres classes afin de définir ou remplacer des styles pour plus tard.

1	<div class="content-grid mdl-grid">
2	<!-- grid here -->
3	</div>

Pensez que mdl-grid est un équivalent des classes row ou container si vous connaissez bootstrap. Cependant, au lieu d'être prédéfinie, MDL nous laisse la liberté de choisir la taille. Ainsi, dans votre feuille de style, vous pouvez avoir besoin de définir le max-width de la grille :

1	.content-grid {
2	max-width: 960px;
3	}

Les colonnes

Pour créer une colonne, ajouter un ou plusieurs éléments div (ou tout autre éléments selon vos besoins) avec la classe mdl-cell à l'intérieur de la mdl-grid.

<div class="content-grid mdl-grid">
  <div class="mdl-cell">
    <!-- add content here -->
  </div>
  <div class="mdl-cell">
    <!-- also here -->
  </div>
  <div class="mdl-cell">
    <!-- and probably also here -->
  </div>
</div>

A ce moment, vous avez effectivement créé une grille. Nous avons ajouté trois colonnes. Toutes les colonnes sont alignées et on une taille équivalente définie à 33.3333333333%. MDL suppose que nous serons généralement amené à ajouter trois colonnes dans une ligne.

Pour définir manuellement la taille d'une colonne par défaut, nous devons ajouter la classe mdl-cell--{nombre}-col avec un nombre compris entre 1 et 12. Ajoutez la classe pour chaque div :

Astuce : Cette classe est un espace de noms BEM pour modification. Pour plus de détails, se reporter à l'article Une introduction à la méthode BEM où Josh Medeski nous explique les tenants et aboutissants de cette méthode.

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--6-col">
    <!-- add content here -->
  </div>
  <div class="mdl-cell mdl-cell--3-col">
    <!-- also here -->
  </div>
  <div class="mdl-cell mdl-cell--3-col">
    <!-- and probably also here -->
  </div>
</div>

La première colonne est maintenant la plus grande.

MDL tente de maintenir les colonnes toujours visibles à l'écran en redimenssionnant ces colonnes d'une manière logique. Lorsque vous réduisez la taille de l'écran en mode tablette ou portable (Cliquez sur les icônes afin de tester), vous verrez que la première colonne reste la plus grande. Les deux dernières colonnes sont maintenant empilées au fond, elles sont plus petite que la première colonne de moitié.

Vue "Tablette" et "Mobile"

Souvent, nous pourrions avoir besoin d'un contrôle total sur les tailles des colonnes lorsqu'elle sont affichés dans une taille de fenêtre spécifique. Comme mentionné plus tôt, MDL contient 8 colonnes pour la taille d'une tablette et 4 colonnes pour la taille d'un mobile. Les colonnes doivent donc faire un total de 8 colonnes sur tablette et 4 colonnes sur mobile pour qu'elle puissent être affiché à la suite sans retour à la ligne d'après le support.

<div class="content-grid mdl-grid">
  <div class="mdl-cell mdl-cell--6-col mdl-cell--2-col-tablet mdl-cell--2-col-phone">
    <!-- add content here -->
  </div>
  <div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--2-col-phone">
    <!-- also here -->
  </div>
  <div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-tablet mdl-cell--4-col-phone">
    <!-- and probably also here -->
  </div>
</div>

Compte tenu de l'exemple ci-dessus : la première colonne devrait maintenant être la plus grande sur un ordinateur. La seconde colonne est la plus grande sur une tablette. Sur un téléphone mobile, les deux premières colonnes seront affichées côte à côte, alors que la dernière colonne se placera en dessous sur toute la largeur de la page.

Classes utiles

MDL est également munie d'un grand nombre de classes utiles permettant des modifications de placement dans la grille. Cette liste comprend un ensemble de classes pour masquer des colonnes selon la taille du support sur lequel la page est affichée :

mdl-cell--hide-desktop ; masque la colonne sur les ordinateurs (taille > 840px)
mdl-cell--hide-tablet ; masque la colonne sur les tablettes (taille > 480px)
mdl-cell--hide-phone ; masque la colonne sur les mobiles (taille < 480px)

D'autres classes afin d'aligner les colonnes :

mdl-cell--stretch ;étend la colonne afin de remplir l'élément parent, dans ce cas, mdl-grid.
mdl-cell--top ; aligne la colonne en haut de l'élément parent.
mdl-cell--bottom ; aligne la colonne en bas de l'élément parent.

Ces classes sont toutes facultatives, cependant je vous les mets au cas où vous en auriez besoin. Ajoutez-en une ou deux à la colonne div pour l'exemple :

<div class="content-grid mdl-grid">
  <div class="content-column mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-cell--top">
    <!-- add content here -->
  </div>
  <div class="content-column mdl-cell mdl-cell--4-col mdl-cell--4-col-phone mdl-cell--hide-tablet">
    <!-- also here -->
  </div>
  <div class="content-column mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-cell--bottom mdl-cell--hide-phone">
    <!-- and probably also here -->
  </div>
</div>

Cet exemple aligne la troisième colonne vers le bas de la ligne pour les ordinateurs de bureau, cache la deuxième colonne sur les tablettes, tandis que sur mobile, il cache la troisième colonne. Essayez :

Conclusion

La grille MDL est soigneusement construite. Étant donné qu'elle utilise Flexbox au lieu de floats, il est plus facile d'aligner, d'ordonner et de redimenssioner les colonnes sans se soucier de casser la mise en page ou sans affecter les éléments voisins.

Bien que non requis, je vous encourage à vous habituer à la fonction CSS calc() ainsi qu'à la méthodologie BEM -- la structure qu'utilise MDL pour nommer ses classes. Cela vous permettra de personnaliser la grille grâce à la structure de MDL.

Dans le prochain tutoriel nous allons jeter un coup d'oeil à un autre composant MDL. Restez connecté !