4

We work in the wordpress environment and namespacing bootstrap simply is not enough as many other things might conflict and not every developer is namespacing this. SO the only option i see is to namespace the classes so that instead of .row i have to use in my markup .namespace-row.

Any ideas on how to make that efficiently and know if someone has already tackled this?I guess a regexp is the way to go, or a php script.

EDIT - Since i've been voted down, i'll try to be more clear. Bootstrap classes are very general like row. Namespacing has been suggested as a solution but in the wordpress environment this is not enough as a template might use a row class. so even if we namespace conflicts arise. My idea was to namespace classes so that in bootstrap code .row becomes .namespace-row. I guess i could use a regexp to accomodate this, i just wanted to know if someone has already done this and share his/her experience.

EDIT 2 - Ok let's try to be even more precise. The route i'm going down is parsing with Lessphp. so i have my bootstrap code in $css_to_parse

$parsed_css = $this->lessc->parse( $css_to_parse, $variables );

i now see two possibilities: a regular expression or hacking Lessphp for namespacing when parsing. I tried using 's|([\.#])([a-z][^\s,]+)|$1ai1ec-$2|i' as a regex but it's not working 100% as sometimes not everything is namespaced, for example i get

.ai1ec-open .dropdown-toggle.btn-success

where i would expect

 .ai1ec-open .ai1ec-dropdown-toggle.ai1ec-btn-success

so the regexp might need some tuning.

Community
  • 1
  • 1
Nicola Peluchetti
  • 76,206
  • 31
  • 145
  • 192

1 Answers1

1

I created a custom namespaced stylesheet of version 3.1.1 at sassmeister.com:

https://gist.github.com/awesome/9676554#file-sassmeister-output-css

Include it after existing bootstrap versions, then wrap any element you want to be v3.1.1 with the class twbs-3_1_1.

Example:

<div class="twbs-3_1_1 panel panel-default"></div>
SoAwesomeMan
  • 3,226
  • 1
  • 22
  • 25