Released in 2013 by Jack Lukic, Semantic UI is an extensive, well-documented web design framework with various user interface components, including menus, icons, form elements, grid systems, and other essentials. Class references are intuitive and based on natural language. For example, to display a blue button, you have:
Semantic overrides the <i> tag as a special tag for icons. Here's how to display a thumbs up icon:
Building forms is a breeze using Semantic UI. Here's a sample sign up form.
One of the major advantages of using this framework is that it makes your code concise and easy to read.
The minified release of version 2.3 has a total file size of 878 KB, so it's a good idea to reduce the size of the source CSS and JS files. To do this, you can edit dist/semantic.min.css and remove unused components. The source JS file dist/semantic.js can be reduced as well and minified afterwards. A faster approach is to define a subset of components in semantic.json and use the build tools to create a custom distribution.
Development of Semantic UI has slowed down since 2016. Since then, a number of community forks have been been released:
- Fomantic UI - Adds DateTime picker as calendar module, range slider, and placeholders.
- Semantic UI React - offers Semantic UI elements as React components.
- Vanilla Semantic UI - removes jQuery as a dependency.