Skip to content

Option to ignore HTML by framework #4

@ybelenko

Description

@ybelenko

Test Case

https://codepen.io/ybelenko/pen/VwKgwPw

Summary

I try to apply framework to specific part of the application. However it adds classes to all entities within page body.

$('.use-bmd').bootstrapMaterialDesign({});
<!-- 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>

Expected result

I would expect HTML inside .keep-vanilla untouched

<!-- 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>

Additional Information

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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions