Material Design in Mendix

Mendix is a great platform to quickly build the application you need within your organisation. Want a data-grid with some options? No problem, just Drag & Drop some elements upon a page, add some text and buttons and Mendix will take care of the styling. Neat!

However it felt that this ‘Mendix Styling’ was good at the basics, but somewhat lacked at making a page feel modern en stylish. Sure you could throw some margins and paddings here and there to create more space between the elements on the page, but it didn’t feel complete, it didn’t had that ‘woaw’ factor that I was looking for.

It’s no secret that I really like the design aspect of Material Design which is of-course related to the more known Flat Design.
There is a lot of information to be found on Material Design and how to use it on your website, however this not the case when you want to use Material Design for Mendix. I searched across the internet for information about this topic, but came  up empty-handed.
This let me to the single conclusion that it didn’t exist (yet) for the Mendix Platform and if I wanted to make use of it, I had to make it myself. So, that’s what I did!

My inspiration  was Google+. Yeah, you read that right. The Social platform that failed to achieve it’s goal. However when we take that part away and see the website for what it is, then it’s pretty amazing. It’s lightweight, easy to navigate and elements are only showed when being used.

My goal was to use this design and try to implement it in Mendix (7.10 at the time of writing). I didn’t want to make a static page, because to be honest, than I just could copy the HTML of Google+. So that option was a ‘No Go’. My design had to work with Mendix, the domain-model and of-course the design-elements.  The video below is the result. It’s not complete, but it’s working!

In the end it was quite a hassle to get it all working properly. Mendix loves to inject their own CSS code and countering that is a bit of a challenge.
However I’m satisfied with the result and will continue developing this template within Mendix.

Stay tuned!

Maurits de Koning