Bootstrap vs. Material Design

¿Qué son realmente?

Bootstrap es un framework de maquetación que nació en 2012, mientras que Material Design no. Realmente no hay un framework que aplique sus estilos, sino que se creó como una guía de estilos y a partir de ahí surgieron proyectos que crearon el framework (por ejemplo, Materialize).

 

Bootstrap

 

Bootstrap nació en 2012 a partir de los estilos gráficos de Twitter complementados con algunas funcionalidades de jQuery para hacerlo una gran base de maquetación. Los elementos más destacables fueron sus retículas (grid), sus estilos de texto y gran variedad de funcionalidades en jQuery como son los modales, slider, acordeones…

Debido a su dependencia en gran medida de componentes Javascript (además de HTML y CSS) cuenta con un amplio soporte y documentación que ayuda a hacerlo mucho más fácil para trabajar con él.

 

Material Design

 

Por su parte, Material Design fue desarrollado en 2014 por Google. Se basa en los motivos de la "tarjeta" que se introdujeron por primera vez en Google Now. Es un lenguaje de diseño mobile-first.

Además de su facilidad de implementación y uso, otra gran característica de esta plataforma de diseño es la falta de dependencia de los marcos y bibliotecas de JavaScript.

En Materialize también cuenta con su propio sistema de grid (no definido propiamente en Material Design). Lo cual permite la realización de paginas muy complejas con el estilo de Google y todas sus funcionalidades. Y al igual que Bootstrap podemos darles, a partir del CSS, nuestros propios estilos.

 

Diferencias principales

 

Aunque ambos se utilizan para el desarrollo web, Material Design está más orientado hacia la apariencia de una web o aplicación, mientras que Bootstrap por su parte, se centra en crear fácilmente sitios web responsive y aplicaciones que sean funcionales cuando se trata de la experiencia del usuario.

 

Diseño y componentes

 

Por un lado, MD viene con numerosos componentes que proporcionan un diseño base y los cuales siguen estrictamente los patrones marcados.

Mientras, Bootstrap al ser de código abierto, cuenta con multitud de componentes de terceros compatibles con Bootstrap. Y además su famoso sistema de cuadrícula que permite características más avanzadas que el que puede poseer MD.

En apariencia, tiene mucho más atractivo Material Design por su variedad de colores, ya que Bootstrap trae un diseño predeterminado (aunque cuenta con numerosos temas donde elegir).

 

Comparativa de funcionalidades

 

 

Compatibilidad del navegador y frameworks

 

Los dos son compatibles en todos los navegadores.

Con respecto a los frameworks, Material Design es compatible tanto con los de Angular Material como con React Material. Utiliza el preprocesador SASS.

Bootstrap admite React Bootstrap y Angular UI Bootstrap. Y utiliza preprocesadores SASS y LESS.

 

Documentación y soporte

 

En este sentido podríamos decir que Bootstrap saca ventaja, ya que su documentación es impecable y tiene una gran comunidad que es fuertemente activa prestando ayuda. Gracias a esto se hace más fácil desarrollar.

En el caso de Material Design, al basarse en el BEM (metodología Bloque, Elemento, Modificador) y que sus componentes se crean a partir de combinación de clases, se hacen más fáciles de usar, pero por otro lado también afectan al HTML. Además, el soporte disponible es bastante limitado.

 

Documentación y soporte

 

En este sentido podríamos decir que Bootstrap saca ventaja, ya que su documentación es impecable y tiene una gran comunidad que es fuertemente activa prestando ayuda. Gracias a esto se hace más fácil desarrollar.

En el caso de Material Design, al basarse en el BEM (metodología Bloque, Elemento, Modificador) y que sus componentes se crean a partir de combinación de clases, se hacen más fáciles de usar, pero por otro lado también afectan al HTML. Además, el soporte disponible es bastante limitado.

 

Sistema de rejilla

 

La cuadrícula de Bootstrap divide la página en 12 columnas de igual tamaño. Dependiendo del ancho de la ventana, se aplican cuatro clases de tamaño diferentes: extrapequeño (de 0 a 768px de ancho), pequeño (768px a 992px), mediano (992px a 1200px) y grande (1200px ó +).

La cuadrícula de MD es de un sistema similar pero solo tiene tres tamaños: teléfono (0 a 480px), tablet (480px a 840px) y escritorio (840px o +). El escritorio MDL tiene 12 columnas, la tableta tiene 8 columnas y el teléfono tiene solo 4 columnas.

 

¿Cómo sé cuál debo elegir?

 

Podemos decir que Bootstrap es más adecuado para sitios web minimalistas y profesionales. Y quizá Material Design para sitios web más creativos, centrados en la apariencia y que requieren de animaciones o diseños más especiales.

Puede que Bootstrap sea más completo a nivel de pequeños detalles y el soporte que se ofrece, aunque gráficamente, Material Design está por encima.

La decisión final de cuál usar nos la darán las necesidades que tenga nuestro proyecto.