This is interesting and most helpful solution I have ever worked for. It reduces hell lot of chances of alternative work-around to adjust the CSS in a bootstrap page.
Problem: Bootstrap CSS framework is applied to complete page.
Ex. Visual force has many components, but we want to use bootstrap for tables alone. But as the class names conflict all SF styles will get overwritten.
Solution use SLSS complier to generate a scoped CSS and use it.
Steps:
Problem: Bootstrap CSS framework is applied to complete page.
Ex. Visual force has many components, but we want to use bootstrap for tables alone. But as the class names conflict all SF styles will get overwritten.
Solution use SLSS complier to generate a scoped CSS and use it.
Steps:
- Download framework resource.
- Find all the CSS files you need.
- Use SCSS compiler online tools, I found this one very helpful.
http://beautifytools.com/scss-compiler.php - Use below syntax & paste the content.
.boot{
//complete css
}
- Now click on Compile SCSS, It will generate scopes css with errors if any. resolve error and save in them.
- Optionally you can minify the CSS.
Usage:
- Wherever you want to utilise or scope the CSS limits. Use div tag with given class name for scoping.
<div class="boot">
<!----- Rest of the code ------>
</div>
Comments
Post a Comment