jueves, 10 de diciembre de 2015

Instalación de Materialize Framework CSS de Google


En este tutorial, iniciaremos con lo que es la instalación del framework materialize. Además de un ejemplo de  un template simple que he puesto de foto de entrada al post.


  • Tenemos dos opciones para descargar los recursos de materialize, en este caso vamos a optar por la opción de Materialize ( que brinda los css y javascript ) es una versión estandar con los archivos minificados y no minificados .

  • Una vez descargado, descomprimimos el archivo y tendremos una carpeta materialize con los archivos del framework.




  • Lo que vamos hacer es copiar las carpetas css, font, js  y pegarlas en la carpeta de nuestro proyecto app_materialize, en mi caso el localhost (estoy usando XAMPP).

  • Creamos un index.html ,  configuración de  los recursos html y estructura del proyecto .
ESTRUCTURA DEL PROYECTO


CONFIGURACION DE LOS RECURSOS HTML 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
  <html lang="es">
    <head>
      <meta charset="utf-8">
      <meta name=description content="">
      <!--Optimizado para móviles -->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      
      <title>materialize</title>
      <!--  Importar Google Icon Font-->
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      
      <!--  Importar materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
 
   <!--  Importar tus estilos propios css --> 
      <link rel="stylesheet" href="css/app.css" />

    </head>

    <body>
    
      <!--Importar jQuery antes materialize.js-->
      <script type="text/javascript" src="js/jquery.min.js"></script>
      <!-- Importar materialiaze.js -->
      <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
  </html>

Observación : Materialize Javascript depende de JQuery es por eso que en nuestra carpeta debemos tener la librería JQuery , ustedes la pueden importar desde un cdn o google les dejo en link ( https://developers.google.com/speed/libraries/ ) , en mi caso yo la tengo descarga en la carpeta js del proyecto.
Eso sería todo el framework está instalado y nos tocaría probar sus componentes.

Ahora vamos a probar algunos componentes
  • Vamos agregar un Navbar propio de materialize .
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 <!DOCTYPE html>
  <html lang="es">
    <head>
      <meta charset="utf-8">
      <meta name=description content="">
      <!--Optimizado para móviles -->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      
      <title>materialize</title>
      <!--  Importar Google Icon Font-->
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      
      <!--  Importar materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
 
   <!--  Importar tus estilos propios css --> 
      <link rel="stylesheet" href="css/app.css" />

    </head>

    <body>
     <!-- Navbar de materialize -->
     <nav>
      <div class="nav-wrapper">
       <a href="#" class="brand-logo center">Project</a>
       <ul id="nav-mobile" class="left hide-on-med-and-down">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
       </ul>
      </div>
     </nav>

      <!--Importar jQuery antes materialize.js-->
      <script type="text/javascript" src="js/jquery.min.js"></script>
      <!-- Importar materialiaze.js -->
      <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
  </html>

Abrimos el proyecto en nuestro navegador el documento index.html

  • Utilizamos el sistema Grid de materialize para la sección principal .
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
  <html lang="es">
    <head>
      <meta charset="utf-8">
      <meta name=description content="">
      <!--Optimizado para móviles -->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      
      <title>materialize</title>
      <!--  Importar Google Icon Font-->
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      
      <!--  Importar materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
 
   <!--  Importar tus estilos propios css --> 
      <link rel="stylesheet" href="css/app.css" />

    </head>

    <body>
     <!-- Navbar de materialize -->
     <nav>
      <div class="nav-wrapper">
       <a href="#" class="brand-logo center">Project</a>
       <ul id="nav-mobile" class="left hide-on-med-and-down">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
       </ul>
      </div>
     </nav>
     <section class="main-content">
     <!-- Sistema Grid de materialize -->
     <div class="row">
     <!-- columnas s , m , l de materialize -->
         <div class="col s12 m12 l12">
           <div class="center">
             <h1>Marketing stuff!</h1>
             <h3>Codequince</h3>
             <p class="black-text">I am a very simple card. I am good at containing small bits of information.
             I am convenient because I require little markup to use effectively. I am similar to what is called a panel in other frameworks.
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam quam mollitia ab adipisci nostrum doloremque eum qui tempora rerum eos, enim inventore id, consequatur magni asperiores molestias recusandae vero perferendis?
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem voluptatem fugit quo aliquam mollitia, similique, rem, maiores cum assumenda aspernatur amet. Maiores, nemo consequuntur. Molestiae voluptatum et in eveniet est.
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia reiciendis molestias sunt corporis.
              </p>
               <a href="#" class="btn-large green">Empezar</a>
          </div>
        </div>
      </div>
   </section>

      <!--Importar jQuery antes materialize.js-->
      <script type="text/javascript" src="js/jquery.min.js"></script>
      <!-- Importar materialiaze.js -->
      <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
  </html>

Volvemos a recargar el index.html para ver los cambios.


  • Ahora insertamos un footer que trae materialize.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
  <html lang="es">
    <head>
      <meta charset="utf-8">
      <meta name=description content="">
      <!--Optimizado para móviles -->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      
      <title>materialize</title>
      <!--  Importar Google Icon Font-->
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      
      <!--  Importar materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
 
   <!--  Importar tus estilos propios css --> 
      <link rel="stylesheet" href="css/app.css" />

    </head>

    <body>
     <!-- Navbar de materialize -->
     <nav>
      <div class="nav-wrapper">
       <a href="#" class="brand-logo center">Project</a>
       <ul id="nav-mobile" class="left hide-on-med-and-down">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
       </ul>
      </div>
     </nav>
     <section class="main-content">
     <!-- Sistema Grid de materialize -->
      <div class="row">
     <!-- columnas s , m , l de materialize -->
      <div class="col s12 m12 l12">
       <div class="center">
        <h1>Marketing stuff!</h1>
        <h3>Codequince</h3>
        <p class="black-text">I am a very simple card. I am good at containing small bits of information.
             I am convenient because I require little markup to use effectively. I am similar to what is called a panel in other frameworks.
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam quam mollitia ab adipisci nostrum doloremque eum qui tempora rerum eos, enim inventore id, consequatur magni asperiores molestias recusandae vero perferendis?
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem voluptatem fugit quo aliquam mollitia, similique, rem, maiores cum assumenda aspernatur amet. Maiores, nemo consequuntur. Molestiae voluptatum et in eveniet est.
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia reiciendis molestias sunt corporis.
              </p>
              <a href="#" class="btn-large green">Empezar</a>
             </div>
          </div>
      </div>
    </section>
    <!-- Footer de materialize -->
  <footer class="page-footer">
   <div class="container">
    <div class="row">
     <div class="col l6 s12">
      <h5 class="white-text">Footer Content</h5>
      <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
                </div>
                <div class="col l4 offset-l2 s12">
                 <h5 class="white-text">Links</h5>
                 <ul>
                  <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
                  <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
                  <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
                 </ul>
                </div>
             </div>
         </div>
      <div class="footer-copyright">
          <div class="container">
              © 2015 codequince
              <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
          </div>
           </div>
        </footer>
      <!--Importar jQuery antes materialize.js-->
      <script type="text/javascript" src="js/jquery.min.js"></script>
      <!-- Importar materialiaze.js -->
      <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
  </html>

Se muestra el footer y en general el template de ejemplo que hemos realizado.


El archivo  app.css , que se encuentra en la carpeta css, tiene las siguientes reglas de estilos


Bueno aquí termina el tutorial, espero que se haya comprendido y cualquier duda que tengan pueden dejarla en los comentarios.
Publicado por en

No hay comentarios.:

Publicar un comentario

Suscribirse a: Comentarios de la entrada (Atom)