Colaborador: Samuel Hindley, GDG Málaga
Artículo técnico: Material Design + Bootstrap (Español and English)
Material Design + Bootstrap (Español)
En cuanto a desarrollo front-end se refiere, son pocas las personas que no conocen Bootstrap. Y para quien no lo sepa se trata de uno de los frameworks más populares, creado por Twitter, para el desarrollo de proyectos web móviles y “responsivas” en HTML, CSS y JavaScript. Bootstrap ofrece un extenso catálogo de elementos HTML y CSS modificados para crear unos diseños espectaculares con un esfuerzo mínimo.
Por otro lado, el concepto Material Design se refiere a una filosofía y conjunto de pautas enfocadas al diseño en Android, aunque hoy en día estos populares principios de diseño para UI/UX se están utilizando para todo tipo de plataformas. Fue Google quien lo creó y lo implementó en su sistema operativo móvil desde la versión 5.0 Lollipop y a partir de ahí la mayoría de las grandes aplicaciones Android empezaron a adoptar este diseño.
Recibe su nombre por basarse en objetos materiales donde la profundidad de las capas, las superficies, los bordes, las sombras y los colores juegan un papel muy importante.
Ahora, siendo un amante de los principios del Material Design creados por Google y frecuente usuario de Bootstrap quería alguna forma de combinar estos dos elementos para mi página web personal. Ya existen frameworks muy buenos para implementar Material Design como Polymer o AngularJS, pero no los había usado nunca, entonces con una simple consulta en nuestro buscador favorito encontré el resultado de Material Design + Bootstrap: un gran proyecto en GitHub de FezVrasta llamado Material Design for Bootstrap.
Se trata de un tema de Bootstrap para incluir fácilmente todos los diseños, formas y colores de Material Design en vuestras aplicaciones web basadas en Bootstrap 3 (está en constante desarrollo por lo que no aseguran que funcione al 100% en versiones anteriores).
Se puede incluir de varias formas: usando Bower, Meteor o simplemente incluyendo los archivos CSS después del CSS de Bootstrap y lo mismo con los archivos JavaScript, de forma local o si lo prefieres a través de su CDN oficial. Los archivos JavaScript son muy importantes ya que contienen el código necesario para conseguir ese efecto de “onda” cuando pulsamos sobre alguno de los botones. Con todo esto, nuestros botones, barras de progreso, barras de navegación, etc. serán convertidos automáticamente a ese Material Design que buscamos. A continuación pueden ver algunos ejemplos de cómo quedan los componentes de Bootstrap que estamos acostumbrados a usar:
Animo a todo aquel que use Bootstrap a probar este tema, muy fácil de usar como habréis visto, y muy útil para darle un “look” más moderno y familiar a vuestros usuarios. Para más información detallada sobre cómo usarlo y sobre cada uno de los elementos podéis visitar el repositorio oficial aquí, donde también podréis apoyar al proyecto y realizar aportaciones al código.
Y para aquellos ansiosos por la versión 4 de Bootstrap, os adelanto que el creador FezVrasta, me ha confirmado que se está trabajando en ello para que tenga total compatibilidad con futuras versiones.
Material Design + Bootstrap (English)
When it comes to front-end development, there are few people that don´t know what Bootstrap is. And for those who don’t, it's one of the most popular frameworks, created by Twitter, for development in mobile and responsive web projects in HTML, CSS and JavaScript. Bootstrap offers an extensive catalogue of HTML and CSS elements modified to create spectacular designs with minimum effort.
On the other hand, the Material Design concept refers to a philosophy and set of guidelines focused on Android design, although nowadays these popular design principles for UI/UX are being used for all kinds of platforms. Google created it and implemented it in their own mobile operating system since version 5.0 Lollipop and from then on most of the major Android apps have begun to adopt this design.
It receives its name because it is based on material objects where the depth of the layers, surfaces, edges, shadows and colours play an important role.
Now, being a big fan of the Material Design principles created by Google and a frequent user of Bootstrap I wanted a way of combining these two elements for my personal website. There are already very good frameworks for implementing Material Design like Polymer or AngularJS, but I had never used them before, so with a simple query in our favourite search engine I found the result to Material Design + Bootstrap: a great project on GitHub by FezVrasta called Material Design for Bootstrap.
It consists of a Bootstrap theme to easily include all the designs, shapes and colours of Material Design in your web applications based on Bootstrap 3 (it is in constant development so it is not guaranteed to work 100% on previous versions).
It can be included in several ways: using Bower, Meteor or simply including the CSS files after the Bootstrap CSS and the same with the JavaScript files, locally, or if your prefer through their official CDN. The JavaScript files are very important as they contain the necessary code to achieve that “wave” effect when we press one of the buttons. With all this, our buttons, progress bars, navigation bars, etc. will all be converted automatically to that Material Design we’re looking for. Here you can see some examples of how the Bootstrap components that we’re used to using would look:
I encourage anyone who uses Bootstrap to try out this theme, very easy to use as you’ve seen, and very useful for giving a more modern and familiar look to our users. For more detailed information about how to use this and about each of its elements you can visit the official repository here, where you can also support the project and make contributions to the code.
And for those anxious for version 4 of Bootstrap, I can tell you that the creator FezVrasta, has confirmed that he is currently working on it so that there will be full compatibility with future versions.