Namespacing Bootstrap 3 class prefixed
I am wondering what is the best way to namespacing bootstrap 3 CSS class using a prefix.
This question is not only related to the order of loading names, so it only applies in a specific container (see here: How to use a namespace on Twitter so that styles don't clash ), but to change all generated CSS classes using a predefined prefix.
I've started prefixing pl-
LESS files pretty much everywhere, but I must be missing a few things because I'm breaking some of the styling. So I'm looking for a smarter solution ...
For example, a class .alert
in alerts.less
should be .pl-alert
.
The point is that I am writing a plugin that can be used by other people (included in their website) and I should avoid them changing styles by mistake (they probably have a class .alert
that will be merged with mine and do mess), so I want to avoid that by using a specific prefix.
source to share
I had the same problem and was looking for some suggestions ... I found that the best way for me would be to have a namespace.less file in my bootstrap node project.
.namespace {
@import (less) "../dist/css/bootstrap.css";
}
In my Gruntfile, I will create a task to compile another distribution. Something like that:
less: {
compileCore: {
options: {
strictMath: true,
sourceMap: true,
outputSourceFiles: true,
sourceMapURL: '<%= pkg.name %>.css.map',
sourceMapFilename: 'dist/css/<%= pkg.name %>.css.map'
},
src: 'less/bootstrap.less',
dest: 'dist/css/<%= pkg.name %>.css'
},
compileTheme: {
options: {
strictMath: true,
sourceMap: true,
outputSourceFiles: true,
sourceMapURL: '<%= pkg.name %>-theme.css.map',
sourceMapFilename: 'dist/css/<%= pkg.name %>-theme.css.map'
},
src: 'less/theme.less',
dest: 'dist/css/<%= pkg.name %>-theme.css'
},
**compileNamespace: {
options: {
strictMath: true,
sourceMap: true,
outputSourceFiles: true,
sourceMapURL: '<%= pkg.name %>.css.map',
sourceMapFilename: 'dist/css/<%= pkg.name %>.css.map'
},
src: 'less/namespace.less',
dest: 'dist/css/ml.<%= pkg.name %>.css'
},**
...
But there is some kind of cleanup that I will need to do afterwards. In particular, all styles created by normalize.less and scaffolding.less.
I would create a Grunt task using RegExp to replace the styles that start with .namespace html
, simply html
, and those that start with .namespace body
would bebody.namespace
Then, in my HTML markup, I'll just add the namespace class to the body tag.
source to share