Goodbye Bootstrap and Foundation, Hello Semantic UI

Semantic empowers designers and developers by creating a shared vocabulary for UI.

— Semantic UI Team

I don't usually like changing frameworks, even if it's just an HTML/CSS framework. But sometimes, the final product makes it all worth it.

For a long time, I have been a big fan of Zurb's Foundation Framework, and rightly so. It has many of features that others just don't provide, and it even has a few pre-made templates too. So designing with it is usually relatively painless. But there have always been features and concepts that I have been waiting to see from Foundation.

Enter Semantic UI, with tons of great features, plenty of which are unique to it. It boasts support for modals, accordion elements, element dimmers, 3D transformations, and even things like ratings and responsive tables. Not to mention everything seems to run buttery smooth. Of course that's not all, but I think you get the picture. Semantic UI may be a newer player on the field of HTML/CSS frameworks, but it is clearly the rookie of the year.

On top of all of its features, it uses class names that are closer to English than a random string of letters and numbers; so designing with Semantic UI feels more natural. As a result, learning how to use Semantic UI, and designing with it is just easier.

In my own experience, I have noticed that since I started using Semantic UI, I rarely need to reference the documentation. Since it is so close to normal spoken word, it just seems to flow naturally. The result is that projects are done sooner, with less errors.

However, it's not perfect. If you simply drop in the whole framework, rather than just the parts you need, it is massive compared to most others. It is missing some features that other frameworks do have, such as an image slider. But maybe that's just me expecting too much. After all, even for what it lacks, it more than makes up for it in other areas/features.

There are a lot of features here that I am leaving out simply because there are so many. But here are some pros & cons about the project as a whole to help give you a better Idea of what to expect:

Pros:

• Published under the incredibly permissive MIT License
• Very well documented
• Easier to learn/use
• Minimalist design by default
• Has a Grid layout (16 columns)
• Uses LESS (has SASS/SCSS port)
• A very nice implementation of buttons, modals, tables, and more
• Uses an Icon font for many of it's features
• Has some very useful extras such as the class
• Open to community contribution
• Modular structure allows you only use the parts you need
• Buttery smooth animations
• Uses HTML5 & CSS3

Cons:

• Large compared to other frameworks
• Missing some of the more minor features you might expect

Conclusion:

While it's not perfect, it is fantastic at what it does. I would highly recommend using it in new and upcoming products. You can check it out at semantic-ui.com.