Use another css framework for certain sections

up vote
3
down vote

favorite

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.

asked Aug 30 at 5:28

Jambo Dev

262

migrated from webmasters.stackexchange.com Aug 30 at 11:52

This question came from our site for pro webmasters.

add a commentÂ |Â

up vote
3
down vote

favorite

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

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

asked Aug 30 at 5:28

Jambo Dev

262

migrated from webmasters.stackexchange.com Aug 30 at 11:52

This question came from our site for pro webmasters.

add a commentÂ |Â

up vote
3
down vote

favorite

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

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

asked Aug 30 at 5:28

Jambo Dev

262

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

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

asked Aug 30 at 5:28

Jambo Dev

262

asked Aug 30 at 5:28

Jambo Dev

262

asked Aug 30 at 5:28

Jambo Dev

262

asked Aug 30 at 5:28

Jambo Dev

262

migrated from webmasters.stackexchange.com Aug 30 at 11:52

This question came from our site for pro webmasters.

migrated from webmasters.stackexchange.com Aug 30 at 11:52

This question came from our site for pro webmasters.

add a commentÂ |Â

5 Answers
5

active

oldest

votes

up vote
1
down vote

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

answered Aug 30 at 6:59

Steve

1,03111232

Something like this was potentially possible with the use of the scoped attribute on the style element (initially part of the HTML5 spec). This allowed the styles to be confined to the scope of the parent element (so you would also need an outer container). However, browser support was sparse and it has since been removed from later versions of the HTML5 spec.
â€“Â MrWhite
Aug 30 at 11:28

add a commentÂ |Â

up vote
1
down vote

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.

answered Aug 30 at 8:53

Jambo Dev

262

add a commentÂ |Â

up vote
0
down vote

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.

answered Aug 30 at 8:26

Evgeniy

488326

add a commentÂ |Â

up vote
0
down vote

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>

answered Aug 30 at 12:02

Simon Jensen

11613

add a commentÂ |Â

up vote
0
down vote

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.

answered Aug 30 at 16:05

cbirdsong

1112

add a commentÂ |Â

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: false,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52096403%2fuse-another-css-framework-for-certain-sections%23new-answer', 'question_page');

);

Post as a guest

Name

5 Answers
5

active

oldest

votes

5 Answers
5

active

oldest

votes

up vote
1
down vote

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

answered Aug 30 at 6:59

Steve

1,03111232

Something like this was potentially possible with the use of the scoped attribute on the style element (initially part of the HTML5 spec). This allowed the styles to be confined to the scope of the parent element (so you would also need an outer container). However, browser support was sparse and it has since been removed from later versions of the HTML5 spec.
â€“Â MrWhite
Aug 30 at 11:28

add a commentÂ |Â

up vote
1
down vote

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

answered Aug 30 at 6:59

Steve

1,03111232

Something like this was potentially possible with the use of the scoped attribute on the style element (initially part of the HTML5 spec). This allowed the styles to be confined to the scope of the parent element (so you would also need an outer container). However, browser support was sparse and it has since been removed from later versions of the HTML5 spec.
â€“Â MrWhite
Aug 30 at 11:28

add a commentÂ |Â

up vote
1
down vote

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

answered Aug 30 at 6:59

Steve

1,03111232

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

answered Aug 30 at 6:59

Steve

1,03111232

answered Aug 30 at 6:59

Steve

1,03111232

answered Aug 30 at 6:59

Steve

1,03111232

answered Aug 30 at 6:59

Steve

1,03111232

Something like this was potentially possible with the use of the scoped attribute on the style element (initially part of the HTML5 spec). This allowed the styles to be confined to the scope of the parent element (so you would also need an outer container). However, browser support was sparse and it has since been removed from later versions of the HTML5 spec.
â€“Â MrWhite
Aug 30 at 11:28

add a commentÂ |Â

Something like this was potentially possible with the use of the scoped attribute on the style element (initially part of the HTML5 spec). This allowed the styles to be confined to the scope of the parent element (so you would also need an outer container). However, browser support was sparse and it has since been removed from later versions of the HTML5 spec.
â€“Â MrWhite
Aug 30 at 11:28

Something like this was potentially possible with the use of the scoped attribute on the style element (initially part of the HTML5 spec). This allowed the styles to be confined to the scope of the parent element (so you would also need an outer container). However, browser support was sparse and it has since been removed from later versions of the HTML5 spec.
â€“Â MrWhite
Aug 30 at 11:28

add a commentÂ |Â

up vote
1
down vote

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.

answered Aug 30 at 8:53

Jambo Dev

262

add a commentÂ |Â

up vote
1
down vote

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.

answered Aug 30 at 8:53

Jambo Dev

262

add a commentÂ |Â

up vote
1
down vote

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.

answered Aug 30 at 8:53

Jambo Dev

262

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.

answered Aug 30 at 8:53

Jambo Dev

262

answered Aug 30 at 8:53

Jambo Dev

262

answered Aug 30 at 8:53

Jambo Dev

262

answered Aug 30 at 8:53

Jambo Dev

262

add a commentÂ |Â

up vote
0
down vote

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.

answered Aug 30 at 8:26

Evgeniy

488326

add a commentÂ |Â

up vote
0
down vote

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.

answered Aug 30 at 8:26

Evgeniy

488326

add a commentÂ |Â

up vote
0
down vote

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.

answered Aug 30 at 8:26

Evgeniy

488326

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.

answered Aug 30 at 8:26

Evgeniy

488326

answered Aug 30 at 8:26

Evgeniy

488326

answered Aug 30 at 8:26

Evgeniy

488326

answered Aug 30 at 8:26

Evgeniy

488326

add a commentÂ |Â

up vote
0
down vote

I believe this snippet might answer your question.

.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>

answered Aug 30 at 12:02

Simon Jensen

11613

add a commentÂ |Â

up vote
0
down vote

I believe this snippet might answer your question.

.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>

answered Aug 30 at 12:02

Simon Jensen

11613

add a commentÂ |Â

up vote
0
down vote

I believe this snippet might answer your question.

.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>

answered Aug 30 at 12:02

Simon Jensen

11613

I believe this snippet might answer your question.

.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>

.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>

.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>

answered Aug 30 at 12:02

Simon Jensen

11613

answered Aug 30 at 12:02

Simon Jensen

11613

answered Aug 30 at 12:02

Simon Jensen

11613

answered Aug 30 at 12:02

Simon Jensen

11613

add a commentÂ |Â

up vote
0
down vote

answered Aug 30 at 16:05

cbirdsong

1112

add a commentÂ |Â

up vote
0
down vote

answered Aug 30 at 16:05

cbirdsong

1112

add a commentÂ |Â

up vote
0
down vote

answered Aug 30 at 16:05

cbirdsong

1112

answered Aug 30 at 16:05

cbirdsong

1112

answered Aug 30 at 16:05

cbirdsong

1112

answered Aug 30 at 16:05

cbirdsong

1112

answered Aug 30 at 16:05

cbirdsong

1112

add a commentÂ |Â

draft saved

draft discarded

draft saved

draft discarded

Post as a guest

Name

Search This Blog

Iyfjky