Share
Jusqu'à présent, nous avons cherché à implémenter les composants MDL. La question demeure: comment personnaliser ces composants afin qu'ils s'intègrent dans le contexte de notre conception et de notre marque?
Pour beaucoup d'entre vous, la réponse à cette question peut sembler évidente: nous créons une nouvelle feuille de style, puis écrivons les règles de style pour remplacer les valeurs par défaut. Cependant, cela n’est pas toujours le meilleur moyen de traiter avec un cadre de ce calibre.
Pour éviter de surcharger le site Web avec des styles qui pourraient éventuellement être remplacés, nous devons d’abord déterminer quelles parties de nos composants nous allons personnaliser; la couleur, les tailles, les formes, ou peut-être les positions? Cela nous mènera à comprendre comment nous pouvons commencer à personnaliser.
Dès le début de la série, nous avons appris que vous pouvez personnaliser le jeu de couleurs à l'aide de l'outil Personnaliser. Vous pouvez sélectionner les couleurs principale et secondaire à appliquer aux composants de l'interface utilisateur MDL, soit par défaut, soit en ajoutant une classe de modificateur, telle que bouton mdl - coloré.
Personnalisateur MDLCependant, il arrive souvent que deux couleurs ne suffisent pas pour produire le résultat souhaité ou que la couleur secondaire appliquée dans un élément d'interface utilisateur particulier ne corresponde pas à la conception générale du site Web..
Material Design est livré avec les spécifications d'une large palette de couleurs comprenant le rouge, le bleu, le rose, le violet et le jaune. Si la couleur de fond ou de texte requise correspond à ces couleurs, vous n'avez pas à écrire de règles de style personnalisées pour remplacer les originaux. Vous pouvez ajouter les classes suivantes à la place:
Accentsconagua
mdl-color - nom-couleur - nuance: remplace la couleur de fond de l’élément comme spécifié dans nom de la couleur et ombre.mdl-color-text - nom-couleur - nuance: remplace la couleur du texte comme spécifié dans nom de la couleur et ombre Ce qui suit est un composant de la carte MDL d'un tutoriel précédent, affichant un article de blog avec le titre de l'article, l'extrait de l'article et quelques boutons. Cette fois les boutons sont dans leur couleur par défaut.
En supposant que nous voulions changer le comme aussi bien que partager en gris clair, tandis que le titre et Lire la suite bouton est donné un bleu clair, nous pourrions ajouter le mdl-color-text - bleu-gris-300 classe au bouton, et ajoutez le mdl-color-text - bleu clair-900 au titre.
… …
Cela se traduit par:
Encore une fois, veuillez vous référer à la spécification de couleur Material Design pour les couleurs et nuances correspondantes..
Une autre chose que nous pouvons ajuster en ajoutant une «classe de modificateur» est l’ombre. Ajoutez les classes suivantes pour appliquer des ombres portées à un élément d'interface utilisateur:
mdl-shadow - 2dpmdl-shadow - 3dpmdl-shadow - 4dpmdl-shadow - 6dpmdl-shadow - 8dpmdl-shadow - 16dpPlus le nombre est grand, plus la profondeur de l'ombre et son étendue sont forts, accentuant la soulevé effet sur l'élément en question. Avec notre carte précédente, nous pouvons ajouter le mdl-shadow - 16dp léviter la carte plus loin.
…
Cela se traduit par:
À la fin de la documentation de chaque composant, Google fournit une liste de classes pouvant être appliquées. Avant d'écrire des règles de style personnalisées, examinez chaque composant pour ces classes afin de déterminer s'il a été réellement couvert. Le composant de navigation, par exemple, est fourni avec une abondance de classes de modificateurs, telles que:
mdl-layout - grand écran seulement; pour afficher l'élément uniquement dans la grande taille de la fenêtre et le masquer lorsqu'il passe dans une fenêtre de la taille d'une table ou d'un téléphone.mdl-layout - en-tête fixe; fait la barre de navigation gluant il est donc toujours visible dans la fenêtre d'affichage lorsque l'utilisateur fait défiler.mdl-layout__header - faire défiler; fait l'en-tête décoller et faites défiler avec le contenu.mdl-layout__header - transparent; rend l'en-tête transparent afin que nous puissions ajouter, par exemple, une image d'arrière-plan.mdl-layout - tiroir fixe; rend la navigation hors-toile toujours visible.L'application de ces classes évite les lignes de code de personnalisation inutiles.
Si la personnalisation requise va au-delà de ce qui est spécifié dans les spécifications, nous n'avons d'autre choix que de créer une feuille de style personnalisée et de rédiger nos règles de style personnalisées. Nous pouvons créer un nouveau .css fichier, lien vers celui-ci dans le document situé sous la feuille de style MDL (ou tout compiler ensemble à l'aide d'un outil de construction), puis exécutez le fichier avec nos propres règles de style..
Mais, aussi facile que cela puisse paraître, vous rencontrerez tôt ou tard des problèmes de spécificité. Étant donné que le composant peut être utilisé plusieurs fois dans plusieurs niveaux de la hiérarchie DOM, votre style peut présenter les caractéristiques suivantes:
.mdl-header .mdl-button // le style est ici .mdl-card .mdl-button // le style est ici .mdl-card__actions .mdl-button - icon // le style est ici
Par conséquent, au lieu de cibler directement le sélecteur natif MDL, il serait également préférable de séparer les règles de style personnalisées dans un sélecteur personnalisé. Cela signifie d’affecter une nouvelle classe à l’élément que vous allez personnaliser et d’écrire les styles sous le nouveau sélecteur:
.acme-post-share // le style va ici .acme-post-like le style va ici
Cela nous permet de garder notre spécificité de style faible. Cela nous permet également d'identifier quel élément est appliqué avec des styles personnalisés. Si vous souhaitez désactiver les styles personnalisés, vous pouvez supprimer la nouvelle classe..
Et voici un exemple pour personnaliser notre ancienne carte:
Allusion: vérifier l'onglet CSS.
Une autre manière de personnaliser complètement les styles par défaut de MDL consiste à utiliser le code source. MDL est disponible via plusieurs canaux: Github, NPM et Bower.
Exécutez ce qui suit git Commande permettant de télécharger MDL à partir de Github, en l’utilisant comme module Git, ce qui nous permet de supprimer les commits et les mises à jour:
sous-module git add [email protected]: google / material-design-lite mdl
Exécutez la commande suivante pour obtenir MDL auprès de NPM et déployez-le, éventuellement, en tant qu'application NodeJS:
npm installer material-design-lite --save
Exécutez cette commande pour déployer MDL sur votre site Web en tant que dépendance avec Bower:
bower installer material-design-lite --save
Dans tous les cas, cela nous donne la src dossier contenant les codes source MDL.
En ayant les fichiers bruts-non compilé code-nous sommes en mesure de personnaliser les composants MDL dans les moindres détails. Nous pourrions compiler une feuille de style principale plus légère en excluant les composants superflus. Nous pourrions aussi changer et réutiliser les variables et les mixins pour écrire les styles personnalisés.
La modification des fichiers source est la voie à suivre pour ceux qui exigent un contrôle total sur la sortie. Dans la dernière partie de cette série «Astuce: Choisissez et mélangez les composants MDL avec Gulp», nous examinerons le processus de prise des parties MDL que nous voulons dans notre construction..
Dans ce tutoriel, nous avons vu différentes façons de personnaliser les composants MDL. Et comme nous l’avons découvert, l’approche dépend en grande partie du résultat que nous envisageons. Parfois, cela peut être aussi direct que d'ajouter un modificateur classe, mais parfois vous pouvez aussi avoir besoin de dérouler et éditer les fichiers source entiers.
Si vous êtes intéressé par une inspiration générale pour votre personnalisation MDL, une vaste collection de modèles de conception matérielle et graphique sur le marché Envato.
