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

package/README.md

@@ -36,11 +36,16 @@ Modern CSS utilities to easily break-out / hang / pop-out images, iframes, or ot
 
 ### Supported Elements
 
-The breakout effect automatically applies to:
-- `img`, `figure`, `picture`
-- `video`, `audio`
-- `iframe`, `object`, `embed`, `canvas`
+The breakout effect automatically applies to direct children or elements wrapped in `<p>` tags:
+
+**Inline blocks:**
+- `img`, `picture`, `figure`, `canvas`, `audio`
+
+**Larger blocks:**
 - `table`, `pre`
+- `iframe`, `object`, `embed`, `video`
+
+**Custom utility classes:**
 - Elements with `.breakout-item` or `.breakout-item-max` class
 
 ### Manual Breakout
@@ -61,7 +66,7 @@ For elements that don't automatically break out, use the `.breakout-item` class:
 
 ### 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`:
+By default, breakout elements use `width: fit-content` with `max-width: 125%`, allowing them to size between 100% and 125% width based on their content. To force an element to always use the full 125% breakout width, use `.breakout-item-max`:
 
 ```html
 <div class="breakout">
@@ -74,15 +79,23 @@ By default, breakout elements auto-size between 100% and 125% width. To force an
 </div>
 ```
 
+Note: `.breakout-item-max` uses `width: 125% !important` to override default sizing.
+
 ## How It Works
 
-The breakout effect is achieved by:
+The `.breakout` container applies `padding-inline: 10%` to create space for breakout elements.
+
+The breakout effect on elements is achieved by:
+
+1. Setting `width: fit-content` with `min-width: 100%` and `max-width: 125%` (inline blocks like `img`, `picture`, `figure`, `canvas`, and `audio` use `min-width: auto` instead)
+2. Using `margin-left: 50%` to position from the center of the container
+3. Using `transform: translateX(-50%)` to shift it left by half its width
+
+This combination allows elements to extend beyond their parent container (up to 125% width) while remaining visually centered.
 
-1. Setting the element's width to 125% of its container
-2. Using `transform: translateX(-50%)` to shift it left by half its width
-3. Using `margin-left: 50%` to position it from the center of the container
+### Markdown Support
 
-This combination allows elements to extend beyond their parent container while remaining visually centered.
+The breakout effect works on direct children of `.breakout`, or elements wrapped in `<p>` tags (for Markdown compatibility where images are often wrapped in paragraphs).
 
 ## License
 

package/dist/breakout.css

@@ -1,22 +1,21 @@
 /* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
 
 .breakout {
-  padding-left: 10%;
-  padding-right: 10%;
+  padding-inline: 10%;
 
   /* Direct children, or wrapped in <p> for Markdown support */
 }
 
 .breakout > img:not(does-not-exist):not(.does-not-exist),.breakout > picture:not(does-not-exist):not(.does-not-exist),.breakout > figure:not(does-not-exist):not(.does-not-exist),.breakout > canvas:not(does-not-exist):not(.does-not-exist),.breakout > audio:not(does-not-exist):not(.does-not-exist),.breakout > table:not(does-not-exist):not(.does-not-exist),.breakout > pre:not(does-not-exist):not(.does-not-exist),.breakout > iframe:not(does-not-exist):not(.does-not-exist),.breakout > object:not(does-not-exist):not(.does-not-exist),.breakout > embed:not(does-not-exist):not(.does-not-exist),.breakout > video:not(does-not-exist):not(.does-not-exist),.breakout > .breakout-item:not(does-not-exist),.breakout > .breakout-item-max:not(does-not-exist),.breakout > p > img:not(.does-not-exist),.breakout > p > picture:not(.does-not-exist),.breakout > p > figure:not(.does-not-exist),.breakout > p > canvas:not(.does-not-exist),.breakout > p > audio:not(.does-not-exist),.breakout > p > table:not(.does-not-exist),.breakout > p > pre:not(.does-not-exist),.breakout > p > iframe:not(.does-not-exist),.breakout > p > object:not(.does-not-exist),.breakout > p > embed:not(.does-not-exist),.breakout > p > video:not(.does-not-exist),.breakout > p > .breakout-item,.breakout > p > .breakout-item-max {
-      display: inline-block;
-      width: auto;
+      width: -moz-fit-content;
+      width: fit-content;
       min-width: 100%;
       max-width: 125%;
-      transform: translateX(-50%);
       margin-left: 50%;
+      transform: translateX(-50%);
     }
 
-/* Let inline blocks shrink to fit their content */
+/* Respect inline blocks' min-width */
 
 .breakout > img:not(does-not-exist),.breakout > picture:not(does-not-exist),.breakout > figure:not(does-not-exist),.breakout > canvas:not(does-not-exist),.breakout > audio:not(does-not-exist),.breakout > p > img,.breakout > p > picture,.breakout > p > figure,.breakout > p > canvas,.breakout > p > audio {
       min-width: auto;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anydigital/breakout-css",
-  "version": "1.0.0-alpha.5",
+  "version": "1.0.0-alpha.7",
   "description": "Modern CSS utilities to easily break-out / hang / pop-out images, iframes, or other figures from their parent container",
   "keywords": [
     "css",
@@ -8,7 +8,6 @@
     "images",
     "figures",
     "tailwind",
-    "tailwind-plugin",
     "utilities"
   ],
   "files": [
@@ -16,12 +15,13 @@
     "src",
     "postcss.config.js"
   ],
+  "style": "./src/breakout.css",
   "exports": {
     ".": "./src/breakout.css",
     "./dist": "./dist/breakout.css"
   },
   "scripts": {
-    "build": "postcss src/breakout.css -o dist/breakout.css",
+    "build": "postcss src/breakout.css --no-map -o dist/breakout.css",
     "prepublishOnly": "npm run build"
   },
   "repository": {
@@ -30,11 +30,7 @@
   },
   "author": "Anton Staroverov",
   "license": "MIT",
-  "peerDependencies": {
-    "tailwindcss": "^3.0.0 || ^4.0.0"
-  },
   "devDependencies": {
-    "fs-extra": "^11.2.0",
     "postcss": "^8.4.0",
     "postcss-cli": "^11.0.0",
     "postcss-preset-env": "^10.6.0"

package/src/breakout.css

@@ -1,8 +1,7 @@
 /* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
 
 .breakout {
-  padding-left: 10%;
-  padding-right: 10%;
+  padding-inline: 10%;
 
   /* Direct children, or wrapped in <p> for Markdown support */
   & > *,
@@ -14,19 +13,18 @@
       table,
       pre,
       iframe, object, embed, video,
-      /* Custom utility class for other tags that need to be broken out */
+      /* Custom utility classes for other tags that need to be broken out */
       .breakout-item,
       .breakout-item-max
     ) {
-      display: inline-block;
-      width: auto;
+      width: fit-content;
       min-width: 100%;
       max-width: 125%;
-      transform: translateX(-50%);
       margin-left: 50%;
+      transform: translateX(-50%);
     }
 
-    /* Let inline blocks shrink to fit their content */
+    /* Respect inline blocks' min-width */
     &:is(img, picture, figure, canvas, audio) {
       min-width: auto;
     }