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.

Presage

Do consider asking questions on gitter.im/Semantic-Org/Semantic-UI – Basrelief

Try a tool like Codeply that will let you see all the SemanticUI classes – Delisadelisle

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.

Microsecond

1. I agree about the class convention feeling more natural, but I had more difficulties with the structure of components when mixing items with grid and other. – Commiserate

2. the doc is extensive but difficult to explore, e.g. where do find color or typo classes? I guess it get easier but discoverability could be improve – Commiserate

4. To position I used column grid with is super nice once you understand the e.g. two wide column idea! – Commiserate

Very true about helper classes, cause there are none. As for bugs, SUI is a lot more stable now than I was before. One more thing I'd add is poor support for form validation when it comes to array of fields (i.e. name="fieldName[]', cause there's none too. – Basrelief

5. Well, the helper class is something really cool in Bootstrap and something I miss in SUI or badly documented. You can use grey or disabled to mute a text but you had to try it yourself, a migrating from Boostrap page -in the doc- would be beneficial – Commiserate

6. The lack of Sass/SCSS was a no-go the first time, then I install SUI and has it generate CSS with Gulp it doesn't matter anymore as I can extend using SCSS and import semantic.css build in it. – Commiserate

Colors arent really helper classes. It's an integral part of some components/modules. I am talking about helper classes like clearfix. So in SUI in this case you can float buttons inside fields, for instance, but you cant clear the float )) oops! – Basrelief