Angular Material Design vs Bootstrap

When re-working an existing application I was wondering whether I should continue using Angular Material Design or just switch to Bootstrap. While I have used Bootstrap in the past when working with normal HTML web pages, I never used Material Design. The only experience I had was how the application looked like, and that was horrible. My first reaction was to just start over and use Bootstrap instead of Material Design, but the decision was not that easy as I hoped it would. In this blog post I will compare Material Design and Bootstrap.

My initial choice for Bootstrap came to an early end, as I discovered that the navigation bar was wider, and at the same time has more margins which make the icon way to small. Another obstacle was that using bootstrap would quickly evolve into rewriting all of the application instead of being able to rewrite part by part. So after a quick attempt I gave up on Bootstrap and started using Angular Material Design instead, and doing so has learned me a lot on how they differ.

Lets start with Bootstrap. Bootstrap is just some very complicated and advanced CSS that changes the look and feel of the regular HTML elements. All of this CSS needs to be sent to the browsers, where it has to apply all the rules to the correct elements. Although I never experienced any performance problems with this, but it is easy to imagine that this might be a performance hit. Bootstrap does not come with icons, instead you have to select a library yourself such as Font Awesome. Bootstrap works very will with multiple different libraries so this isn’t really a problem. What is a bigger problem is the look of some element (such as tooltip) that are not that fancy and the alerts that are very invasive.

Material Design on the other hand is designed for Angular. It contains a lot of custom elements that have to be used over regular HTML. Material Design is designed in such a way that you can select what you need to minimise the footprint of your application. While this is very interesting and smaller is definitely better, Material Design is still in beta version. This is very clear when you look at stuff such as documentation, which is often not up-to-date, inconsistent or simply lacking. Also the very small set of components you can choice from is an indication of this. Another weird design choice is that the default colour schemes are not the same for all elements (such as input fields and checkbox). Using the right elements can also be tricky, because of the special Material Design elements which have to be used, but not always. For input elements, you still need to use the HTML element, but just add a directive on it. For a dropdown however, you need the special MdSelect.

Material Design does come with a default icon set, but this is very small and limited. The icons that are available seem to be focussed on mobile applications, and are less appropriate for big web applications. What Material design does offer, is the fancy borders and shadows around many of their elements. While this does make it a lot easier to create an application out of the box with a nice look and feel, I often felt I was limited and couldn’t do what I really wanted. Moreover I often had to fix some bad styling by adding my own CSS rules, and to make things worse sometimes I couldn’t even change the things I wanted to.

Although Material Design is written for Angular, it actually makes testing a component much harder because you have to always include all of the components. And even then all of your tests will complain that there is no theme specified.

In the end it is clear that no framework or library will offer you all the things you need. But choosing one where you can at least work around the limitations you have or extend it is essential. Although the application is now written with Material Design, from this experience I would still recommend and use Bootstrap instead of Material design in the future. Simply because Bootstrap is clearly more mature, contains a more extensive set of components and can be modified more easily. Material design may someday become a much easier to use framework, but it still has a long way to get there.

Advertisements

2 thoughts on “Angular Material Design vs Bootstrap

  1. You probably mean “Angular Material Design is designed for Angular” as Material Design itself was in fact started by Google to outline how apps should look, feel and behave on mobile devices. Android.

    When I started my angular application (just when Angular2 went live) I both checked Angular Material and ng-bootstrap. Like you mentioned, Angular Material was alpha or beta so nothing good could come of it. But I also found ng-bootstrap extremely lacking. Finally I went for a third option; ngx-bootstrap from Valor-Software (https://valor-software.com/ngx-bootstrap). I’m very satisfied with that one. It had a few quirks but nothing major.

    Also, commenting on this; ‘My initial choice for Bootstrap came to an early end, as I discovered that the navigation bar was wider, and at the same time has more margins which make the icon way to small. ‘.

    It is possible to override the styles of components at a higher level. I’ve defined the encapsulation level of my parent layout component as ‘encapsulation: ViewEncapsulation.None’.
    Doing this, the CSS defined for this component does not get the scoped style prefixes like e.g.:
    .top-navbar[_ngcontent-c6].

    Now you can define rules to override a third-party component’s CSS. (e.g. show growl-messages with the angular component p-growl at the bottom of the page instead).

    p-growl {
    .ui-growl {
    position: fixed;
    bottom: 20px;
    right: 20px;
    }
    }

    It’s not the best way and it only shouldn’t be used too often, but it can sometimes be handy.

    Like

    1. I am not talking about ng-bootstrap (because I didn’t even know something like that existed). I am talking about plain bootstrap, the one you can also use in a straight-forward HTML web page.

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s