We can all agree that using a CSS framework is essential these days. Sure, you can design and develop a website from scratch, which looks and feels great, but you will find yourself spending hours reinventing the wheel; and even when you decide to go with a framework, there are too many to select from. For that reason and with this article, I will try to help you make your mind by presenting to you the three major CSS frameworks in 2018: Bootstrap, Bulma and Foundation.

Bulma

bulma framework

Bulma is an open source CSS framework based on Flexbox.It is the most recent of the three and it gained a lot of popularity among developers lately.Following, we will examine the causes of its rapid success by listing its main advantages and disadvantages.Let’s have a glance at it:

The Advantages of Bulma are:

  • It has one of the easiest learning curves
  • Clear Syntax by using the is- for the classes’ names.
  • Super light weighted with the entire framework coming in a package of less than 90kb and is modularizable to make it even smaller.
  • Based on Flexbox which gives it a great sense of responsive design.
  • Highly customizable and modularizable
  • modular sass framework to optimize your bundle only to the necessary classes.

The disadvantages of Bulma are:

  • Fairly new, not as large of a community.
  • Relatively weak documentation and could use some minor improvement.

Bootstrap

bootstrap framework

Bootstrap is considered to be the most popular open source mobile-first framework, it is acknowledged as one of the widely used frameworks of the three with 4% of the websites on the web using it. Following are the advantages and disadvantages of Bootstrap.Take a look at them:

The Advantages of Bootstrap are:

  • Fixes CSS compatibility issues and has a great support for all the major browsers.
  • Designed according to the mobile first approach, which makes it work great on all devices.
  • Superior Documentation and community support.
  • Great well rounded framework with consist UI for all of the basic components(forms, panels, tables, buttons) and many others.
  • Access to JavaScript plugins using JQuery.

The disadvantages of Bootstrap are:

  • Depends heavily on JQuery as it JavaScript library (which will leave much of the plugins unused)
  • A bunch of HTML output that’s not perfectly semantic.
  • A lot of time will be spent on overriding the style files to make the project look a little bit unique.
  • Websites will start to feel and look the same and it will be hard to distinguish one from another.

Foundation

foundation framework

Last but not least, we have the amazing framework known as Foundation which is designed by Zurb.It is a very semantic framework and makes it easy to design beautiful responsive websites, apps and emails that look amazing on any device.Following are the advantages and disadvantages of Foundation.Let’s check them out:

The Advantages of Foundation are:

  • Styles are purposefully underdeveloped to give more room for creativity and differentiate between sites that use Foundation.
  • Is built in REMs instead of pixels allowing more overall flexibility.
  • Offers services for both websites and emails.
  • It comes with a robust grid system.

The disadvantages of Foundation are:

  • Pretty hard to a beginner to grasp.
  • A messy documentation that needs major improvements.
  • Doesn’t have a variety of wild choices to choose from when it comes to pre-made CSS components.

Conclusion

The point of this article is to shed some light on the major pros and cons of every framework, so you could have some insights before investing your time and effort into it.
If you enjoyed the post and want to show appreciation to the writer and the blog as a whole, just subscribe to our newsletter to stay updated with our content and share, like and follow us on social media (links below in the footer).
Take Care !! Until we meet again in another post from TechTalko

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.