Add "bp-" prefix to prevent class collapse #9

README.md

@@ -77,20 +77,20 @@ If you want to use svg as icon type copy the
 
 **Use it**
 ```html
-<div class="rating large star-icon direction-rtl value-1 half color-default label-top">
-   <div class="label-value">1.5</div>
-    <div class="star-container">
-        <div class="star">
+<div class="bp-rating large star-icon direction-rtl value-1 half color-default label-top">
+   <div class="bp-label-value">1.5</div>
+    <div class="bp-star-container">
+        <div class="bp-star">
             <i class="star-empty"></i>
             <i class="star-half"></i>
             <i class="star-filled"></i>
         </div>
-        <div class="star">
+        <div class="bp-star">
             <i class="star-empty"></i>
             <i class="star-half"></i>
             <i class="star-filled"></i>
         </div>
-        <div class="star">
+        <div class="bp-star">
             <i class="star-empty"></i>
             <i class="star-half"></i>
             <i class="star-filled"></i>
@@ -112,8 +112,8 @@ The actual star rating value. The color of the stars depends on the rating numbe
 - .value-4
 - .value-5
 ```html
-<div class="rating value-3">
-   <div class="star-container">
+<div class="bp-rating value-3">
+   <div class="bp-star-container">
         ...stars...
     </div>
 </div>
@@ -125,8 +125,8 @@ If set, every rating value will have a half star at the end.
 - .half
 
 ```html
-<div class="rating value-3 half">
-   <div class="star-container">
+<div class="bp-rating value-3 half">
+   <div class="bp-star-container">
         ...stars...
     </div>
 </div>
@@ -139,9 +139,9 @@ The text next to the stars.
 - (Just additional HTML)
 
 ```html
-<div class="rating value-3">
-   <div class="label-value">My text</div>
-   <div class="star-container">
+<div class="bp-rating value-3">
+   <div class="bp-label-value">My text</div>
+   <div class="bp-star-container">
         ...stars...
     </div>
 </div>
@@ -154,9 +154,9 @@ The position of the label.
 - .label-hidden
 
 ```html
-<div class="rating value-3 label-hidden">
-   <div class="label-value">3.5</div>
-   <div class="star-container">
+<div class="bp-rating value-3 label-hidden">
+   <div class="bp-label-value">3.5</div>
+   <div class="bp-star-container">
         ...stars...
     </div>
 </div>
@@ -172,9 +172,9 @@ The position of the label.
 - .label-left
 
 ```html
-<div class="rating value-3 label-right">
-   <div class="label-value">Good</div>
-   <div class="star-container">
+<div class="bp-rating value-3 label-right">
+   <div class="bp-label-value">Good</div>
+   <div class="bp-star-container">
         ...stars...
     </div>
 </div>
@@ -188,8 +188,8 @@ The position of the label.
 If the start use the whole space or not.  
 
 ```html
-<div class="rating value-3 space-between">
-   <div class="star-container">
+<div class="bp-rating value-3 space-between">
+   <div class="bp-star-container">
         ...stars...
     </div>
 </div>
@@ -204,8 +204,8 @@ The height and width of the stars.
 - .medium
 - .large
 ```html
-<div class="rating value-3 large">
-   <div class="star-container">
+<div class="bp-rating value-3 large">
+   <div class="bp-star-container">
         ...stars...
     </div>
 </div>
@@ -222,8 +222,8 @@ Static color of stars.
 - .color-positive  
 
 ```html
-<div class="rating value-3 color-negative">
-   <div class="star-container">
+<div class="bp-rating value-3 color-negative">
+   <div class="bp-star-container">
         ...stars...
     </div>
 </div>
@@ -237,8 +237,8 @@ Static color of stars.
 The click callback is disabled, colors are transparent   
 
 ```html
-<div class="rating value-3 disabled">
-   <div class="star-container">
+<div class="bp-rating value-3 disabled">
+   <div class="bp-star-container">
         ...stars...
     </div>
 </div>
@@ -252,8 +252,8 @@ The direction of the stars and label.
 - .direction-ltr  
 
 ```html
-<div class="rating value-3 direction-rtl">
-   <div class="star-container">
+<div class="bp-rating value-3 direction-rtl">
+   <div class="bp-star-container">
         ...stars...
     </div>
 </div>
@@ -268,8 +268,8 @@ The duration of the animation in ms.
 - .slow  
 
 ```html
-<div class="rating value-3 slow">
-   <div class="star-container">
+<div class="bp-rating value-3 slow">
+   <div class="bp-star-container">
         ...stars...
     </div>
 </div>
@@ -285,16 +285,16 @@ The type of start resource to use.
 - .custom-icon (i.e. font-awesome)
 
 ```html
-<div class="rating value-3 star-icon">
-   <div class="star-container">
+<div class="bp-rating value-3 star-icon">
+   <div class="bp-star-container">
         <!-- font icons-->
-        <div class="star">
+        <div class="bp-star">
             <i class="star-empty"></i>
             <i class="star-half"></i>
             <i class="star-filled"></i> 
         </div>
         <!-- or svg icons-->
-        <div class="star">
+        <div class="bp-star">
             <svg class="star-empty">
                 <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
             </svg>
@@ -321,8 +321,8 @@ The type of start resource to use.
 - .theme-kununu
 
 ```html
-<div class="rating value-3 theme-google-places">
-   <div class="star-container">
+<div class="bp-rating value-3 theme-google-places">
+   <div class="bp-star-container">
         ...stars...
     </div>
 </div>