Materialize

Materialize, a CSS Framework based on material design. Material Design (created and designed by Google) is a design language that combines the classic principles of successful design along with innovation and technology. Google's goal is to develop a system of design that allows for a unified user experience across all their products on any platform. - http://materializecss.com

Material design es una normativa de diseño enfocado en la visualización del sistema operativo Android, además en la web y en cualquier plataforma. Fue desarrollado por Google. Se trata de un diseño más limpio, en el que predominan animaciones y transiciones de respuesta, el relleno y los efectos de profundidad tales como la iluminación y las sombras. - Wikipedia

Uso

Materialize requiere del uso de jQuery.

Crea el directorio $HOME/www/materializecss01 y accede a él:

alumno@servidor:~ $ mkdir -p $HOME/www/materializecss01
alumno@servidor:~ $ cd $HOME/www/materializecss01

Accede a https://github.com/Dogfalo/materialize/releases/latest, descarga el archivo en formato zip ofrecido con nombre materialize-*.zip y descomprimelo:
```
alumno@servidor:~/www/materializecss01 $ unzip $HOME/Downloads/materialize-v1.0.0.zip
```
En este caso se ha descargado a Materialize en su versión 1.0.0 (materialize-v1.0.0.zip) en el directorio $HOME/Downloads.

El archivo zip ofrecido por Materialize cuenta con varios recursos para su uso: archivos de CSS, JavaScript, Web Fonts, etc. Lo anterior conlleva a que ya cuentan con una estructura sus directorio/archivos y será necesario restructurarlos:
```
alumno@servidor:~/www/materializecss01 $ pwd && tree -L 1
/home/alumno/www/materializecss01
.
└── materialize
    ├── LICENSE
    ├── README.md
    ├── css
    └── js

4 directories, 2 files
```

Restructura los archivos ofrecidos por Materialize:

alumno@servidor:~/www/materializecss01 $ mv materialize/css/ .
alumno@servidor:~/www/materializecss01 $ mv materialize/js/ .

Crea los archivos vácios css/main.css y js/main.js:

alumno@servidor:~/www/materializecss01$ touch css/main.css js/main.js

Integra a jQuery al proyecto accediendo a https://code.jquery.com y en la sección jQuery 3.x bajo la sección jQuery Core obten el enlace hacía el archivo con nombre jquery-*.min.js (minified) y descarga dicho archivo:
```
alumno@servidor:~/www/materializecss01 $ wget https://code.jquery.com/jquery-3.3.1.min.js -O js/jquery.min.js
```
En este caso se ha descargado el archivo jquery-3.3.1.min.js de jQuery en su versión 3.3.1.

Crea el archivo index.html con el siguiente contenido:

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="http://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="css/materialize.min.css" media="screen,projection">
    <link rel="stylesheet" href="css/main.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>materializecss01</title>
  </head>
  <body>
    <!-- CONTENIDO -->
    <!-- /CONTENIDO -->
    <script src="js/jquery.min.js"></script>
    <script src="js/materialize.min.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>

Al terminar en el directorio $HOME/www/materializecss01 encontrarás la siguiente estructura:

alumno@servidor:~/www/materializecss01 $ pwd && tree
/home/alumno/www/materializecss01
.
├── css
│   ├── main.css
│   ├── materialize.css
│   └── materialize.min.css
├── index.html
├── js
│   ├── jquery.min.js
│   ├── main.js
│   ├── materialize.js
│   └── materialize.min.js
└── materialize
    ├── LICENSE
    └── README.md

5 directories, 20 files

Inicia a thttpd y accede a él con el navegador web.

Notas

El contenido de tu documento HTML, y que será visualizado por el usuario, quedará dentro de los comentarios CONTENIDO.
Si requieres modificar el aspecto visual o estilo de algún elemento HTML lo llevas a cabo en el archivo css/main.css.

Recuerda que tendrás que hacer uso de selectores de CSS.
El directorio materialize puede ser borrado.