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

[kensho]

Originally published at: http://www.sitepoint.com/semantic-ui-new-version-new-features/

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.

Continue reading this article on SitePoint

[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

[RyanReese]

@thefairystamp

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

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.

@thefairystamp

I might be the only one in this world, but I have zero usage for any of these frameworks

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]

@Henri_Helvetica

You want to write a letter to your girlfriend w/ a fountain pen, and ink? Go for it.

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.