The battle of the design frameworks has continued to grow more competitive with each passing year and is in full swing now in 2018. It can be said that the whole open-source design frameworks ethos started when Twitter created Bootstrap in mid-2010. Next onto the scene was Zurb’s Foundation. These two continue to remain the most popular design frameworks on the market. However, they have since been joined by a heavyweight giant in the form of Google, and their Material Design.
It should be noted that while giants like Microsoft and Apple have released guidelines and resources to aid designers in creating user interface designs (Microsoft’s Fluent Design & Apple’s Human Interaction), they don’t offer official frameworks in the form of HTML, CSS & Javascript components. So, for the scope of this blog, we will not be including them.
The fourth framework which we will discuss is an open-source community driven effort that has been gaining an incredible amount of momentum as of late is Bulma. It is quite an incredibly story of how a scrappy project such as this has become the darling of the mobile responsive & progressive web application development world.
1. Bootstrap
Perhaps the best known design framework in the world today, and with good reason. Not only were they the first on the scene, they redefined the UI/UX design industry for good. Twitter’s Bootstrap took out an immense amount of re-work that designers & developers were doing in each new web application. Having to re-build containers and layouts, write the same CSS over again was becoming a chore, and with mobile responsive designs coming to the forefront, Bootstrap was a godsend. Developers could rapidly prototype with clean and slick looking UIs and scaffolds that would generate typical pages & layouts for them right out of the box.
Since its inception, Bootstrap has kept up with the times, evolving continuously (Bootstrap 4 is the latest bleeding edge build) to not only keep the design fresh, but also adopt the latest development trends that become available, as it did with SaaS, and now with its support for front-end frameworks such as React & Vue. There is no doubt that when it comes to a thorough, well built, field tested design framework that has it all, Bootstrap is the undisputed king.
2. Foundation
What started out as an internal project at the design & development agency Zurb, eventually became the second biggest design framework on the web. The team over at Zurb found that they were having to re-use HTML, CSS & Javascript components frequently and kept needing to pull them in from other projects. In order to alleviate this bottleneck in their process, they decided to build an internal framework which they would utilize in their projects. Eventually, in 2011, they decided to open-source it as they saw the web move towards mobile responsive designs, in hopes to add momentum to that movement.
Since then, they have continuously released updates (Foundation 6 is the latest build), ensuring that their framework doesn’t go stale — which is something that can happen in the design world in the blink of an eye. They also have open-source projects available that provide integration with front-end frameworks such as Vue, and officially support React wholeheartedly.
Need to design a product?
Our team of user-experience designers can turn a project brief into a visual prototype, collaborating with you every step of the way.
3. Material Design
Once design frameworks started popping up everywhere and gained as much popularity as they did, it was only a matter of time before Google jumped in the ring. With Material Design, Google covered all the bases, from web to mobile to smartwatches and TVs. Their latest front-end framework (Flutter) also embraces Material Design and we don’t see Google changing things up anytime soon as they have received fantastic feedback from the web application development community over how easy and clean Material Design is. We personally really like using it here at Cygnis Media as well.
When it comes to supporting front-end frameworks, Material Design might be the best of the lot. They have support for Angular, Vue & React and have a plethora of third party components and libraries available on the web.
4. Bulma
Easily the least known design framework on this list, Bulma is a relatively new one in comparison to the others. Built and embraced by the open-source community, what makes Bulma really attractive is how lightweight it is. Personally, I also love its clean look and practical yet aesthetically pleasing design. The code-base is also extremely well written, with a low barrier to entry for new front-end developers to get into without having to learn daunting syntax.
Bulma has been whole heartedly adopted by the Vue community — both are underdog frameworks that have come in with similar goals and upstaged their larger, more established counterparts — and have a fantastic open source project called Buefy which provides Vue integration & components.
Need to build a web application?
With cross platform compatibility, web apps remain the ultimate medium for a product. Tell us about your project for a free consult.
Conclusion
At this point, you have probably tried the big 3 design frameworks. If in 2018 you are looking to try a new design framework that is quick, lightweight but also practical and smart, give Bulma a shot — especially if you are pairing it with Vue.js. It is great for scaffolding, admin panels and dashboards. Good luck & happy designing!
