Une introduction pratique à Material Design Lite par Google

En 2014, Google a publié la spécification de conception des matériaux, un langage visuel visant à réunir des principes de conception solides, une expérience utilisateur cohérente sur différentes plateformes et appareils, et l'innovation technologique et scientifique.

juillet 2015 Saw Google Release Material Design Lite, une bibliothèque frontale conçue pour faciliter l'ajout de l'apparence et de la sensation de conception du matériau à un site Web.

Dans cet article, je me concentre sur les principes et composants fondamentaux suivants de la conception des matériaux et comment vous pouvez les implémenter à l'aide de la bibliothèque Material Design Lite (MDL):

• typographie
• couleur
• Layout
• cartes

Les plats clés

• Material Design Lite (MDL) par Google est une bibliothèque frontale qui simplifie la mise en œuvre de l'esthétique de conception de matériaux dans des projets Web, ce qui facilite le maintien d'une expérience utilisateur cohérente sur diverses plateformes.
• MDL peut être incorporé dans votre projet en utilisant CDN de Google pour CSS et Fichiers JavaScript, ou en téléchargeant et en hébergeant les fichiers vous-même, avec des instructions de configuration détaillées disponibles pour divers environnements, notamment Bower et NPM.
• La bibliothèque propose un système de typographie robuste utilisant les polices Roboto et Noto, soutenant un large éventail de scripts et fournissant des classes prédéfinies pour appliquer des échelles typographiques cohérentes.
• MDL fournit un système de couleurs personnalisable, permettant aux développeurs de sélectionner une couleur primaire et d'accent dans une palette prédéfinie, améliorant l'attrait visuel tout en maintenant les directives d'utilisation.
• Les composants MDL de clés tels que la mise en page, les cartes et les onglets sont conçus pour être réactifs et modulaires, en tirant parti des méthodologies Flexbox et BEM pour faciliter une architecture CSS plus structurée et évolutive.

Le projet de démonstration

Le projet de démonstration de cet article s'appelle Kaptain Kitty. C'est un modèle HTML visant à illustrer comment vous pouvez appliquer les concepts de conception de matériaux et les composants MDL que je discute dans cet article à une page Web.

Si vous souhaitez mettre Lite Material Design Lite à ses pas lorsque vous plongez dans l'article, vous aurez besoin de votre éditeur de code préféré et d'un navigateur moderne à jour.

Vous pouvez afficher le projet de démonstration et son code source sur Codepen:

Voir le modèle de démonstration de stylo à l'aide de Material Design Lite par SitePoint (@SitePoint) sur Codepen.

Commençons.

y compris la conception de matériaux Lite dans votre projet

Quand il s'agit d'inclure MDL dans votre projet, vous avez les options suivantes:

• Chargez les fichiers CSS et JavaScript nécessaires à l'aide de [CDN de Google] (Network de livraison de contenu).
• Téléchargez les fichiers CSS et JavaScript minifiés et hébergez-les sur votre serveur.
• Téléchargez et créez le code source du projet MDL sur GitHub.
• Si vous utilisez Bower pour gérer votre projet, vous pouvez taper la commande suivante pour installer les fichiers de bibliothèque MDL dans le dossier Bower_Components: Bower Installer Material-Dessign-Lite --Save
• Si NPM est votre gestionnaire de package de choix, exécutez la commande suivante pour installer les fichiers MDL dans le dossier Node_Modules: NPM Installer Material-Design-Lite --Save

Google recommande d'utiliser les fichiers CSS et JavaScript hébergés sur leur CDN. Ceci est la méthode que vous trouverez dans la page de démonstration de cet article.

Tout d'abord, dans la section de votre document HTML, incluez des références au fichier MDL CSS, des icônes de conception de matériel de Google et la feuille de style du projet, où vous allez ajouter vos propres personnalisations:

<span><span><span><link</span> rel<span>="stylesheet"</span>
</span></span><span>      <span>href<span>="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"</span>></span> 
</span><span><span><span><link</span> rel<span>="stylesheet"</span>
</span></span><span>      <span>href<span>="https://fonts.googleapis.com/icon?family=Material+Icons"</span>></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/styles.css"</span>></span></span>

Ensuite, juste avant la balise de fermeture

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!