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:

<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

<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