Material Design Lite (MDL), como hemos aprendido de los tutoriales anteriores, viene con muchos componentes de la interfaz de usuario, que incluyen navegación, tarjetas y botones, que nos permiten crear sitios web rápidamente. Pero, ¿qué sucede si solo desea una o algunas de estas funciones? En ese caso, es mejor eliminar componentes innecesarios, aligerando las hojas de estilo y los archivos JavaScript.
Antes de comenzar a ver cómo se puede hacer esto, deberá tener las siguientes herramientas instaladas en su sistema:
Tuts + tutoriales Administrando sus tareas de compilación con Gulp.js, y The Command Line para diseño web: la automatización con Gulp lo ayudará a comenzar con Gulp si es necesario..
Para empezar, tenemos que agarrar los archivos de origen en bruto MDL copiándolos desde el repositorio. Ejecute lo siguiente en Terminal o Símbolo del sistema:
git clone https://github.com/google/material-design-lite.git mdl
Este comando descargará todos los archivos y los guardará en una nueva carpeta llamada "mdl". Vaya a la carpeta, ejecute el cd mdl
comando, y usted debe encontrar el sin compilar la hoja de estilo y el JavaScript se separaron en parciales para cada componente individual, así como los mixins y las variables en MDL.
Ahora, ejecute el siguiente comando dentro de la carpeta para extraer las dependencias de MDL:
npm instalar
Las dependencias incluyen Mocha, PhantomJS, junto con una serie de complementos de Gulp, como gulp-sass y gulp-autoprefixer. Estas son las herramientas y bibliotecas que se requieren para compilar todos los parciales en una sola hoja de estilo y archivo de JavaScript. Una vez completado, encontrará estas dependencias almacenadas en una carpeta llamada "node_modules".
En este ejemplo, usaremos el componente de navegación, pero también incluiremos los botones y los componentes del campo de texto para que podamos agregar un campo de búsqueda expandible en la navegación. Además, incluiremos el lengüeta componente, simplemente porque podemos aplicar pestañas en la navegación.
Ahora abra el archivo “material-design-lite.scss” y comente las referencias de estilo del componente relevante de la lista.
// Variables y mixins @import "variables"; @import "mixins"; // Restablecimientos y dependencias @import "resets / resets"; @import "tipografía / tipografía"; // Componentes @import "paleta / paleta"; // @import "ripple / ripple"; // @importar "animación / animación"; // @import "badge / badge"; @importar "botón / botón"; // @importar "tarjeta / tarjeta"; // @import "checkbox / checkbox"; // @import "data-table / data-table"; // @import "footer / mega_footer"; // @import "footer / mini_footer"; // @import "icon-toggle / icon-toggle"; // @import "menu / menu"; // @importar "progreso / progreso"; @importar "diseño / diseño"; // @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";
Del mismo modo, abra "gulpfile.js" y comente el JS innecesario bajo el FUENTES
referencia.
var FUENTES = [// Controlador de componentes 'src / mdlComponentHandler.js', // Polyfills / dependencies 'src / third_party / ** / *. js', // Componentes 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 ', // Componentes complejos (que reutilizan componentes básicos)' src / layout / layout.js ', // 'src / data-table / data-table.js', // Y finalmente, las ondulaciones // 'src / ripple / ripple.js'];
Por último, ejecute el trago
comando en la terminal.
Este comando compila la hoja de estilo y el archivo JavaScript, luego envía la versión minificada a la carpeta "dist". Como hemos eliminado tantas partes innecesarias, la hoja de estilo y el archivo JS son aproximadamente un 40% más ligeros.
Compare esto con la versión estándar (alrededor de 300 Kb): nuestro CSS es de 113 Kb sin compilarEcha un vistazo a la demo; Nuestro componente de navegación y muy poco más.!
Depende totalmente de usted lo que incluya y elimine de su compilación de Material Design Lite. Háganos saber en los comentarios qué componentes de MDL extraería y utilizaría por su cuenta..
Esta es la última entrega de nuestra serie Learning Material Design Lite. Espero que lo hayas disfrutado y que te haya ayudado a comenzar a utilizar MDL.!