MUI

MUI is a lightweight CSS framework that follows Google's Material Design guidelines. It was designed from the ground up to be fast, small and developer friendly. The goal of the project is to provide a basic set of components and helper methods that developers can use to build sites that are fast and user-friendly. - muicss.com

Uso

  1. Accede al directorio (crealo de ser necesario) $HOME/www y crea el directorio muicss01:

     alumno@servidor:~ $ cd $HOME/www
     alumno@servidor:~/www $ mkdir muicss01
     alumno@servidor:~/www $ cd muicss01
    
  2. Accede a https://www.muicss.com, descarga el archivo en formato zip ofrecido y descomprimelo:

     alumno@servidor:~/www/muicss01 $ unzip $HOME/Downloads/mui-0.9.3.zip
    

    En este caso se ha descargado a MUI en su versión 0.9.3 (mui-0.9.3.zip) en el directorio $HOME/Downloads.

    El archivo zip ofrecido por MUI 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/muicss01 $ pwd && tree -L 2
     /home/alumno/www/muicss01
     .
     └── mui-0.9.3
         ├── angular
         ├── css
         ├── email
         ├── extra
         ├── js
         ├── react
         └── webcomponents
    
     8 directories, 0 files
    
  3. Restructura los archivos ofrecidos por MUI:

     alumno@servidor:~/www/muicss01 $ mv mui-0.9.3/css/ .
     alumno@servidor:~/www/muicss01 $ mv mui-0.9.3/js/ .
    
  4. Crea el archivo index.html con el siguiente contenido:

     <!doctype html>
     <html>
       <head>
         <meta charset="utf-8">
         <title>muicss01</title>
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link href="css/mui.min.css" rel="stylesheet" type="text/css" />
       </head>
       <body>
         <!-- CONTENIDO -->
         <!-- /CONTENIDO -->
         <script src="js/mui.min.js"></script>
       </body>
     </html>
    

    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 podrías llevar a cabo en el archivo css/main.css. Recuerda que tendrás que hacer uso de selectores de CSS.
    • El directorio mui-0.9.3 puede ser borrado.

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

alumno@servidor:~/www/muicss01 $ pwd && tree
/home/alumno/www/muicss01
.
├── css
│   ├── mui-rtl.css
│   ├── mui-rtl.min.css
│   ├── mui.css
│   └── mui.min.css
├── index.html
├── js
│   ├── mui.js
│   └── mui.min.js
└── mui-0.9.3
    ├── angular
    ├── email
    ├── extra
    ├── react
    └── webcomponents

8 directories, 7 files