@anydigital/breakout-css 1.0.0-alpha

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Anton Staroverov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,83 @@
+# breakout-css
+
+Modern CSS utilities to easily break-out / hang / pop-out images, iframes, or other "figures" from their parent container.
+
+## Installation
+
+### From CDN
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@anydigital/breakout-css@1/dist/breakout.min.css">
+```
+
+### Precompiled CSS
+
+```bash
+npm install @anydigital/breakout-css
+```
+
+Import the compiled CSS file directly into your project:
+
+```css
+@import '@anydigital/breakout-css/dist/breakout.css';
+```
+
+### With Tailwind v4
+
+Tailwind v4 supports native CSS nesting, so you can import the source file directly:
+
+```css
+@import '@anydigital/breakout-css/src/breakout.css';
+```
+
+## Usage
+
+### Basic Usage
+
+```html
+<div class="breakout">
+  <h1>Article Title</h1>
+  <p>Lorem ipsum dolor sit amet...</p>
+  
+  <!-- This image will automatically break out -->
+  <img src="hero.jpg" alt="Hero image">
+  
+  <p>More content here...</p>
+</div>
+```
+
+### Supported Elements
+
+The breakout effect automatically applies to:
+- `img`, `figure`, `picture`
+- `video`, `audio`
+- `iframe`, `object`, `embed`, `canvas`
+- Elements with `.breakout-figure` class
+
+### Manual Breakout
+
+```html
+<div class="breakout">
+  <p>Regular content...</p>
+  
+  <div class="breakout-figure">
+    <iframe src="https://example.com/embed"></iframe>
+  </div>
+  
+  <p>More content...</p>
+</div>
+```
+
+## How It Works
+
+The breakout effect is achieved by:
+
+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
+
+This combination allows elements to extend beyond their parent container while remaining visually centered.
+
+## License
+
+MIT

package/dist/breakout.css

@@ -0,0 +1,25 @@
+/* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
+
+.breakout {
+  padding-left: 10%;
+  padding-right: 10%;
+
+  /* Direct children, potentially wrapped in <p> for Markdown support */
+
+}
+
+/* All the supported "figure" elements and custom utility class for other tags that need to be broken out */
+
+.breakout > img:not(does-not-exist):not(.does-not-exist),.breakout > figure:not(does-not-exist):not(.does-not-exist),.breakout > picture:not(does-not-exist):not(.does-not-exist),.breakout > video:not(does-not-exist):not(.does-not-exist),.breakout > audio: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 > canvas:not(does-not-exist):not(.does-not-exist),.breakout > .breakout-figure:not(does-not-exist),.breakout > p > img:not(.does-not-exist),.breakout > p > figure:not(.does-not-exist),.breakout > p > picture:not(.does-not-exist),.breakout > p > video:not(.does-not-exist),.breakout > p > audio: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 > canvas:not(.does-not-exist),.breakout > p > .breakout-figure {
+      width: auto; /* Support small images */
+      max-width: 125%;
+      transform: translateX(-50%);
+      margin-left: 50%;
+
+    }
+
+.breakout > .breakout-figure:not(does-not-exist),.breakout > p > .breakout-figure {
+      width: 125% !important;
+    }
+
+/* @TODO: Allow non-direct children. */

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@anydigital/breakout-css",
+  "version": "1.0.0-alpha",
+  "description": "Modern CSS utilities to easily break-out / hang / pop-out images, iframes, or other figures from their parent container",
+  "keywords": [
+    "css",
+    "breakout",
+    "images",
+    "figures",
+    "tailwind",
+    "tailwind-plugin",
+    "utilities"
+  ],
+  "main": "dist/breakout.css",
+  "style": "dist/breakout.css",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "exports": {
+    ".": "./dist/breakout.css",
+    "./css": "./dist/breakout.css",
+    "./src": "./src/breakout.css"
+  },
+  "scripts": {
+    "build": "node scripts/build.js",
+    "prepublishOnly": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/anydigital/breakout-css.git"
+  },
+  "author": "Anton Staroverov",
+  "license": "MIT",
+  "peerDependencies": {
+    "tailwindcss": "^3.0.0 || ^4.0.0"
+  },
+  "devDependencies": {
+    "fs-extra": "^11.2.0",
+    "postcss": "^8.4.0",
+    "postcss-nesting": "^12.0.0",
+    "postcss-preset-env": "^10.6.0"
+  }
+}

package/src/breakout.css

@@ -0,0 +1,25 @@
+/* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
+
+.breakout {
+  padding-left: 10%;
+  padding-right: 10%;
+
+  /* Direct children, potentially wrapped in <p> for Markdown support */
+  & > *,
+  & > p > * {
+    /* All the supported "figure" elements and custom utility class for other tags that need to be broken out */
+    &:is(img, figure, picture, video, audio, iframe, object, embed, canvas, .breakout-figure) {
+      width: auto; /* Support small images */
+      max-width: 125%;
+      transform: translateX(-50%);
+      margin-left: 50%;
+
+    }
+    &:is(.breakout-figure) {
+      width: 125% !important;
+    }
+  }
+
+}
+
+/* @TODO: Allow non-direct children. */