HTML & CSS
Article

Semantic UI 1.2: A New Version with Lots of New Features

By Ivaylo Gerchev

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.

Semantic UI

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.

Comments
thefairystamp

I might be the only one in this world, but I have zero usage for any of these frameworks. To me, they always seem like the missing stuff to PSD UI kits, but nothing more - The only thing I would use these for, is maybe a contact form.

I'd really like to know, what other professionals use things like bootstrap or semantic for. I can kind of see the usage for people who don't have the time or the budget for getting their own website crafted, but beyond that...?

If I think of my own everyday work, which is designing and programming webapps, landing pages and bigger content-driven websites, then I can't remember any situation where I might have needed such a framework.

Besides, so many of these things are based on javascript components, that it might actually be hard for me to even sell it to my clients - what am I supposed to tell them when they ask about SEO? Isn't it a big problem, when the crawler actually sees nothing, because it can't interpret javascript enough to see your content? Or is that not the case?

Using one of these frameworks would probably mean configurating it to an extend, where It would have been less time consuming creating it from scratch - but I don't know, maybe I am just overseeing something obvious. Maybe someone can enlighten me smiley

RyanReese

My work uses it to have a standard approach to our website. The website I'm working on (with my team) is approximately 8000-9000 pages big, and we use templates based off of Foundation to do our work (after I bug tested them.)

Why? We've had people leave mid project so far. We'd like our code to be standardized. We don't want to worry about cross-browser testing every page (test the template, then everything should be good!)

I don't use frameworks for personal websites since it's overkill, so I see your point there.

PaulOB

I haven't tested the framework in this article yet so my comments below relate to frameworks in general.

Yes I find that for personal projects and psd to html conversions for clients (my main work) that frameworks are never suitable and would cost me too much time to utilize and to bend to my requirements. It takes less than a day to convert quite a complicated psd into compact css and html that a framework could never compete with this.

However, for larger projects and projects where a team is working on the project then a framework can be useful because it sets a standard that you can all follow (as long as everyone follows the rules).

In many cases though I find that the actua grids offered by all these frameworks are next to useless when dealing with clients designs thrown into the mix. The grid never works as you want and the breakpoints don't match the design breakpoints.

I have used bootstrap on a large project and found it very useful but as far as the grid code goes I never use it because I prefer display:table-cell to floats anyways and then have no clearing or float dropping issues. The rest of the framework is useful where you can drop in all manner of ready made elements (buttons, tooltips, popups, accordions etc) which for a large project do save time and you end up with a consistent format where other team members may also be working on the site.

kensho

You may be interested in reading this article, where I compare ready-to-go frameworks (such as Bootstrap or Semantic) versus custom made solutions.

I also think that working with a framework can be much harder and less efficiently than writing the code from scratch or using your own custom made framework. But for some people/situations a ready-to-use framework is the only reasonable option.

louislazaris

A lot of people feel the same way, @thefairystamp, and I gather a lot of those are individuals who are very experienced developers working on complex, large-scale projects. I'm sure there are others too, but it seems that many experienced developers tend to shy away from these types of CSS toolkits.

But that being said, there are tons of people using them. Pretty much every article on SitePoint that has the word "Bootstrap" in the title gets great traffic. There's a reason for that. Many beginner and intermediate developers are using components in these frameworks to build stuff faster. It's like LEGO. But, of course, you're limited as to what you can do with LEGO. Carving out and painting a LEGO block is not the same as taking two existing LEGO blocks and making something out of them. But carving one out yourself is always going to give you a more custom feel.

For many people, rapid development means easy money and a much higher turnover for projects. I think a lot of lower-quality freelance developers and agencies are using these frameworks to pump out tons of work with minimal effort. It think it's a great business strategy if you can learn to do it well. And you never have to give credit, because most of these frameworks pretty much let you do whatever you want with them, except for selling the framework and claiming it's yours.

Henri_Helvetica

... and to support what LL is saying, sadly Twitter Bootstrap has become a bad word for whatever reasons. Complaints that it's too easy to put stuff up, to it's uniform look etc... My issue is more that many of been on Bootstrap sites and not known it - with near certainty. And the Bootstrap look i've always said was the fault of lazy devs making use of default settings and not taking time to create a diff look.

That being said, I don't ever hear ppl slamming Sublime Text for all the packages they offer. You can have a near site coded up in like... 20 key strokes now - prob less in fact. Where are the note pad pugilists?? These are all simply tools. There's room for all of them. You want to write a letter to your girlfriend w/ a fountain pen, and ink? Go for it. Person next to you might send an iMessage - but more importantly, achieve the same result.

louislazaris

Ha!

sumoboy

Time and place for frameworks vs hand built. Quite a few grid based frameworks which every experienced CSS'r will frown upon yet they basically use similar coding to acheive the same result. First glance at semantic UI and what I see is significant value over not having to build or find a jquery plugin to handle UI components. Is everybody building their own menus, modals, forms, tables, and tabs components for every project? I'll take bootstrap and strip out only what I need and think the same here would apply. When I hand build I'll find my testing time is equal or greater than the development time for desktop/tablet/mobile across chrome/safari/firefox/ie. Frameworks like this that have invested in the testing save a significant amount of project time.

Regarding the SEO comment, if your content is hidden by javascript it's probably wasn't of value to the overall on-page quality. Secondly most on-page seo attributes these days are on the decline as factors for improved ranking. Googlebot does have the ability execute javascript as an html snapshot, and even ajax requests.

People talk about the time to learn these frameworks, really? It's not a php framework like symphony or laravel. Pretty sure I could spend a whole day and understand 95% of what I need. I thought the documentation was pretty decent, seen alot worse.

Without an actual level of effort comparison building a semantic UI page vs a psd->html page, I don't see with the later how it can be said "a framework could never compete with this". That's just theory unless someone has a complex page to measure up against. I think it's funny how developers will spend a ton of time building "compact css" yet not optimize images or other aspects of page load to save on page size.

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Front-end, once a week, for free.