Primeros pasos con materializecss

Configuración

Una vez que haya descargado los archivos, extráigalos en su directorio designado.

Notarás que hay dos conjuntos de archivos. El min significa que el archivo está “comprimido” para reducir los tiempos de carga. Estos archivos minimizados generalmente se usan en producción, mientras que es mejor usar los archivos no minimizados durante el desarrollo.

Después de extraer, la estructura de archivos de su directorio debería verse así:

  MyWebsite/
  |--css/
  |  |--materialize.css
  |
  |--fonts/
  |  |--roboto/
  |
  |--js/
  |  |--materialize.js
  |
  |--index.html

Ejemplo de página HTML de MaterializeCSS:

<!DOCTYPE html>
<html>
 <head>
  <!--Import Google Icon Font-->
  <link href="http://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>
  <!--Import jQuery before materialize.js-->
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script type="text/javascript" src="js/materialize.min.js"></script>
 </body>
</html>

Descargar

Hay dos formas de usar MaterializeCSS, puede descargar los archivos en su sistema o usar los archivos de CDN (Content Delivery Network).

Descargar archivos

Incluir de CDN

  • Incluir CSS minimizado en la sección head:

     <!-- Compiled and minified CSS -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">

  • Incluya el archivo Javascript en la sección Cuerpo, justo antes de la etiqueta del cuerpo de cierre.

     <!-- Compiled and minified JavaScript -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>

Plantillas

Estas son las páginas de inicio más simples con funciones de encabezado, llamada a la acción e íconos.

Plantilla de inicio Plantilla de paralaje
Plantilla de inicio Plantilla de paralaje
Demostración o Descargar Demostración o Descargar

Página web utilizando Materializecss

Aquí hay un ejemplo de una página básica que usa el marco Materialise CSS que incorpora el sistema de cuadrícula y materialboxed.

<!DOCTYPE html>
<html>
<head>
<title>Materializecss Example webpage</title>
  <!--Import Google Icon Font-->
  <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Import materialize.css-->
  <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/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>
  <div class="container"> 
    <div class="row">
      <div class="col s12"><h3>MATERIALIZECSS EXAMPLE</h3><h4>A simple website just to show how an element is used.</h4></div>
      <div class="col s12 m6 l3">
        <img class="materialboxed" width="100%" height="220"  src="https://upload.wikimedia.org/wikipedia/commons/7/76/Katun_nature_reserve.jpg">
        <h4>Katun Nature Reserve</h4>
        <p><i>Lovely Place</i></p>
      </div>
      <div class="col s12 m6 l3">
        <img class="materialboxed" width="100%" height="220" src="https://upload.wikimedia.org/wikipedia/commons/4/4b/Computer_art_4.png">
        <h4>Art</h4>
        <p><i>Simple & Attractive</i></p>
      </div>
      <div class="col s12 m6 l3">
        <img class="materialboxed" width="100%" height="220" src="https://c1.staticflickr.com/9/8715/16947318656_4c6cbc3091_b.jpg">
        <h4>Food</h4>
        <p><i>For any occasion</i></p>
       </div>
      <div class="col s12 m6 l3">
        <img class="materialboxed" width="100%" height="220" src="https://c1.staticflickr.com/7/6179/6217102314_350be5e843.jpg">
        <h4>Steve Jobs</h4>
        <p><i>Inspiration</i></p>
      </div>
    <div class="col s12"><h5>Comment your suggestion</h5></div>
    </div>
  </div>
  <!--Import jQuery before materialize.js-->
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<script>
$(document).ready(function(){
  $('.materialboxed').materialbox();
});
</script>
</body>

¿Cómo puedo compilar mi Sass?

Esta sección solo es relevante si trabaja con la versión Sass de Materialise.

Primero, necesita instalar Sass en su directorio de trabajo:

gem install sass

Cuando tiene Sass instalado en su proyecto y desea actualizar su archivo .css de salida, debe usar el siguiente comando:

sass sass/materialize.scss public/style.css

NOTA: el segundo parámetro sass/materialize.scss es la ruta a su archivo .scss, y el último parámetro sass/style.css es la ruta a su carpeta de salida cuando se encuentra el archivo .css.

Si desea evitar este comando cada vez que realiza un cambio, puede ejecutar un comando de observación:

 sass --watch sass/sass:public/stylesheets

NOTA: este comando observa todos los archivos Sass en el directorio scss en busca de cambios y luego actualiza el archivo de estilo en nuestro directorio público.

Usando MaterializeCSS con Angular

Hay muchas formas de usar el marco MaterializeCSS.

Algunas cosas a tener en cuenta antes de ir a la instalación

  • No es un marco solo CSS, aunque tiene un nombre CSS. También podemos usar su SCSS
  • No está construido para Angular
  • Es un marco de componentes también construido en jquery. Aunque se supone que no debemos usar jquery (no sugerido) en angular, aún importamos.

Puede usar cualquiera de los siguientes métodos:

-CDN

  • Activos
  • Incluir en Angular (NPM)
  • Incluir en Angular (fuente con SCSS)

Cada uno tiene sus propias ventajas y desventajas.

CDN

Simplemente agregue esto a index.html y estará listo para comenzar.

 <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
 
 <!-- We need jquery first -->  
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

 <!-- Compiled and minified JavaScript -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>

Activos

Agréguelo como un activo en su proyecto. Esto ayuda a no depender de Internet cuando se construye y ejecuta localmente.

Descargar jQuery

Descargar versión CSS

  • Extraerlos

  • Copie materialize.min.css, jquery-3.2.1.min.js y materialize.min.js en su carpeta de activos

  • agregarlos a index.html

      <link rel="stylesheet" href="./assets/materialize.min.css" >
  <script src="./assets/jquery-3.2.1.min.js"></script>
  <script src="./assets/materialize.min.js"></script>

Incluir en angular (NPM)

En este método, incluimos directamente los archivos en nuestra compilación angular. Supongo que el proyecto angular está construido con @angular/cli por simplicidad.

Hacer

npm install materialize-css --save 
npm install jquery --save

Esto es lo mismo que descargar archivos CSS, pero no necesitamos agregarlos en nuestro repositorio.

Agregue lo siguiente a .angular-cli.json:

"styles": [
    "../node_modules/materialize-css/dist/css/materialize.css",
    "styles.scss"
]

...

"scripts":[
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/materialize-css/dist/js/materialize.js"
]

Incluir en angular (SCSS)

Descargar fuente con versión SCSS

Haga esto si desea aprovechar SCSS para cambiar el comportamiento predeterminado de la biblioteca. De lo contrario, aún puede usar el método anterior y usar SCSS al lado.

Agréguelos a una carpeta fuera de src. Se puede crear una carpeta materialize-src como hermana de src y pegar el contenido allí. Estamos haciendo esto porque la instalación de npm de materialize-css no nos da la versión scss. (Corrígeme si estoy equivocado )

instalar jquery

npm install jquery --save

Agrégalos a tu .angular-cli.json

"styles": [
    "../materialize-src/sass/materialize.scss",
    "styles.scss"
 ],
 "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../materialize-src/js/bin/materialize.min.js"
 ],

Integración con Angular:

Todos los métodos de instalación anteriores brindan una funcionalidad completa con materialización y no es necesario instalar más nada para trabajar en angular. Tome cualquier ejemplo y simplemente use la estructura HTML adecuada dentro de la parte componente de angular y estará listo para comenzar.

En algunos casos, es posible que deba jugar con javascript y para eso necesitamos usar jQuery. En lugar de eso, podemos usar el desarrollador de envoltura angular en angular2-materialize. Desarrollé un sitio funcional completo usando angular y materialise y nunca sentí la necesidad de eso.

Si aún crees que lo necesitas. Puede instalar de la siguiente manera:

  • Instalar materialise con cualquiera de las formas mencionadas anteriormente

  • Instalar angular2-materializar

      npm install angular2-materilize --save

    Add in angular app.module.ts

      import { MaterializeModule } from "angular2-materialize";

  @NgModule({
    imports: [
      //...
      MaterializeModule,
    ],
    //...
  })
Tarjetas →