Materil Kit, diseño de Material Design con sintaxis de Bootstrap

Materil Kit, diseño de Material Design con sintaxis de Bootstrap

Para los diseñadores web que su día a día consista en jugar con Bootstrap y estén satisfechos con el framework, pues agarraos porque os traigo una librería llamada Material Kit, de Creative Tim que nos permite hacer el diseño de nuestra página web con la misma sintaxis pero inspirado en el diseño de Material Design de Google.

La librería viene con todos los archivos necesarios (css, js, sass) para incluirlos en nuestro proyecto y los podemos conseguir desde su página web pasando por un formulario de registro que no tardaremos mas de 2 minutos en rellenarlo.

Tienen 2 licencias de uso, la personal y la Developer, para los proyectos que se vayan a llevar a nivel de producción fuera de nuestro servidor local y para el público mayor.

Incluyendo la librería en mi proyecto

Después de descargarlo tendremos que incluir los css y los .js a nuestro proyecto y ya estaremos listos para usarlo.

<!-- CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/material-kit.css">
<!-- javascript -->
<script src="js/material-kit.js"></script>
<script src="js/material.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.js"></script>

 

Echando un vistazo a algunas componentes

Tienen muchas de las componentes de las que dispone Bootstrap pero no todas, por ejemplo podemos ver los botones:

 

material kit

<button class="btn btn-raised btn-default">Default</button>
<button class="btn btn-raised btn-primary">Primary</button>
<button class="btn btn-raised btn-info">Info</button>
<button class="btn btn-raised btn-success">Success</button>
<button class="btn btn-raised btn-warning">Warning</button>
<button class="btn btn-raised btn-danger">Danger</button>

Las tiras de alerts

material kit

<div class="alert alert-info">
    <div class="container-fluid">
    <div class="alert-icon">
    <i class="material-icons">info_outline</i>
    </div>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true"><i class="material-icons">clear</i></span>
    </button>
    <b>Info alert:</b> You've got some friends nearby, stop looking at your phone and find them...
    </div>
</div>

Y por último, podemos usar los <i>iconos</i> de MD

Screenshot from 2016-04-18 23:36:36

<i class="material-icons">face</i>

 

Página web de los creadores 

Enlace a la documentación

Enlace para ver los iconos 

Desarrollador a tiempo completo, amante del buen rol y los juegos de plataforma. Mi tiempo libre me gusta invertirlo para ver series y malas peliculas