Move over Bootstrap and Foundation, welcome Semantic UI
Update:
- It now has an official SASS port
- an official AngularJS framwork
- has an official WordPress theme
- works with any HTML tag
- has had many bugs worked out
You can find more integration information on this page.
"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.
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.
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
invertedclass - 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.
Written by Nicholas Jordon
Related protips
25 Responses
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.
@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.
This is amazing! Can't wait to try it out in a project
It is flickering constantly on my mobile browser, needs more work
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!
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.
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.
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.
Dude, please get rid of that blinking colors in your profile picture. We all know you visited broadway in SF.
Good luck for another new awesome framework, Semantic-UI!
@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.
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.
also a SASS user, would be looking for a SASS version. But a good start
Wow. Finally! This looks great!
How is < class="ui three column grid" > semantic ?
Thanks for sharing ! It's a damn good project :)
It looks nice but it needs alot of improvements.
Surely it's only a case of no SASS... yet. If they don't do it themselves someone will (if its popular).
Thanks, always fun to try something new Stuck with Bootstrap :P
There is a sass version https://github.com/doabit/semantic-ui-sass
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 !
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, ...
Semantic UI looks great. I'm glad BS and Foundation have some competition with real traction.
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
good
