The new guy in the neighborhood, Semantic comes with tons of unique new features based on modals, accordion elements, 3D transformations, even ratings, and so on.

Why Semantic? It's because it provides class names that sound really natural in common English language instead of random class names, and, of course, it describes what the CSS classes are doing to the HTML element.

Let's see how the implementation differs from other frontend libraries; on Bootstrap, the names of CSS classes are very friendly for humans to read:

<div data-role="header">
    <a href="#"
       class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-delete">Cancel</a>
    <h1>My App</h1>
    <button class="ui-btn-right ui-btn ui-btn-b ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-check">
        Save
    </button>
</div>

Using the Semantic UI library, classes use human words. That's very friendly! Coding is more like writing regular text:

<div class="ui stackable inverted divided equal height stackable grid">

Semantic UI comes with a lot of themes, and they are easy to configure. For example, the following screenshot shows a web page developed using Semantic UI:

You can read more about this awesome library at https://semantic-ui.com.

All the mentioned libraries are mobile-first based. What does that mean? Let's keep exploring!