@anydigital/breakout-css 1.0.0-alpha.3 → 1.0.0-alpha.5

package/README.md

@@ -40,15 +40,18 @@ The breakout effect automatically applies to:
 - `img`, `figure`, `picture`
 - `video`, `audio`
 - `iframe`, `object`, `embed`, `canvas`
-- Elements with `.breakout-figure` class
+- `table`, `pre`
+- Elements with `.breakout-item` or `.breakout-item-max` class
 
 ### Manual Breakout
 
+For elements that don't automatically break out, use the `.breakout-item` class:
+
 ```html
 <div class="breakout">
   <p>Regular content...</p>
   
-  <div class="breakout-figure">
+  <div class="breakout-item">
     <iframe src="https://example.com/embed"></iframe>
   </div>
   
@@ -56,6 +59,21 @@ The breakout effect automatically applies to:
 </div>
 ```
 
+### Force Maximum Width
+
+By default, breakout elements auto-size between 100% and 125% width. To force an element to always use the full 125% breakout width, use `.breakout-item-max`:
+
+```html
+<div class="breakout">
+  <p>Regular content...</p>
+  
+  <!-- This will always be 125% width, never smaller -->
+  <img src="wide-image.jpg" class="breakout-item-max" alt="Wide image">
+  
+  <p>More content...</p>
+</div>
+```
+
 ## How It Works
 
 The breakout effect is achieved by:

package/dist/breakout.css

@@ -25,7 +25,7 @@
 /* Max out the width of the element */
 
 .breakout > .breakout-item-max:not(does-not-exist),.breakout > p > .breakout-item-max {
-      width: 125%;
+      width: 125% !important; /* @TODO: !important for cases like figure.breakout-item-max */
     }
 
 /* @TODO: Allow non-direct children. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anydigital/breakout-css",
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-alpha.5",
   "description": "Modern CSS utilities to easily break-out / hang / pop-out images, iframes, or other figures from their parent container",
   "keywords": [
     "css",
@@ -13,7 +13,8 @@
   ],
   "files": [
     "dist",
-    "src"
+    "src",
+    "postcss.config.js"
   ],
   "exports": {
     ".": "./src/breakout.css",

package/postcss.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  plugins: {
+    'postcss-preset-env': {
+      stage: 3,
+      features: {
+        'nesting-rules': true,
+        'is-pseudo-class': true,
+      },
+      preserve: false,
+    }
+  }
+}

package/src/breakout.css

@@ -32,8 +32,8 @@
     }
 
     /* Max out the width of the element */
-    &:is(.breakout-item-max) {
-      width: 125%;
+    &.breakout-item-max {
+      width: 125% !important; /* @TODO: !important for cases like figure.breakout-item-max */
     }
   }
 }