[Help] Using FU with other UI Library without conflict

[CmdrMahesh]

Hello Buddies,

I know this topic is older even with the SU: Semantic-Org/Semantic-UI#1701

From then and now the FU is so advanced and enhanced a lot, but does it has some build feature that can make the library to not collide with other UI library in CMS platform like WordPress where other plugin developers use BootStrap and jQuery UI.

I tried to use Shadow DOM and ended up filing this ticket: #1668

So I just want to know if it is possible to build the FU dist i.e. semantic.min.css and semantic.min.js without manual search and replace so that after new releases I do not end up the search and replace and with any sticking bug.

Thank you for your earlier supports in my other tickets

[ko2in]

What do you mean by manual search and replace? When the new version released, and if you installed FUI via git, then you can run git pull to fetch the latest version and then run gulp build which will build the latest version source code. If you install via npm, then simply update via npm install with version number and build with gulp.

[CmdrMahesh]

@ko2in I mean to make the FU class/selectors isolated so that they do not collide with other UI libraries.

For example .button is a common class for bootstrap, jQuery UI, and may include others and thus I do not want to let them override our FU's UI/UX configuration and thus I want to make it like .fu-button and make the FU isolated from the other library.

I hope my example makes sense and thank you for your response.

[lubber-de]

Well, to be honest: I second what Jack quoted in the original issue: FUI/SUI is already namespaced using ui while bootstrap does not use additional namespaces (but just .button as you stated) So FUI already got this in mind, while bootstrap (and others) (also) think they should be used exclusively.

btw: bootstrap is using .btn rather than .button, isn't it?

If only bootstrap would also have a namespace classname attached you won't run into issues, but i doubt, bootstrap will invent this. So in my perspective it's more bootstrap having an issue with FUI, not FUI having an issue with bootstrap.

However, to accomplish this in FUI, you would need to add a prefix to every used class for every component and its variants to make sure it does not collide to any class by other frameworks

So a ui yellow labeled icon button would have to be renamed to something like fui-ui fui-yellow fui-labeled fui-icon fui-button

It would be far more easier and clean to add a namespace to bootstrap instead so
btn btn-primary would become something like bs btn btn-primary

If we stay at your example given another framework just uses .button then you won't run into issues anymore if that additional framework would add a global namespace like FUI because

.ui.button is already namespaced and
.bs.button would also be namespaced then and won't collide

[lubber-de]

Here is how to namespace bootstrap yourself using LESS by simply wrapping everything into a .bs {}
https://formden.com/blog/isolate-bootstrap

[ko2in]

Closed. @lubber-de already explained that the conflict is not FUI problem but, the other framework's problem.