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.
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.
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.
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.
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 :)
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.
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.
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.
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.
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.
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.
You might just like it too.