Change the name of Flip Ratio Utility from Responsive Flip Ratio Util…

…ity to only flip-ratio.scss #5

README.md

@@ -8,10 +8,17 @@
 ### Having Two Bootstrap Ratio Utilities
 
 #### Responsive ratio utility
-Having a Responsive Ratio Utility, which needed for switching ratios for media brackpoints.
+Ratio Utility with responsive options, which needed for switching ratios for media breakpoints.
+
+* Adds (`-sm`, `-md`, `-lg`, `-xl`, `-xxl`) to ratio classes to change the ratio for that brackpoint
+* Use the normal ration classes for mobiles which less than `-sm`
+
+#### Flip Ratio Utility
+Flip Ratio Utility, which needed for flipping ratios for media breakpoints.
+
+* Adds (`-flip-xs`, `-flip-sm`, `-flip-md`, `-flip-lg`, `-flip-xl`, `-flip-xxl`) to ratio classes to change the ratio for that brackpoint
+* Use the `-flip-xs` ratio classes for mobiles which less than `-flip-sm` or `-sm` in case of using both ratio utilities at the same time
 
-#### Responsive Flip Ratio Utility
-Having a Responsive Flip Ratio Utility, which needed for flipping ratios for media brackpoints.
 
 
 ```
@@ -41,40 +48,45 @@ or `custom_theme.base.scss`
 @import "../node_modules/bootstrap-ratio-utilities/utilities/scss/responsive-ratio.scss";
 ```
 
-In case the Responsive Flip Ratio Utility was needed
+In case the Flip Ratio Utility was needed
 ```
-// Responsive ratio utility.
-@import "../node_modules/bootstrap-ratio-utilities/utilities/scss/responsive-flip-ratio.scss";
+// Flip ratio utility.
+@import "../node_modules/bootstrap-ratio-utilities/utilities/scss/flip-ratio.scss";
 ```
 
 ## Examples for Responsive ratio utility:
 
-**Example #1**
+**Example #1** responsive iframe ratio utility
 ```
 <div class="ratio ratio-4x3 ratio-16x9-sm">
    <iframe src="https://youtube.com/embed/bTqVqk7FSmY?autoplay=1&mute=1" frameborder="0" allowtransparency="" width="1600" height="900" loading="lazy"></iframe>
 </div>
 ```
 
-**Example #2**:  With Remote Videos
+**Example #2**: responsive Remote Video ratio with normal `4:3` ratio `ratio-4x3` on mobiles, and
+ ratio of `16:9` on tablets, medium, and large screens, But `21:9` on extra extra large screen sizes
 ```
 <div class="varbase-video-player ratio ratio-4x3 ratio-16x9-sm ratio-21x9-xxl">
    <iframe src="https://youtube.com/embed/bTqVqk7FSmY?autoplay=1&mute=1" frameborder="0" allowtransparency="" width="1600" height="900" loading="lazy"></iframe>
 </div>
 ```
 
-**Example #3**: With images
+**Example #3**: Responsive image ratio with normal `4:3` ratio `ratio-4x3` on mobiles, and
+ ratio of `16:9` on tables and larger screen sizes.
 ```
-<div class="field field--name-field-media-image field--type-image ratio ratio-4x3 ratio-16x9-sm ratio-21x9-xxl">
+<div class="field field--name-field-media-image field--type-image ratio ratio-4x3 ratio-16x9-sm">
   <img src="https://raw.githubusercontent.com/Vardot/varbase_media_demo/10.0.0/content/file/coworking-1.jpg">
 </div>
 ```
+It can be integrated with [Dynamic Responsive Image (or drimage)](https://www.drupal.org/project/drimage)
+## Examples for Flip Ratio Utility:
 
-## Examples for Responsive Flip Ratio Utility:
-
-**Example #3**: With images
+**Example #4**: Flipped image ratio to 9:16 on mobiles and tables, but 16:9 on medium screen sizes and larger
 ```
 <div class="ratio ratio-16x9-flip-xs ratio-16x9-flip-sm ratio-16x9-md">
   <img src="https://raw.githubusercontent.com/Vardot/varbase_media_demo/10.0.0/content/file/coworking-1.jpg">
 </div>
 ```
+It can be integrated with [Dynamic Responsive Image (or drimage)](https://www.drupal.org/project/drimage) 
+with height integration and `img-fluid`
+

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-ratio-utilities",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Bootstrap Ratio Utilities: Having a Responsive Ratio Utility, which needed for switching ratios for media brackpoints.",
   "author": "Vardot",
   "contributors": [

scss/bootstrap-ratio-utilities.scss

@@ -17,5 +17,5 @@
 // Responsive Ratio Utility.
 @import "../utilities/scss/responsive-ratio.scss";
 
-// Responsive Flip Ratio Utility.
-@import "../utilities/scss/responsive-flip-ratio.scss";
+// Flip Ratio Utility.
+@import "../utilities/scss/flip-ratio.scss";

utilities/scss/responsive-flip-ratio.scss → utilities/scss/flip-ratio.scss

@@ -1,5 +1,5 @@
 //
-// Responsive Flip Ratio Utility.
+// Flip Ratio Utility.
 //
 
 $flipped-aspect-ratios: ();