Framework Analysis: Semantic UI

Updated June 30, 2018

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:

<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>

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:

Fortunately, Semantic has various third party contributions. A few of my favorites are the DateTime Picker, Range Slider, and React Integration.

Looking for a carousel component? Check out Slick.

Recent Posts