Share
Comme nous l’avons appris dans les didacticiels précédents, Material Design Lite (MDL) contient de nombreux composants de l’interface utilisateur, notamment la navigation, les cartes et les boutons, qui nous permettent de créer rapidement des sites Web. Mais que se passe-t-il si vous ne voulez qu'une ou plusieurs de ces fonctionnalités? Dans ce cas, il est préférable de supprimer les composants inutiles, en allégeant les feuilles de style et les fichiers JavaScript..
Avant de voir comment cela peut être fait, vous devez avoir installé les outils suivants sur votre système:
Tuts + tutorials Gestion de vos tâches de construction avec Gulp.js et de la ligne de commande pour la conception Web: L'automatisation avec Gulp vous aidera à démarrer avec Gulp le cas échéant.
Pour commencer, nous devons récupérer les fichiers source MDL bruts en les copiant à partir du référentiel. Exécutez les opérations suivantes dans un terminal ou une invite de commande:
clone de git https://github.com/google/material-design-lite.git mdl
Cette commande téléchargera tous les fichiers et les enregistrera dans un nouveau dossier appelé «mdl». Accédez au dossier, exécutez le cd mdl commande, et vous devriez trouver le non compilé feuille de style et JavaScript séparés en partiels pour chaque composant, ainsi que les mixins et les variables dans MDL.
Maintenant, exécutez la commande suivante dans le dossier pour extraire les dépendances MDL:
npm installer
Les dépendances incluent Mocha, PhantomJS, ainsi qu'un certain nombre de plugins Gulp, tels que gulp-sass et gulp-autoprefixer. Ce sont les outils et les bibliothèques nécessaires à la compilation de tous les partiels dans une seule feuille de style utilisable et un fichier JavaScript. Une fois terminé, vous trouverez ces dépendances stockées dans un dossier nommé «node_modules»..
Dans cet exemple, nous allons utiliser le composant de navigation, mais nous allons également inclure les boutons et les composants de champ de texte afin que nous puissions ajouter un champ de recherche extensible dans la navigation. De plus, nous allons inclure le languette composant, tout simplement parce que nous pouvons appliquer des onglets dans la navigation.
Ouvrez maintenant le fichier «material-design-lite.scss» et commentez les références de style de composant pertinentes dans la liste..
// Variables et mixins @import "variables"; @import "mixins"; // Réinitialisation et dépendances @import "réinitialise / réinitialise"; @import "typographie / typographie"; // Composants @import "palette / palette"; // @import "ondulation / ondulation"; // @import "animation / animation"; // @import "badge / badge"; @import "bouton / bouton"; // @import "carte / carte"; // @import "checkbox / checkbox"; // @import "table de données / table de données"; // @import "footer / mega_footer"; // @import "footer / mini_footer"; // @import "icône-bascule / icône-bascule"; // @import "menu / menu"; // @import "progress / progress"; @import "layout / layout"; // @import "radio / radio"; // @import "slider / slider"; // @import "spinner / spinner"; // @import "switch / switch"; @import "tabs / tabs"; @import "textfield / textfield"; // @import "tooltip / tooltip"; // @import "shadow / shadow"; // @import "grid / grid";
De même, ouvrez «gulpfile.js» et commentez le JS inutile sous le SOURCES référence.
var SOURCES = [// Gestionnaire de composants 'src / mdlComponentHandler.js', // Polyfills / dependencies 'src / third_party / ** / *. js', // Composants de base 'src / button / button.js', // 'src / checkbox / checkbox.js', // 'src / icon-toggle / icon-toggle.js', // 'src / menu / menu.js', // 'src / progress / progress.js', // 'src / radio / radio.js', // 'src / slider / slider.js', // 'src / spinner / spinner.js', // 'src / switch / switch.js', 'src /tabs/tabs.js ',' src / textfield / textfield.js ', //' src / tooltip / tooltip.js ', // Composants complexes (qui réutilisent les composants de base)' src / layout / layout.js ', // 'src / data-table / data-table.js', // Et enfin, les ondulations // 'src / ripple / ripple.js'];
Enfin, lancez le gorgée commande dans Terminal.
Cette commande compile la feuille de style et le fichier JavaScript, puis affiche la version modifiée dans le dossier «dist». Comme nous avons supprimé tant de parties inutiles, la feuille de style et le fichier JS sont environ 40% plus légers..
Comparez cela à la version standard (environ 300 Ko): notre CSS est à 113 Ko non compilé.Regardez la démo. notre composant de navigation et très peu d'autre!
C’est à vous de décider ce que vous incluez et supprimez de votre version de Material Design Lite. Indiquez-nous dans les commentaires quels composants MDL vous extrayez et utilisez seuls.
Ceci est le dernier volet de notre série Learning Material Design Lite. J'espère que vous l'avez trouvé agréable et que cela vous a aidé à démarrer avec MDL!
Accentsconagua