Last Updated: April 08, 2023
·
132.1K
· projectcleverweb

Move over Bootstrap and Foundation, welcome Semantic UI

Update:

You can find more integration information on this page.


Semantic UI

"Semantic empowers designers and developers by creating a shared vocabulary for UI."
   — Semantic UI Team

 

I don't usually like changing frameworks, even if it's just an HTML/CSS framework. But sometimes, the final product makes it all worth it.

For a while now, I have been a big fan of Zurb's Foundation Framework, and rightly so. It has many of features that others just don't provide, and it even has a few pre-made templates too. So designing with it is usually relatively painless. But there have always been features that I have been waiting to see from Foundation.

Enter Semantic UI, with tons of features, plenty of which are unique to it. It boasts support for modals, accordion elements, element dimmers, 3D transformations, and even ratings. Not to mention everything seems to run buttery smooth. Of course that's not all, but I think you get the picture. Semantic UI may be a new player on the field of HTML/CSS frameworks, but it is coming in strong.

3D Transform

On top of all these features, it uses class names that are closer to English than a random string of words; so designing with Semantic UI feels more natural. As a result, learning how to use Semantic UI, and designing with it is just easier.

However, there is a catch. There are some features I would expect in Semantic UI, things like a basic image slider, or perhaps thumbnail classes. But maybe that's just me expecting too much. After all, even for what it lacks, I think it more than makes up for it in other areas/features.

To be fair, Semantic UI isn't at version 1.0 yet, but they are close.

Feed Example

Some Pros

  • Published under the incredibly permissive MIT License
  • Very well documented
  • Seems to be easier to learn/use
  • Has a Grid layout
  • Uses LESS
  • A very nice implementation of buttons, modals, & progress bars
  • Uses an Icon font for many of it's features
  • Has some very useful extras such as the inverted class
  • Open to community contribution

Some Cons

  • No image slider
  • No thumbnail classes
  • No visibility classes
  • No SASS (does have LESS)
  • Not at a release >1.0

Final Verdict

To be honest, I myself will probably wait till version 1.0 to use Semantic UI in a production site, but I am excited to use it in some of my private projects now. I think that this framework has a lot of potential, and could potentially become much more popular than both Bootstrap & Foundation.

The Site: semantic-ui.com

 
 
 

Thanks for reading

If you enjoyed what I wrote, consider upvoting this protip or endorsing me.
If you want to see more of my stuff, you can see other protips I have written or visit my profile.

25 Responses
Add your response

Every one will have to wait till Semantic UI is mature and super good to go, however bootstrap/foundation already has laid big foot steps in front end world :p.

over 1 year ago ·

@iploppable Considering the amount of work that has already been put into the project, even though it's not at 1.0, it's pretty darn mature. As I stated above, I would wait until 1.0 before using it in a production environment (so they can work any kinks out & add to the project), but there's no real reason why you couldn't start using it in some private projects. Moreover, with the amount of features that are completely done, you could easily create a very nice site... such as the Semantic UI site itself.

over 1 year ago ·

This is amazing! Can't wait to try it out in a project

over 1 year ago ·

It is flickering constantly on my mobile browser, needs more work

over 1 year ago ·

no sass, no compass ? that's sad ~ apart from that it's a great... What you want me to download it? Where is the npm install sematic and new project automation and auto reload, some grunt and bower action greatly needed ;) I think it needs more bells and whistles!

over 1 year ago ·

really love the way they modeled and categorized the basic features each ui element must have (types, groups, variations, states). It lays a great foundation for elements to variate. Not to mention, to my eyes it is super simple and decoupled.

over 1 year ago ·

I know its a personal choice thing, but I can't stand all the curly brackets with LESS. SASS is always the way I go. So I won't be using this.

over 1 year ago ·

Using the mixin method of building the bootstrap grids makes Bootstrap as semantic as you want, even moreso than semantic-ui. Not saying it's bad, but people run to bootstrap and say "look, you have to set it up like 'div class="col-xs-5 col-sm-6 col-md-7 col-lg-8"!!' When in fact, you could just go 'div class="top-stories"' and then all the grid sizing is handled in the Less mixins.

So in a way, Bootstrap can be more semantic since there are no limits to how you want to name things and how much you want to throw into the Less mixins.

over 1 year ago ·

Dude, please get rid of that blinking colors in your profile picture. We all know you visited broadway in SF.

over 1 year ago ·

Good luck for another new awesome framework, Semantic-UI!

over 1 year ago ·

@db123 and I should care about your opinion why? Typically I would probably listen and change it, but that comment you made just makes you look like a jerk and I don't take advice from jerks.

Edit:
After thinking about it, inspiration struck. Enjoy.

over 1 year ago ·

While it looks good, and has many nice features, and I appreciate the more natural language of the class names, I can foresee naming collisions becoming an issue.

I also prefer SASS to LESS.

Nice write-up though.

over 1 year ago ·

also a SASS user, would be looking for a SASS version. But a good start

over 1 year ago ·

Wow. Finally! This looks great!

over 1 year ago ·

How is < class="ui three column grid" > semantic ?

over 1 year ago ·

Thanks for sharing ! It's a damn good project :)

over 1 year ago ·

It looks nice but it needs alot of improvements.

over 1 year ago ·

Surely it's only a case of no SASS... yet. If they don't do it themselves someone will (if its popular).

over 1 year ago ·

Thanks, always fun to try something new Stuck with Bootstrap :P

over 1 year ago ·
over 1 year ago ·

I love it as the author said, It's better to wait for a stable release. Also I would love to see some Angular directives around UI elements !
But the markup looks really clean and neat, worth watching out !

over 1 year ago ·

Check out Cascade Framework ( http://www.cascade-framework.com/ ) for a framework with a class syntax similar to that of Semantic UI, IE6+ support, tiny footprint, ...

over 1 year ago ·

Semantic UI looks great. I'm glad BS and Foundation have some competition with real traction.

over 1 year ago ·

CanNOT wait to try this! The project has respect for MVC and I like the attention to language nouns, adjectives, etc. I am up for semantics

over 1 year ago ·

good

over 1 year ago ·

Have a fresh tip? Share with Coderwall community!

Post
Post a tip