ham3gg
Last Updated: March 16, 2017
·
100.3K
· projectcleverweb
Big pimpin

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.

24 Responses
Add your response

9570

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 ·
9572
Big pimpin

@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 ·
9607
1f82900201ad755ce26afeebdd59a0b6

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

over 1 year ago ·
9609
E8c3605b17427474be8e7ae7b367d0d7

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

over 1 year ago ·
9610

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 ·
9612
6b67fe7f231ee24563f1757f835a9323

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 ·
9614
6e5b5ddb6c10dee217e541a38a130d8a

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

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

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

over 1 year ago ·
9640
0385d51ad69470a8cd4d2f5fc63c7bc6

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

over 1 year ago ·
9641
Big pimpin

@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 ·
9676
Aa50860353d6c6bba575cefe31c5709f

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 ·
9681
Roxstyle.117

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

over 1 year ago ·
9702
Me

Wow. Finally! This looks great!

over 1 year ago ·
9713
B79dd9928ae93d9d7e045b62f5e0f225

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

over 1 year ago ·
9761
9079200119 c16c4e108c k

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

over 1 year ago ·
9829

It looks nice but it needs alot of improvements.

over 1 year ago ·
9849
3f23a52c7bc87296e96b5a05547da0e0

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 ·
9858
F3a357326830e2b7942bc0d2a8e7f8d0

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

over 1 year ago ·
9965
5d39cfd6b9e0a06a01bcd034b13499ab
over 1 year ago ·
10212

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 ·
11634
3 10 2015 3 30 15

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 ·
13677
D41d8cd98f00b204e9800998ecf8427e

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

over 1 year ago ·
14824
14d513b0f36836e73db5921ab9bdd3d6

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 ·