Semantic UI Vs Bootstrap — Short and Basic

Recently I have been playing around with some of the Frontend libraries. Here I will do a basic comparison with Semantic and bootstrap. Maybe this article will help you to pick and choose depends on your needs.

Bootstrap is one of the most popular frameworks in the web developing field, it puts Mobile First projects in web development, and it comes with full package CSS, JS, HTML.

Pros:

• Uses vanilla CSS.
• Uses two most popular preprocessorses, Less and Sass.
• Responsiveness.
• Building Speed is fast, easy to start.
• Every device can use a single code base.
• Awesome jQuery plug-ins.
• Great Docs.

Cons:

• Full package set front end framework.
• Large size framework out of the box.
• Styling with multiple classes kinda gets messy.
• If didn't setup customization of the bootstrap at the initial setup, possibly websites all looks the same.
• Have to be very careful to choose when focusing on component-based styling.

Semantic UI is a component-based lightweight, flexible framework that empowers designers and developers by creating a shared vocabulary on UI.

Pros:

• Most trendy designs created by Semantic.
• Semantic UI — React.
• Component-based styling, pick what you need.
• Multiple Themes to choose from.
• Well organized packaging.
• Third-party app support. (Angular and Wordpress. )

Cons:

• Setting up a bit complex with the installation.
• Require a certain level of JavaScript knowledge.
• New and a bit buggy.
• Install file kinda big if not carefully chosen.

I am sure there are many things that I can talk about the good and bad, for beginners I would say “Read the Documents before blindly pick and choose, every project is different.”