Semantic-ui: [Usage] Using Bootstrap with Semantic UI, Naming Conflict

[irfanevrens]

Hello,
I am using bootstrap as a base front-end framework on my project. When I want to use semantic-ui, the modals conflict each other. Because there is same function named modal('show')
Thanks.

[lholznagel]

There is a reason why you shouldn´t mix two UI Frameworks together in one project. One reason is because some things are named equal.

[irfanevrens]

I think there should be a way to use with other popular front-end frameworks. Because of my project on the top of bootstrap. I could not throw away bootstrap and I want to use semantic-ui.

[kevindice]

Using two front end frameworks in the same page is generally a bad idea. It might make sense if they were frameworks for two separate concerns (ex. One provides a grid system while the other provides fancy looking buttons), but the overlap between Bootstrap and Semantic-UI is huge, and many of the classes will have the same name and will conflict.

[jlukic]

Create a custom build with just the components you need (removing modal). You can do this as part of the interactive installer during setup. If you need to include both modals. Just find and replace modal with suimodal across modal.js

See our getting started

[irfanevrens]

Thanks @jlukic I have created a custom build with removing modal. There is no conflict for now. But I could not see a config item for modal. Where is the config line for removal modal for build?

[irfanevrens]

Ah, I find a list in semantic.json named components, there is no modal. If I add "modal" then is semantic-modal available?

[jlukic]

Yes, exactly. You can also adjust this file using the setup wizard
http://semantic-ui.com/introduction/getting-started.html#install-semantic-ui

[xDaizu]

Just find and replace modal with suimodal across modal.js

Do you mean replace only the $.fn.modal and $.fn.modal.settingsreferences o does it include other potential replaces like $.fn.modal.settings.name and $.fn.modal.settings.namespace?

[RobertoFranco]

Is very easy!!

In modal conflict between this two, you just have to replace, in "_semantic.js_" or "_semantic.min.js_", all text "modal" (sensitive case) for another variable like "suimodal" suggested above by jlukic.