The very first major release of Semantic UI is now official. Since the first time I found this wonderful framework – almost a year ago – I’ve watched it closely, and I can say I’m pretty happy about its current state in terms of structure, appearance, functionality, and customization abilities.
There are many exciting new features and capabilities to be mentioned, but before we look at them, let’s see what differs Semantic from other similar frameworks and why it’s called “Semantic”.
About the Structure of Semantic UI
As its name suggests, the main goal of Semantic UI is to be meaningful. There are a couple of things that help with that aim. All of Semantic’s components are called UI Definitions and are split into 5 distinct types: elements, collections, views, modules, and behaviors (see this article for more on that).
This sort of separation makes the framework much clearer, well-ordered, and easy to work with compared to how other frameworks group their components. Besides that, all naming conventions for Semantic’s CSS classes are built around the principles of natural languages for describing elements – plurality, tense, and word order – thus making your code completely self-explanatory.
New Features and Components
The first major release of Semantic UI, version 1.0 comes with many new features and lots of improvements. There have also been further improvements leading up to the current version 1.2. Let’s see what these are.
New Build Tools
In this version Grunt is replaced by Gulp. So, in order to use the framework at its full potential you need to have Node.js and Gulp installed. This holds true mostly when you tweak the UI of your website, and during the theme creating/editing process.
New UI Definitions
Semantic offers two new base components: Site and Reset. Site contains all global variable defaults used for customizing the overall appearance of your website. Reset is used for dealing with aberrations in browsers defaults.
New elements are Flag, List, and Rail. Flag provides icons with country flags. List is used to group related content. Rail is a kind of a sidebar; it shows supplementary content as an side to the main view of a website.
New views are Advertisement, Card, and Statistic. Advertisement is used to display third-party promotional content. Card is used to display a piece of content resembling a game card. Statistic is used to emphasize the current value of an attribute, such as the number of people having more than one million dollars in their account.
New modules are Nag, Sticky, and Video. Nag is used to display an important message that persists until the user dismisses it. Sticky helps you fix a portion of content or a particular component, such as navigation bar, to the browser viewport as the page is scrolled. Video allows you to display video files from YouTube and Vimeo.
New Documentation Resources
Besides the detailed documentation for each component, the framework has a new section called Kitchen Sink that showcases all interface elements.
But even more important is that now Semantic offers a separate website dedicated to learning the framework. Although the standard documentation on the main website explains how the different components can be used, they don’t give you guidelines about tweaking and customizing your UI as a whole. The new website fills this role, showing you how to get started with the framework, how to customize its default appearance, and how to create themes for a complete change of your website’s look and feel.
Make Your Website Stand Out
One of the biggest problems with ready-to-use frameworks is that often our websites end up with a pretty recognizable look and feel. It’s just a matter of seconds for people to say, for example: Hey, I’ve seen this before – I bet that this website is built with Bootstrap!
It’s important for our websites to be unique, but making them standing out takes extra work and effort. Fortunately, with the new customization system of Semantic, this task is made much easier. Now Semantic uses an inheritance mechanism, similar to Sublime Text setting files, to modify Less variables. In Sublime Text, User settings are placed in a separate file that overrides the Default settings file. This kind of separation keeps the default settings safe from modification, which minimizes the risk of breaking the application’s functionality and keeps the user’s settings intact when the application is updated/upgraded. To see how this logic is applied in Semantic, take a look at their theming guide.
In short, with more than 50 UI components, over 3000 Less variables, and 3 levels of variable inheritance, Semantic gives you complete freedom to change your website’s design in any possible way.
Now Semantic comes with several pre-built themes intended to give you a quick start with the framework. And a separate website dedicated to third-party themes is in the works. It will provide packaged themes that can be downloaded and distributed online.
Why Choose Semantic UI?
The buzz surrounding Semantic is great, but why should you choose Semantic over the others? Well, there are several good reasons:
- Semantic is a modern framework offering almost all you need out-of-the-box to build modern websites. With so many components, the need for third-party add-ons is minimal.
- Semantic is under active development. Features and functionality are being improved and extended on a regular basis.
- Semantic is designer-friendly. The natural language naming conventions used by the framework, with no shorthand or abbreviations, are understandable by everyone.
- The structure, separation, and naming of Semantic’s components are much more meaningful and well-ordered than in other frameworks.
- Semantic offers a powerful and flexible customization system. Whether you want to tweak your UI or change completely the appearance of your website, Semantic gives you the possibility to do it.
Are There Any Drawbacks to Choosing Semantic?
I like Semantic a lot, but in the spirit of fair play I should mention some aspects of it that I consider weaknesses:
- Despite Semantic’s growing popularity, the framework is not tested in enough on real-world websites. I don’t know of many websites that use it (Two examples are Quirky and New Republic). This doesn’t mean that we can’t use it successfully in real-world projects; it just means that we don’t have a lot of evidence to suggest how effective and robust it is in a real-world setting.
- Semantic is kind of a complex framework and can be a little overwhelming for novices to get used to working with it. It is indeed easy to learn and use, but it can take time to get oriented with its infrastructure.
- There is no GUI customizer for modifying variables. With so many variables placed in different files, it would be great if we could modify them in an easier manner. A great example of such is the UIkit Customizer. I admit that building that kind of customizer is not an easy job (especially, with Semantic’s 3000+ variables and 3 levels of inheritance), but if they provide one in a future release, that will be just awesome.
Summary
As you can see, Semantic is a modern, attractive, full-featured, and easy to customize framework. In fact, it’s been one of the most popular CSS frameworks in 2014.
It can be used in a wide variety of projects, and in many of them, even without need for third-party products. Despite this fact, there aren’t many well-known projects using Semantic. So, if you have some experience with the framework and want to show us something built with it, please share your thoughts in the comments.
Ivaylo GerchevI am a web developer/designer from Bulgaria. My favorite web technologies include SVG, HTML, CSS, Tailwind, JavaScript, Node, Vue, and React. When I'm not programming the Web, I love to program my own reality ;)
