Bootstrap VS Material design
Los frameworks de maquetación son cada vez más conocimos y usados. Pero siempre aparecen nuevas tendencias en diseño que provocan que tengamos que cambiar nuestro framework por otro más moderno. Vamos a comparar un clásico como Bootstrap, creado por Twitter, y Material design, creado por Google. Adelante con este Bootstrap VS Material design.
Las características de Bootstrap
Este framework de maquetación nació en 2012. Lo que hizo entonces Twitter fue coger los estilos gráficos de su red social, y complementarlos con algunas funcionalidades de jQuery para hacerlo una gran base para empezar cualquier proyecto de maquetación. Los elementos más destacables fueron su retícula (o grid), sus estilos de texto aplicados a los principales elementos HTML (tipografía, tablas, formularios, botones) y una gran variedad de funcionalidades en jQuery (modales, slider, acordeones, etc).
De esta forma, teníamos una base de maquetación, tanto para proyectos simples hasta muy detallados gráficamente. Como inconvenientes, el estilo gráfico parecía muy enfocado a crear paneles de gestión de contenidos (backend), por lo que teníamos que hacer bastantes cambios en los CSS para llegar a darle el toque que queríamos a la Web.
Las características de Material design
Este estilo gráfico fue desarrollado por Google en 2014. Realmente no hay un framework que aplique los estilos de Material design. Se creó como una guía de estilos para las aplicaciones internas de Google. Muy enfocado a móvil y tablet. A partir de estas definiciones, aparecieron proyectos que crearon el framework. Por ejemplo, materialize. Este framework combina parte de las definiciones de Google como elementos adicionales en jQuery como modales, efectos de formularios y muchos más. Aunque está muy bien hecho, se nota que está creado por un equipo más pequeño de desarrolladores, ya que no tiene tantas actualizaciones como Bootstrap, que está mucho más vivo como proyecto.
Materialize también cuenta con su propio sistema de retícula (grid), que no está definido propiamente por Material design. Esto permite que podamos hacer páginas muy completas con el estilo de Google con todas las funcionalidades que necesitamos. Al igual que con Bootstrap, podemos complementar este framework con nuestros estilos propios para darles ese toque especial a nuestras páginas.
Comparativa de funcionalidades
| Bootstrap | Materialize | |
|---|---|---|
| Documentación | ||
| Variedad de color | Limitado | Extenso |
| Tipografía | Helvetica / Arial | Roboto |
| Elementos HTML | Gran variedad | Limitados |
| Responsive | Sí | Sí |
| Preprocesadores | LESS y SASS | SASS |
| Componentes adicionales |
|
|
| Funcionalidades jQuery |
|
|
Porqué un Bootstrap vs Material Design
Realmente hay muchos framewoks de maquetación. De hecho, cada vez aparecen más nuevos, pero pocos se hacen tan conocidos y usados como Bootstrap o Material design. Por eso he querido centrarme en estos dos para el artículo.
En conclusión, cada uno de estos frameworks están muy preparados para poder construir casi cualquier diseño de página. Puede que Bootstrap sea más completo a nivel de pequeños detalles. Pero gráficamente, Material Design está muy por encima. Al final, tendremos que decidir con cual nos quedamos dependiendo de nuestro proyecto.
