So, Semantic UI is awesome. I have been using it for months, but it wasn't until we were required to use Bootstrap for a recent project that I realized how great Semantic UI is. I decided it was worth taking a break in the Frequent Frustrations series to do a little write-up on Semantic UI. The first part is going to be about why I like Semantic UI more than I like Bootstrap. The second part will address how to actually use Semantic UI.

To get the most out of this post, I recommend at least passing familiarity with Bootstrap.

Bootstrap and Semantic UI are both front-end frameworks designed to make it easier to create nice user interfaces, but they approach this in fundamentally different ways. Bootstrap focuses on "themes" and commonalities across your code. It's like adding a visual filter to your website: everything changes, and it changes consistently. Semantic UI, on the other hand, is modular. It's more like layering stained glass pieces over your website: certain things change, but only when you tell them to.

Bootstrap is probably great for large companies. You select what sort of look you want, download the Bootstrap libraries, and then you have consistent style and branding across your entire website. You never have to match colors across different buttons or match styles, so you have brand consistency. You also don't need to know a great deal of CSS. If you do know CSS, though, you can go into the Bootstrap files and customize your theme around your needs.

The problem here is that there are over seven thousand lines of code in the main Bootstrap CSS file alone, and a lot of them overwrite other styling you may have elsewhere in your application. It took me ten minutes to find the b{} to add a background image once. Command-F is helpful for finding very specific classes and identifiers, but shorter, more common identifiers, like a in a href are significantly harder to find and have a number of different states. If you want your anchor tag to be red in every state, you have to change a lot of lines of code, such as a{}, a:hover, a:visited, and so on. Bootstrap is incredibly useful if you really like the default Bootstrap styling, but it is difficult to tweak to your personal tastes.

Enter Semantic UI. Semantic UI is design by inclusion, not exclusion: you opt-in on specific design features you want on specific elements of the page. You get superior control over what you want to do. It's a good option for people who want to style things themselves, but don't want to spend a lot of time conforming to industry standards. Semantic UI is designed for tech-savvy people writing tech-savvy websites, and possible features like a button that says 'Github' on hover and has the Github icon when you aren't hovering are very easy right out of the box with Semantic UI.

I will say that Semantic UI is a little harder to completely customize right out of the box, from my limited experience. Changing the CSS in Bootstrap is a pain, but it's pretty doable; you open up their CSS files, find the class you want, and then put in your custom color or shape. The Semantic UI gem, however, imports files instead of listing them out line-by-line, so you can't dig in and easily make the blue buttons a slightly different shade, for example. I haven't yet explored how difficult it is to customize those colors in Semantic UI, because as a non-designer who still wants my applications to look okay, the options that Semantic UI gives me tend to be enough.

Tune in next week for a post on how Semantic UI actually works!