I try to apply framework to specific part of the application. However it adds classes to all entities within page body.
<!-- apply bootstrap material design to next div -->
<div class="container use-bmd">
<h3>Floating label <i class="material-icons">face</i></h3>
<div class="form-group bmd-form-group">
<label for="exampleInputEmail1" class="bmd-label-floating">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1">
<span class="bmd-help">We'll never share your email with anyone else.</span>
</div>
</div>
<!-- keep next div not modified -->
<div class="container keep-vanilla">
<h3>Bootstrap vanilla</h3>
<div class="form-group bmd-form-group">
<label for="exampleInputEmail1" class="bmd-label-static">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1">
<span class="form-text">We'll never share your email with anyone else.</span>
</div>
</div>
<!-- apply bootstrap material design to next div -->
<div class="container use-bmd">
<h3>Floating label <i class="material-icons">face</i></h3>
<div class="form-group bmd-form-group">
<label for="exampleInputEmail1" class="bmd-label-floating">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1">
<span class="bmd-help">We'll never share your email with anyone else.</span>
</div>
</div>
<!-- keep next div not modified -->
<div class="container keep-vanilla">
<h3>Bootstrap vanilla</h3>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1">
<span class="form-text">We'll never share your email with anyone else.</span>
</div>
</div>
It would also be great to have some ignore classes or data attributes. Like:
<!-- please don't add bmd-form-group and everything to next div -->
<div class="bmd-ignore" data-bmd-ignore>
...
</div>