Use another css framework for certain sections

Jambo_Dev_9896335 0
Viewed 207

Is it possible to limit a framework's css classes to certain sections?

I want to include some components from the materialize framework into an existing wordpress theme that uses the exact same class names. Going through the whole materialize css file and renaming every single file would be too much work and wouldn't work anyway as I also need classes like table.

I thought about using iframes but they're a real pain when it comes to responsiveness.

css
5 Answers

Are these on a single page? If that is that is the case, you will have to rename elements for one framework or the other.

If they are on different pages you might load one CSS file depending on which framework you wish to apply on that particular page.

Out of curiosity I tried this

    <style>
        .test{
            color:red;
        }
    </style>
    <p class="test">Will this be red?</p>
    <style>
        .test{
            color:black;
        }
    </style>
    <p class="test">This may be black</p>

It didn't work

user_4954880

I partly solved it by writing a dirty python script that prepends a custom class name (in my case .material) to each style in the framework.

I then put the material design cards inside a .material div container and it seems to work for the most part.

I also tried to reset all of the theme styles inside the material container by using this solution here. Though that doesn't seem to affect it.

Somehow it still doesn't work for the tables. I even set the !important flag to each table style but there's no effect.

Jambo_Dev_98963350

you can add to excluded elements additional class, and use for it CSS rules with !important. On this way you'll force that excluded elements take only CSS you want.

user_19920040

I believe this snippet might answer your question.

This shows how the different CSS elements works when assigning the same class to all elements. You can then easily control each element with one class e.g. assign this class to the wrapping <div> and assign no class to the containing elements but define them in the CSS.

.test {
 background: blue;
}

.test table {
 background: red;
}

.test p {
 background: yellow;
}

.test div {
 background: green;
}
<table class="test">
<tr>
<td>Hello</td>
<td><p class="test">Hello too</p></td>
</tr>
</table>

<p class="test">Oh no</p>
<div class="test"><p class="test">Omfg</p></div>

user_64572500

The best way to go about this would be downloading the source files for the framework and compiling a customized version suited to your use case. You can modify the generated class names and remove the parts of the framework you won't be using, leading to a much smaller .css file containing unique class names.

user_12172000
Related