@anydigital/atomic-bricks 1.0.0-alpha → 1.0.0-alpha.2

package/README.md

@@ -36,6 +36,18 @@ html, body {
 
 This is automatically applied when you include the stylesheet.
 
+### Breakout CSS
+
+Includes [breakout-css](https://github.com/anydigital/breakout-css) utilities for breaking out images and figures beyond their container width. Use the `.breakout` class to allow elements to extend beyond their parent container:
+
+```html
+<div class="breakout">
+  <img src="image.jpg" alt="Description">
+</div>
+```
+
+The breakout utilities support images, pictures, figures, canvas, audio, video, tables, pre, iframe, and other media elements. This is automatically included when you import the stylesheet.
+
 ## License
 
 MIT

package/dist/atomic-bricks.css

@@ -4,7 +4,39 @@
  */
 
 /* Prevent horizontal overflow and scrolling, modern way */
+
 html, body {
   overflow-x: clip;
 }
 
+/* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
+
+.breakout {
+  padding-left: 10%;
+  padding-right: 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;
+      min-width: 100%;
+      max-width: 125%;
+      transform: translateX(-50%);
+      margin-left: 50%;
+    }
+
+/* Let inline blocks shrink to fit their content */
+
+.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;
+    }
+
+/* Max out the width of the element */
+
+.breakout > .breakout-item-max:not(does-not-exist),.breakout > p > .breakout-item-max {
+      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/atomic-bricks",
-  "version": "1.0.0-alpha",
+  "version": "1.0.0-alpha.2",
   "description": "Framework-agnostic CSS utility helpers for modern web development",
   "main": "dist/atomic-bricks.css",
   "style": "dist/atomic-bricks.css",
@@ -9,7 +9,7 @@
     "src"
   ],
   "scripts": {
-    "build": "npx postcss src/atomic-bricks.css --no-map -o dist/atomic-bricks.css",
+    "build": "postcss src/atomic-bricks.css --no-map -o dist/atomic-bricks.css",
     "prepublishOnly": "npm run build"
   },
   "repository": {
@@ -26,10 +26,12 @@
   "author": "Anton Staroverov",
   "license": "MIT",
   "devDependencies": {
+    "@anydigital/breakout-css": "^1.0.0-alpha.6",
     "postcss": "^8.4.33",
-    "postcss-cli": "^11.0.0"
+    "postcss-cli": "^11.0.0",
+    "postcss-import": "^16.1.1",
+    "postcss-preset-env": "^10.6.0"
   },
   "jsdelivr": "dist/atomic-bricks.css",
   "unpkg": "dist/atomic-bricks.css"
 }
-

package/src/_base.css

@@ -0,0 +1,5 @@
+/* Prevent horizontal overflow and scrolling, modern way */
+html, body {
+  overflow-x: clip;
+}
+

package/src/atomic-bricks.css

@@ -3,8 +3,5 @@
  * Framework-agnostic CSS utility helpers
  */
 
-/* Prevent horizontal overflow and scrolling, modern way */
-html, body {
-  overflow-x: clip;
-}
-
+@import "_base";
+@import "@anydigital/breakout-css";