Materialise CSS es un lenguaje de diseño que se utiliza para desarrollar el sistema de diseño que permite una experiencia de usuario unificada en todos los productos en cualquier plataforma.
Materialise CSS viene en dos formas diferentes, cualquiera de ellas puede usarse simplemente descargando ese archivo, puede usar Materialise CSS en su sistema.
- Materialise: esta es la versión estándar que viene con los archivos CSS y JavaScript minificados y no minificados. Puede descargar este archivo desde este enlace https://github.com/Dogfalo/materialize/releases/download/1.0.0/materialize-v1.0.0.zip
- Sass: esta versión contiene los archivos SCSS de origen. Si elige esta versión, tiene más control sobre qué componentes incluir, pero necesita un compilador Sass para esto. Puede descargar este archivo desde este enlace https://github.com/Dogfalo/materialize/releases/download/1.0.0/materialize-src-v1.0.0.zip
Nota: Podemos usar enlaces CDN o instalar Materialise a través de NPM y Bower.
Usando el enlace CDN:
<!– CSS compilado y minificado –>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css”><!– JavaScript compilado y minificado –>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js”></script>
Comando de instalación de NPM:
npm install materialize-css@next
Comando de instalación de Bower:
bower install materialize
Configuración de Materialise: después de descargar el archivo, simplemente descomprímalo en la carpeta de su proyecto. Su carpeta Materialise se verá como la imagen de abajo.
HABLAR CON DESCARO A
Materializar
Configuración de HTML: ahora simplemente cree un archivo HTML donde necesite importar Materialise, usamos la versión estándar de Materialise.
Ejemplo 1: en este ejemplo, simplemente usaremos el color del texto y el color de fondo. Para hacer la alineación correcta usaremos col y flow class. Use las bibliotecas anteriores en su código o utilícelas en la carpeta local como se indica a continuación.
HTML
<!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link href= "https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!--Import materialize.css--> <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" /> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> </head> <body> <h1 class="green-text text-darken-1"> GeeksforGeeks </h1> <div class="row"> <div class="col s12"> <span class="flow-text green darken-1"> A Computer Science Portal for Geeks </span> </div> </div> <!--JavaScript at end of body for optimized loading--> <script type="text/javascript" src="js/materialize.min.js"> </script> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, simplemente usaremos el color del texto, así como las clases col y flow-text para lograr un diseño visual atractivo.
HTML
<!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link href= "https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!--Import materialize.css--> <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" /> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> </head> <body> <h1 class="green-text text-darken-2"> GeeksforGeeks </h1> <div class="row"> <div class="col s12"> <span class="flow-text"> This is simple example off how to use Materialize in your website </span> </div> <div class="col s6 offset-s6"> <span class="flow-text"> Materialize CSS </span> </div> </div> <!--JavaScript at end of body for optimized loading--> <script type="text/javascript" src="js/materialize.min.js"> </script> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA