Thinking in Semantic UI if I have a Bootstrap background?

Question

I'm familiar with developing webapps and website with Bootstrap (v3 and v4), but now I'd like to start using Semantic UI.

After experimenting a bit I feel like Semantic UI offer less composabilities than Bootstrap, but I'm probably missing some things. For instance, I'm still unclear on how to I mute a text? Bootstrap has a text-muted class, but I can't find equivalent in Semantic UI

Question

Can you describe the paradigm shift that is necessary? Here are a few questions that might help you frame an answer:

• What should I stop doing/using;
• What should I start doing/using instead?
• Are there any server-side considerations/restrictions?

N.B.: I'm not looking for a detailed comparison between Semantic UI and Bootstrap.

Answer 1

Well, I had some Bootstrap and a lots of Foundation background before using Semantic UI, and the transition was easy. Now, when I'm forced to use Bootstrap, everything seems illogical there.

So, working almost 6 months on Semantic UI, I learned some of the things that helped me:

• When you get the hang of the semantics, it will be considerably easier. When Bootstrap forces you to use weird illogical abbreviations, then Semantic UI is natural language based. For example "ui inverted huge equal width form" will come out the way it sounds because you understand how things work together.

• The docs. I think Semantic UI has superb docs with examples, so if you don't know how to do something, you find it from the docs. I've only encountered couple of things you cannot find from the docs (e.g. Nag).

• There are some restrictions. For example, older Android, iOS and IE browsers are not supported because of the Flexbox. And there ARE bugs, so probably you have to fork and/or do pull requests and some Github issues and wait for a long time to have them fixed in main repo. Or rewrite some of the components (we ended up rewriting Sidebar because it didn't perform on mobile devices). But we didn't really see point in supporting legacy stuff that much anyway.

• The box model and positioning is different to what you've used to in Bootstrap, but in a way, it's a lot simpler when you get the hang of it.
• Don't expect a lots of helper classes, write them your own.
• Learn to use LESS, Gulp etc. from day one - it will save you from lots of headache and will increase your productivity. Also extending/overwriting Semantic UI is a good idea, when you want your own design.

All in all, we had issues, but looking back, we actually won in development time, because Semantic UI has most all the tools available you need to develop modern UI.