How to combine multiple css framework with overpalling classes


Tags: twitter-bootstrap,gruntjs,bower,css-frameworks,materialize

Problem :

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.



Solution :

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;
}

    CSS Howto..

    How do I use a pre-defined CSS style for a programmatically drawn TextField?

    How to design a CSS for a centered floating confirm dialog?

    how to move css element with scrolling left with Jquery?

    How to have separate images for radio buttons - HTML & CSS

    How can I “display:none” to some adjacent text with CSS?

    How to specify discrete mapper style in cytoscapejs?

    How to set CSS rule for a DIV in a LI of class UL?

    PrimeFaces: how to override CSS class

    How to change CSS attribute at all div inside td with class

    How do I use CSS animations to slide a fixed position element from the bottom of the page to the top?

    How to prevent HTML Email from having quoted printable when sending with C# using System.Net.Mail.MaiMessage

    CSS Selectors - How to apply a defined class on the selector's event

    How to center this stuff inside a link using CSS?

    How to make the green DIV fit right after 2 upper divs?

    How to center two blocks with some gap inbetween using CSS?

    HTML and CSS: How to lay out a div tag with width:100% and left:300px

    How to make an image fully flexible in terms of display size?

    How to show the same font which in photoshop on my webpage?

    How to set css via jquery for preventing some action

    How to improve the performance of this CSS animation?

    How to load CSS on SSL pages?

    How to do drop-down box like “More action” in gmail

    How can I make my header fade out/disappear on scroll down and reappear on scroll up?

    how to remove space from html using bootstrap

    How to center a relative div in my case?

    How to align an element applying css margins that does not get modified according to browsers and screen resolutions?

    How to change default theme color teal to blue without using custom CSS in materilaize

    how decrease font size?

    How to rearrange several divs on window resize - jQuery or CSS

    How to play css transition effect from javascript