CODEWITHSUNDEEP
csskendo-uikendo-gridmaterialize
SamF
SamF

Reputation: 255

How to manage clashing third party CSS

I'm working on a web application which is using Materialize as a front-end framework along with Kendo UI for the grid component.

I'm hitting problems in cases where both Kendo UI and Materialize have styles for the same element - for example they both override the styling on check boxes - this results in a broken layout due to the clash.

One option I realize is to pick either Materialize or Kendo UI and drop the other... however I would like to avoid this if possible as they in the most part have complemented each others weaknesses well.

If it was simply one element here or there putting specific overrides in would be an option however with the scale of the two frameworks this would be a maintenance nightmare as when one changed the overrides would possibly have to be refactored.

Are there any ways to solve this issue that I am missing?

Upvotes: 1

Views: 334

Answers (3)

KhoPhi
KhoPhi

Reputation: 9537

One way to workaround such a clash is to build your MaterializeCSS to include only the parts you so need for your project.

For instance, if you do not need the buttons styling of MaterializeCSS, you could simply, via sass, compile the materialize.scss and cherry pick buttons out of the file.

If going down the path of building your custom .css of Materialize is a long short for you, you can try using materialize.khophi.co (Disclaimer: I built it).

Find more about how to customize your MaterializeCSS: http://materializecss.com/getting-started.html

Upvotes: 1

Randy
Randy

Reputation: 9849

You can manually edit the stylesheet of eighter party. Take the non-minified CSS, and prepend every base path with a short prefix:

.card {
    ....
}

becomes 

.mat.card {
    ....
 }

That way, for every materialize style, you use .mat before anything. Or, if you mainly use materialize, do the same thing for Kendo UI.

This is a lot of pain, but would solve your issue.

Upvotes: 0

Rixcy
Rixcy

Reputation: 284

I know it's usually suggested not to duplicate code, and you want to try steering away from overrides, but would it be possible to find the section of css you like (i.e. select box from materialize) and copy that in to a new custom css file, renaming the selector so you can use it seperately from Materialize/Kendo UI?

Upvotes: 0

Related Questions