Material Design para Bootstrap 3

Existe una clara tendencia en el mundo del desarrollo de intentar replicar una misma experiencia de usuario tanto en móviles como en navegadores de escritorio. Lograrlo no es sencillo, sin embargo existen recursos para facilitarnos esta tarea como es el caso de Material Design para Bootstrap 3.

material design para bootstrap 3

MD para Bootstrap 3 es un desarrollo de un programador independiente que está intentando, con gran éxito, replicar la experiencia de Material Design para Android en cualquier navegador web, algo que ya muchos intentaron, sin embargo este proyecto utiliza bootstrap como framework de desarrollo, detalle que es sumamente interesante.

Este recurso se instala fácilmente como cualquier theme para Bootstrap con la gran ventaja que esto representa. Es sin duda, una solución sencilla al problema de lograr una experiencia similar entre aplicaciones móviles nativas y soluciones basadas en navegadores.

Instalación de Material Design para Bootstrap 3

  • NPM : npm install bootstrap-material-design
  • Bower : bower install bootstrap-material-design

Una buena noticia para aquellos que están buscando economizar recursos, ya que este proyecto está disponible para su utilización desde dos CDN oficiales.

A continuación, les dejo un ejemplo de los scripts necesarios para su funcionamiento

  <!-- Material Design fonts -->
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">

  <!-- Bootstrap -->
  <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

  <!-- Bootstrap Material Design -->
  <link rel="stylesheet" type="text/css" href="dist/css/bootstrap-material-design.css">
  <link rel="stylesheet" type="text/css" href="dist/css/ripples.min.css">

Por último, les comento que este proyecto cuenta con los principales componentes de bootstrap en su versando para Material Design.

Como siempre les recomiendo visitar la web del proyecto para recibir más información además de ver sus funciones en acción.

Web: MD para Bootstrap 3

Categorizado en: