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:
<div class="ui blue button">My Button</div>
Semantic overrides the <i> tag as a special tag for icons. Here's how to display a thumbs up icon:
<i class="icon thumbs up"></i>
It's easy to build forms 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.
However, Semantic UI still remains the framework of choice for many people. It's one of the top JavaScript projects on GitHub, with close to 50,000 stars. In most cases, it provides a solid foundation for web development projects, and I highly recommend it.