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
Accede al directorio (crealo de ser necesario)
$HOME/www
y crea el directoriomuicss01
:alumno@servidor:~ $ cd $HOME/www alumno@servidor:~/www $ mkdir muicss01 alumno@servidor:~/www $ cd muicss01
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
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/ .
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.
- El contenido de tu documento HTML, y que será visualizado por el usuario, quedará dentro de los
comentarios
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