How to combine multiple css framework with overpalling classes

Question

I want to use both materialize and bootstrap on my website. Problem is that classes overlap, how can I narrow framework to style only part of website? Or maybe how can I namespace it? I only want to use small subset of materialize (for example cards component) and use bootstrap for general styling (for example grid system.

I am also using bower with grunt, so if the solution goes well with automation process of grunt it will be helpful.

possible duplicate of How to namespace Twitter Bootstrap so styles don't conflict — C3roe
– C3roe, Commented May 1, 2015 at 1:23

azium · Accepted Answer · 2015-05-01 01:23:02Z

2

Using any of the preprocessors, like sass, less, or my favorite, stylus, you can easily nest an entire CSS file inside a top level class, effectively namespacing

// stylus
.top-level-class
  .nested-class (or entire file)
    color red

// generating
.top-level-class .nested-class {
  color: red;
}

answered May 1, 2015 at 1:23

azium

20.7k8 gold badges63 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to combine multiple css framework with overpalling classes

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related