Quality blog content since 2006
- the imjtk.com successor
Quality blog content since 2006
- the imjtk.com successor

Blog Post

Material Design vs. Bootstrap

January 5, 2021 Dev, javascript, vue
Material Design vs. Bootstrap

I am no stranger to Front-end frameworks, and lately I have had occasion to work with Material Design and Bootstrap. Specifically I have been working with Vuetify which is a Material Design component framework for use with Vue, and the standard 4x version of Bootstrap.

I had more experience previously with Bootstrap than I did with Material Design before this latest round of sites, and all of these projects were using Vue.Js The reason I mention Vue is that this post is biased by the fact that Vuetify is brilliant; it makes working with MD in Vue easy and enjoyable. There is a similar BootstrapVue but it is less effective imho.

Modern Bootstrap

I applaud Bootstrap for finally jettisoning JQuery and there is nothing wrong with Bootstrap – it is modern, fast, full featured and small-ish. I created AIBL0g and and Meme Fight using Bootstrap. If was going to create a traditional looking website with a modern flavor I would still choose Bootstap over Tailwind or Bulma.

But I am really digging Vuetify…

While the knock on Vuetify – that every site looks like a Google site – is fair, the reason is at least partly because Google’s web apps are highly effective. And Progressive Web Apps is where my focus is these days so Material Design and Vuetify are right on time. The component documentation and examples for Vuetify are excellent.

Of course you can make Material Design based sites that look like the furthest thing from a Google web app

One nice feature of Bootstrap are the wire frame type examples that Bootstrap provides to get you started. There is a similar Material Design page but they all look like Youtube. MD also has some mock apps to learn and draw inspiration from.

Either framework is a solid choice to use whether you are creating a project with Vue, React, Django, or Vanilla HTML and CSS. I’ll be using MD via Vuetify for my next couple of projects but I reserve the right to change my mind 🙂

Taggs:
Write a comment