Released in 2013 by Jack Lukic, Semantic UI is an extensive, well-documented web design framework with various UI 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 Sign up Form Sample.
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. As of version 2.3, Semantic is missing carousels, a popular UI component used to slide images and other content. On June 2018, Jack Lukic posted the following update on GitHub:
Looking for a carousel component? Check out Slick.