"Semantic empowers designers and developers by creating a shared vocabulary for UI." — Semantic UI Team
Semantic UI, comes with tons of features, plenty of which are unique to it. It boasts support for modals, accordion elements, element dimmers, 3D transformations, and even ratings. 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 new player on the field of HTML/CSS frameworks, but it is coming in strong.
How it is Different
Semantic UI not only provides integration with Icon API but also provides a lot of other inbuilt components such as Popups, Form Elements, validations, Buttons, Classic dropdowns, Navigation/Breadcrumb, menus and much more..!
Bootstrap Vs Semantic-UI
Although Bootstrap also provides same things as Semantic UI do, Semantic UI is more like a collection of prepackaged UI elements that work pretty well together with semantic markup that's superior to Bootstrap/Foundation.
For example: <div class="ui large red labeled icon button"> just describes how it looks not how it functions. http://semantic-ui.com/ provides more examples about comparisons between these two.
Features
Semantic UI is unique in two ways. First is the way the framework is structured. It uses five descriptive categories to define re-usable UI components.
- A UI Element is a basic building block. It can appear alone or in uniform groups. For example, a button can be independent or put in a button group.
- A UI Collection is a group of different kinds of elements that are interdependent. For example, a web form can have buttons, inputs, checkboxes, icons, and so forth.
- A UI View represents a common piece of website content. For example, a feed or comments section.
- A UI Module is a component with interactive JavaScript-based functionality. Examples include an accordion, dimmer, modal, and so on.
- A UI Behavior is a component that can’t exist independently, but instead is used to inject functionality into other components. For example, the Form Validation behavior provide validation functionality for the Form component.
Almost every component has types, states and variations. For example, some of the button component’s types include: standard button, button with icon, animated button and a button can be in the active, disabled, or loading state. Finally, a button can vary in size and color, and can be formatted as basic, social, fluid, toggle, and more. This scheme gives you a great amount of flexibility in a component’s appearance.
As you can see, Semantic UI is not only meaningful and well structured in terms of naming its classes but also in naming, defining, and describing its components. This structure is much more semantic compared to that found in Bootstrap or Foundation.