Hacker News Reader

Comment by whatnotests | Hacker News Reader

Bootstrap is great and I'mma letchu finish, but http://semantic-ui.com/ is my favorite and I think everyone should go take a quick look.

You might just like it too.

View on HN

It's kind of ... heavy? Comparing minified files:

Bootstrap [1]: 118 KB

SemanticUI [2]: 537 KB

Don't forget to add the JavaScript. I know GZip is a thing, but still...

[1] https://github.com/twbs/bootstrap/blob/master/dist/css/boots...

[2] https://github.com/Semantic-Org/Semantic-UI-CSS/blob/master/...

If you are using LESS or Sass, it's really not hard at all to only include the parts of Bootstrap that you need. In my experiences, I often need just need maybe half of it and don't bother much with the Javascript stuff. I don't think Bootstrap really has performance or size as a first priority. It's really just a big toolkit, ready to go so you can whip out a functioning app.

This is true of a lot of frameworks. I've honestly not been a huge bootstrap fan, and Foundation 5 and 6 also can be built with SASS and you can easily remove components you don't use.

If you're trying to maximize compatibility while also get designs up quickly, any modern framework is preferable to no framework at all.

I've used semantic UI before and I loved it. But I'd never use it for anything else but a desktop use case. Apart from the css size the render time is very, very slow.

The first time I looked at semantic-UI, I honestly thought it was a joke. "Anything can be a <button>, just throw this class on it!" I see they've toned down their "just use divs and spans" examples a bit, but many of their examples are still terrible from an accessibility standpoint [1] and are anything but semantic.

[1]: http://semantic-ui.com/elements/label.html

Semantic UI author here. The thing I think most important in considering SUI over Bootstrap, is its capacity to be themed/extended.

See our examples of GitHub layout clones in SUI (be sure to hit paint can icon in top right to swap in other themes)

Modern GitHub http://semantic-org.github.io/example-github/index.html

Classic GitHub http://semantic-org.github.io/example-github/index-classic.h...

SUI is designed with 3,700+ variables under the hood, and a six level deep theming system (site default theme -> site packaged theme -> site user theme -> component default theme -> component packaged theme -> component user theme).

It becomes very possible to build large codebases around SUI that can be extended over the course of a startups growth that can build all of the company-specific changes purely in theming variables, custom components and css "override" files. After setting up your core UI in SUI you can simply fork our doc style guide to use as branded style guide for your company.

Deploying a new "on brand" microsite can be as simple as copying over a theme folder, tweaking things like @primaryColor @fontSize, @fontFamily, and changing some button shading to create a new variant.

With regards to the build size, most of why we are larger is that SUI includes 50+ components. With our gulp pipeline you can narrow it down to only the components you want. There's even a PR that I'm looking at which, when merged, will let you specify only the specific parts of a single component you want to include in your build, narrowing down file size even more.

> be sure to hit paint can icon in top right to swap in other themes

I don't see any paint icon.

EDIT: Found it. I thought it was a trash can.

Also, SemanticUI's official React component library is one of the best and well made component libraries I've come across: https://github.com/technologyadvice/stardust

Thanks, the last time I looked there was no real support for React in combination with semantic-ui. I will try out this one.

Seconded. Semantic-UI is for practical work: if you need a reasonably good-looking app/site right now, go with it. You will be laughed at by purists (so many divs! large! suboptimal!), but you'll get the job done quickly, and they won't.

Also, Semantic UI is the most complete library that I've found. If you build an app, that is really important, you don't want to find out one day that there is a gaping hole because a certain widget hasn't been implemented.

It's more complete than Bootstrap? I haven't done any research but I'm sceptical as there are so many Bootstrap-compatible plugins.

Yes. Use it with care, file size is indeed more bloatish. If you need plugins for bootstrap, then you are probably not using it properly. Bootstrap is just a scaffolding framework you should replace after a time.

Semantic UI is a production ready app UI framework.

Bot have legit uses, but I think they cover a bit different use-cases.

If I'm building a small in-house intranet with no design resource and a plugin provides a good solution, then why am I using it "wrong"? Isn't that the kind of thing Bootstrap is perfect for? I'm certainly not going to spend much time optimising it.

It was just a general feeling because Bootstrap is intended for scaffolding and getting started fast. Not sure what plugins do you use, but for example Semantic UI has lots of UI already built in that you might find in third party plugins for BS.

> I'm certainly not going to spend much time optimising it. if it's a quick hackish tool for your team then it's certainly fine

Every use case is a bit unique. I've built apps with bootstrap, but I gradually removed it later because I simply rewrote everything I used from it.

There are pros and cons of Bootstrap just like there are with all tools.

As an example, DataTables works out of the box with Bootstrap and Foundation, but not with SemanticUI. Same with Select2, Symfony, JetBrains IDEs.

The more bespoke your application, the more Bootstrap will either be useless or counter-productive. But if you're building a standard UI, Bootstrap is great. It's easy to find junior devs who can use it, and there's good documentation and support.

>Bootstrap is just a scaffolding framework you should replace after a time.

I've never heard this recommendation. Why would you waste time on a framework you are never going to deploy to production?

I've also never heard this. And IMHO this is very wrong way to think about it. Bootstrap is a comprehensive set of well designed and coordinated UI widgets and paradigms. And it's all customizable, so you don't have to get stuck with that "bootstrap look".

Because it's way faster to test ideas and also look reasonably well. However, over time it will get in the way and you'll be better off extracting the stuff you actually use. At least it was my latest experience with it.

How is Bootstrap not quick? They have sample code for basically every possible scenario out there.

I'm basically a novice programmer and I've built web apps with it and Web2py within an hour or two.

It is, but Semantic UI is better because it has a more quality design and more ready made, flexible modules to chose from.

Both are great, but if you can, pick Semantic UI. I love it.

Could you provide some specific examples? That's almost word for word what people say about Bootstrap, too, and it'd be nice to know what shaped your opinion.

Cards: http://semantic-ui.com/views/card.html vs. http://v4-alpha.getbootstrap.com/components/card/

SUI is more compact, aligned and feature rich.

Modals: http://semantic-ui.com/modules/modal.html vs. http://getbootstrap.com/javascript/#modals

Again, here my vote goes for SUI, it's cleaner and better designed.

Untreated Bootstrap is so widely used that without extra styling it looks just another UI with no personality. Design is a sensitive, subjective topic however. Sometimes you want that crude industrial look that Bootstrap has :)

That basic modal semantic ui is using is simply fantastic. Large file size or not, this is definitely on my list of frameworks to try now.

Dont't forget that with components turned off and with gzip turned on it can be around 80k.

That's an impressive set of UI elements, and impressively consistent.

But their use of jQuery in front page examples hardly inspires confidence. I tried to find out in a few clicks whether jQuery is required, and couldn't.

I made the switch about a year ago and love it. There are some edge cases that you run into every so often but on the whole, it works great. I also appreciate that it is more minimalist than bootstrap.

It seems potentially cool, but the propensity for their docs to seem to assume that I'm going to have my inspector open to poke around at their classes and HTML structure is pretty annoying.

Specifically: http://semantic-ui.com/examples/grid.html

Understanding grid on Semantic UI has been very difficult for me. I just couldn't get it to work. And also there aren't many tutorials. Since I was spending lot of time, I gave up and used Bootstrap, whole thing was finished in 2 hours.

semantic-ui has some nice components and their look and feel is nice, but it breaks in a lot of ways when you try to create something yourself. This is the big benefit of BootStrap; it's robust and lets you fiddle.

It's not a big knock on semantic-ui's part; there aren't a lot of products that don't break within an hour or so after I start using them, it is however, a big plus to bootstrap that it rarely does break when I try something.

When it gets real keyboard support, I'll start liking it.

What do you mean by real keyboard support? I'm genuinely curious.

Go to http://semantic-ui.com/ and try tabbing through the page. Here are some things you might notice:

1. The menu button doesn't get focused (or they disabled the style that makes focus apparent). It's not possible to open it with the keyboard either by pressing space or by pressing enter.

2. Tab a few more times until you get past the BEM and SMACSS links. Notice how those three tabs can't be selected with the keyboard?

3. Sign up button has no obvious focus.

4. Dropdown menu cannot be accessed with keyboard nor does it have a focus style. The same applies for the buttons in that area as well.

5. Many of the elements in the "Unbelievable Breadth" section either don't allow you to focus or have styled the focus in a really non-obvious way.

Basically, it looks pretty and you can use your clicker, but Semantic "UI" screams to me "works for me so fuck everyone else"

Couldn't agree more, this framework seems like a misnomer. How can you call it "semantic" without making it accessible at even the most basic levels? Bootstrap runs circles around this framework in this regard.

Agreed, semantic has helped two electrical engineers I know ;) throw together a somewhat decent website and demo a few times. It's really nice.

My personal favourite is Susy. http://susy.oddbird.net/

Susy is nice, but note that it's just a very fancy CSS layout calculator. Bootstrap, Foundation, and SemanticUI are full-fledged frontend frameworks. They're incomparable.

It looks nice, but that website is making my laptop sweat, so no thanks...

Reply on news.ycombinator.com