Style Your Apps in a Snap: Utilizing Bootstrap with Mendix
Style Your Apps in a Snap: Utilizing Bootstrap with Mendix by Simon Black
Being a Technical Consultant, I often get asked about styling in Mendix. People ask, “Is Mendix responsive? How easy is it to style customer facing applications? How easy is it to white label applications?” Some people have the perception that making beautiful functioning business applications is hard to do and requires a dedicated team of experienced UX designers/stylists. While UX designers and stylists are useful to have on the team, they’re not essential for every project. These days there are so many free designs, ideas and templates on the Internet that the reliance on these experts is shrinking. The majority of start-ups don’t have teams of user design experts. They rely on the shared work and open source resources of others. One of the best resources on the market at the moment is Bootstrap.
Bootstrap is the style guide for the masses, with a community that is rapidly growing. Bootstrap is an open source collection of tools for creating web applications in a rapid and hassle-free way. It was developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across applications. Bootstrap is now the number one project on Github and is a standard approach to styling across many organizations. You can easily see why Mendix is so closely aligned with this fantastic framework.
Last year’s Mendix 5 release included a lot of great new features including: layouts, pages, app services and device profiles. One of the features that I believe doesn’t get praised enough is the major improvements to make the HTML and CSS classes Bootstrap compatible. As a developer and designer, this is a breath of fresh air for me. Implementing themes in Mendix has never been so easy!
At first, I was skeptical as to how far I could go using off-the-shelf bootstrap themes in a standard Mendix project. So in order to test the platform to the fullest, I built the Bootswatch module, which is now available in the Mendix App Store. It is based on the popular Bootswatch library of free themes.
I started developing the module late on a Friday afternoon, thinking I would just try to get one theme implemented. An hour later, I had downloaded all 13 themes from bootswatch and implemented them into my Mendix application. All it took was creating an index page for each of the different themes and importing the CSS file in the HTML header. I couldn’t believe it was that easy! 13 brand new themes in 30 minutes; this was unheard of before!
I decided that I wanted some way to showcase the styling and check whether Mendix’s components truly fit with the Bootstrap framework. I recreated the preview section on the bootswatch.com site using standard Mendix components as much as possible, giving the user the ability to preview each of the 13 themes and then download the theme package.
I found that most of the standard components fit very nicely with Bootstrap and I especially liked the fact that I could select in the Mendix Business Modeler what button style I wanted.
Another piece of useful functionality I liked was snippets. Snippets are reusable interface parts, which you can place on different pages and layouts. Using snippets requires fewer changes if you want to modify the interface. In this module, the snippets allowed me to group buttons or other components together without the use of tables. The advantage of doing it this way is that I reduced the need to include extra classes to remove the padding on the table cells and it helped me fit in nicely with the bootstrap framework HTML structure.
In previous versions of Mendix, there was one feature missing: typography. In order to put header tags around labels, I needed to use HTML snippets. In version 5.4.0, Mendix released the ability to select a labels heading tag. This meant that I could replace all my HTML snippets with lovely standard Mendix label components.
Recently I came across the very useful Mendix component, groupbox. The great thing about groupbox is that you can use it as a collapsible panel box or as a div container. I used this functionality to update the Bootswatch module to make use of Bootstrap’s responsive column functionality. This was so that I could turn the module into a fully responsive app. Adding objects in group boxes and adding column classes allowed me to remove all the tables previously used for laying out components and replace these with groupboxes with responsive CSS classes. The great advantage to using responsive design is that one set of layouts and pages will fit all devices. It also reaffirms the point that Mendix is capable of using responsive design.
Responsive design is a useful feature to have and does work well in certain situations. However, I wouldn’t advise it for every application. The way Mendix interacts with data on a mobile device is very different than on a desktop. We tend to need different widgets, different positioning of buttons and different amounts of data on mobile, tablet and desktop. This is why I would always advise using the Mendix device-specific layouts and pages over responsive design. There are lots of pros and cons to using both. The advantage of Mendix is that it gives you the flexibility for both options.
Developing the Bootswatch module has been a great learning experience for me. I learned a lot about Bootstrap styling which will help me in future projects and also about how to make best use of the latest Mendix functionality. Check it out for yourself – you can get the Bootswatch module in our App Store. I believe it gives Mendix developers a great resource and starting place to build beautiful and functional enterprise applications.
So why not start a new project today and get styling the bootstrap way!