Share
Nous avons récemment examiné le nouveau framework de développement front-end de Google, Material Design Lite (MDL). Nous avons découvert que MDL est livré avec une poignée de composants d'interface utilisateur permettant de créer des sites Web à l'aide des directives et principes de conception de matériel..
Dans cette série, nous allons examiner les composants individuels de la LDM de manière légèrement plus détaillée, à commencer par le système de grille qui constitue la base de tout framework frontal. Commençons!
Avant de pouvoir utiliser la grille, ou tout autre composant de MDL, nous devons d'abord déployer les bibliothèques MDL, les feuilles de style et le JavaScript. Nous pouvons le faire de différentes manières, mais la plus simple est sans doute de créer un lien vers les fichiers hébergés dans Google CDN. Et ces fichiers incluent:
Une fois que nous les avons ajoutés, nous pouvons commencer à créer l'interface utilisateur avec les couleurs définies dans le nom de la feuille de style principale. La feuille de style principale est nommée selon la convention suivante: matériau. primaire - accent .min.css. Notre couleur primaire ici est sarcelle tandis que rouge est la couleur d'accent. Ces couleurs sont appliquées à des composants tels que la navigation et les boutons, mais elles n’influenceront pas la grille à moins d’ajouter des classes spéciales telles que .mdl-color - primaire et .couleur mdl - accent.
Vous pouvez modifier la combinaison de couleurs selon vos préférences en vous référant à la spécification de couleur Material Design, par exemple: material.purple-pink.min.css,material.blue_grey-pink.min.css, et material.blue-orange.min.css.
Toutefois, si vous pensez que la combinaison de couleurs dans le fichier css n'est pas intuitive, vous pouvez toujours utiliser l'outil Personnaliser. Sélectionnez les couleurs dont vous avez besoin, puis remplacez le lien principal de la feuille de style par celui généré par l'outil..
Copier la feuille de styleLa grille, ainsi que la navigation et le pied de page dans MDL, font partie de la mise en page.composant. La grille dans MDL est construite à l'aide de Flexbox, ce qui la rend plus polyvalente que les frameworks traditionnels qui reposent toujours sur des flottants. La grille comprend des colonnes; douze colonnes pour la «taille du bureau», huit colonnes pour la taille de la tablette (800px et moins) et quatre colonnes pour les fenêtres de la taille «téléphone» (moins de 500px).
Nous commençons une grille avec un vide div. Puis ajoutez un mdl-grid classe, et éventuellement une classe personnalisée pour remplacer ou définir ultérieurement des styles personnalisés pour la grille:
Penser à mdl-grid en équivalent du rangée ou récipient classe si vous venez de Bootstrap. Mais, au lieu d’être prédéfinie, MDL nous laisse toute la largeur. Ainsi, dans votre feuille de style, vous devrez peut-être spécifier le largeur maximale de la grille à votre exigence:
.content-grid largeur maximale: 960px;
Pour construire les colonnes, ajoutez un ou plusieurs div éléments (ou quels que soient les éléments qui répondent à vos besoins) avec une classe de mdl-cell dans le mdl-grid.
À ce stade, nous avons effectivement créé une grille. Nous avons ajouté trois colonnes. Chaque colonne est correctement alignée et définie sur une largeur égale pour 33,3333333333%. MDL suppose que nous ajouterions généralement trois colonnes dans une ligne.
Pour remplacer la taille de colonne par défaut, nous devons ajouter un mdl-cell - number -col classe avec le nombre compris entre 1 et 12. Ajouter la classe pour chaque div:
Pointe: Cette classe est un espace de noms BEM pour un Modificateur. Pour plus de détails, veuillez vous reporter à notre précédent article intitulé Introduction à la méthodologie BEM, dans lequel Josh Medeski a couvert les tenants et les aboutissants de BEM..
La première colonne devrait maintenant être plus grande.
MDL essaie de tenir dans les colonnes de la fenêtre disponible en redimensionnant les colonnes de manière logique. Au fur et à mesure que vous réduisez à tablette et mobile (allez-y, cliquez sur les icônes), vous constaterez que la première colonne reste plus grande. Les deux dernières colonnes sont maintenant empilées en bas, mais elles sont encore plus petites de la moitié de la première colonne..
Nous avons souvent besoin de contrôler la taille des colonnes lorsqu'elles sont visualisées dans une taille de fenêtre d'affichage spécifique. Comme mentionné précédemment, MDL utilise 8 colonnes pour la taille de la tablette et 4 colonnes pour la fenêtre de taille mobile. Les colonnes doivent correspondre à un maximum de 8 et 4 respectivement lorsque vous ciblez une tablette et un téléphone mobile..
Dans l'exemple ci-dessus, la première colonne devrait maintenant être plus grande que la première dans le bureau. La deuxième colonne sera plus grande lorsqu’on la visionnera sur une tablette. Sur un téléphone portable, les deux premières colonnes seront affichées côte à côte de manière égale tandis que la dernière colonne s'étendra sur la largeur du parent..
MDL équipe également la grille d’un certain nombre de utilitaire cours ou modificateur Des classes. Celles-ci incluent un ensemble de classes permettant de masquer des colonnes pour certaines tailles de fenêtre:
Accentsconagua
mdl-cell - hide-desktop; masque la colonne en taille de fenêtre de bureau (> 840px)mdl-cell - tablette cachée; masque la colonne en taille de la fenêtre de la tablette (> 480px)mdl-cell - hide-phone; masque la colonne dans la taille de la fenêtre de taille mobile (< 480px)Un autre ensemble pour aligner la colonne:
mdl-cell - stretch; étire la colonne pour remplir l'élément parent, dans ce cas, mdl-grid.mdl-cell - top; aligne la colonne en haut du parent.mdl-cell - bas; aligne la colonne au bas ou au parent.Ces classes sont toutes facultatives, mais existent au cas où vous en auriez besoin. Ajoutez un ou deux d'entre eux au div colonne, par exemple:
Cet exemple aligne la troisième colonne sur le bas de la ligne pour les ordinateurs de bureau, masque la deuxième colonne sur les tablettes, tandis que sur mobile, la troisième colonne est masquée. Essayez:
La grille MDL est construite avec soin. Etant donné qu'il utilise Flexbox au lieu de floats, il est plus facile d'aligner, de classer et de redimensionner les colonnes sans craindre de modifier la mise en page ou d'affecter les éléments voisins.
Bien que cela ne soit pas obligatoire, je vous encourage à vous habituer au CSS calc () fonction ainsi que la méthodologie BEM - la structure que MDL utilise pour nommer les classes. Cela vous aidera à adapter votre grille en ligne avec les structures prédéfinies MDL..
Dans le prochain tutoriel, nous examinerons un autre composant MDL. Restez à l'écoute!
