@anydigital/breakout-css 1.0.0-alpha.6 → 1.0.0-alpha.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +67 -20
  2. package/dist/breakout.css +107 -8
  3. package/package.json +2 -6
  4. package/src/breakout.css +58 -9
package/README.md CHANGED
@@ -7,13 +7,16 @@ Modern CSS utilities to easily break-out / hang / pop-out images, iframes, or ot
7
7
  ### From CDN
8
8
 
9
9
  ```html
10
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@anydigital/breakout-css@1/dist/breakout.min.css">
10
+ <link
11
+ rel="stylesheet"
12
+ href="https://cdn.jsdelivr.net/npm/@anydigital/breakout-css@1/dist/breakout.css"
13
+ />
11
14
  ```
12
15
 
13
16
  ### From Source
14
17
 
15
18
  ```css
16
- @import '@anydigital/breakout-css';
19
+ @import "@anydigital/breakout-css";
17
20
  ```
18
21
 
19
22
  ^ This is supported by Tailwind v4!
@@ -26,23 +29,54 @@ Modern CSS utilities to easily break-out / hang / pop-out images, iframes, or ot
26
29
  <div class="breakout">
27
30
  <h1>Article Title</h1>
28
31
  <p>Lorem ipsum dolor sit amet...</p>
29
-
32
+
30
33
  <!-- This image will automatically break out -->
31
- <img src="hero.jpg" alt="Hero image">
32
-
34
+ <img src="hero.jpg" alt="Hero image" />
35
+
33
36
  <p>More content here...</p>
34
37
  </div>
35
38
  ```
36
39
 
37
40
  ### Supported Elements
38
41
 
39
- The breakout effect automatically applies to:
40
- - `img`, `figure`, `picture`
41
- - `video`, `audio`
42
- - `iframe`, `object`, `embed`, `canvas`
42
+ The breakout effect automatically applies to direct children or elements wrapped in `<p>` tags:
43
+
44
+ **Inline blocks:**
45
+
46
+ - `img`, `picture`, `figure`, `canvas`, `audio`
47
+
48
+ **Larger blocks:**
49
+
43
50
  - `table`, `pre`
51
+ - `iframe`, `object`, `embed`, `video`
52
+
53
+ **Custom utility classes:**
54
+
44
55
  - Elements with `.breakout-item` or `.breakout-item-max` class
45
56
 
57
+ ### Headings & Dividers
58
+
59
+ For decorative headings and full-width dividers, use the `.breakout-headings` class. This adds a subtle accent line to the left of headings and makes horizontal rules span the full viewport width:
60
+
61
+ ```html
62
+ <div class="breakout-headings">
63
+ <h2>Section Title</h2>
64
+ <p>Some content...</p>
65
+
66
+ <hr />
67
+
68
+ <h3>Subheading</h3>
69
+ <p>More content...</p>
70
+ </div>
71
+ ```
72
+
73
+ The extension applies to the following elements (when they don't have other classes):
74
+
75
+ - `h2`, `h3`, `h4` (adds decorative accent line)
76
+ - `hr` (breaks out to full viewport width)
77
+
78
+ _Note: The decorative accent on headings is automatically hidden if the heading immediately follows an `<hr>` to avoid visual overlap._
79
+
46
80
  ### Manual Breakout
47
81
 
48
82
  For elements that don't automatically break out, use the `.breakout-item` class:
@@ -50,39 +84,52 @@ For elements that don't automatically break out, use the `.breakout-item` class:
50
84
  ```html
51
85
  <div class="breakout">
52
86
  <p>Regular content...</p>
53
-
87
+
54
88
  <div class="breakout-item">
55
89
  <iframe src="https://example.com/embed"></iframe>
56
90
  </div>
57
-
91
+
58
92
  <p>More content...</p>
59
93
  </div>
60
94
  ```
61
95
 
62
96
  ### Force Maximum Width
63
97
 
64
- 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`:
98
+ 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`:
65
99
 
66
100
  ```html
67
101
  <div class="breakout">
68
102
  <p>Regular content...</p>
69
-
103
+
70
104
  <!-- This will always be 125% width, never smaller -->
71
- <img src="wide-image.jpg" class="breakout-item-max" alt="Wide image">
72
-
105
+ <img src="wide-image.jpg" class="breakout-item-max" alt="Wide image" />
106
+
73
107
  <p>More content...</p>
74
108
  </div>
75
109
  ```
76
110
 
111
+ Note: `.breakout-item-max` uses `width: 125% !important` to override default sizing.
112
+
77
113
  ## How It Works
78
114
 
79
- The breakout effect is achieved by:
115
+ The `.breakout` container applies `padding-inline: 10%` to create space for breakout elements.
116
+
117
+ The breakout effect on elements is achieved by:
118
+
119
+ 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)
120
+ 2. Using `margin-left: 50%` to position from the center of the container
121
+ 3. Using `transform: translateX(-50%)` to shift it left by half its width
122
+
123
+ This combination allows elements to extend beyond their parent container (up to 125% width) while remaining visually centered.
124
+
125
+ The `.breakout-headings` utility works by:
126
+
127
+ 1. Adding a `::before` pseudo-element to headings (`h2-h4`) positioned to the left.
128
+ 2. Using a `100vw` width and negative translation on `hr::before` to create a full-width divider.
80
129
 
81
- 1. Setting the element's width to 125% of its container
82
- 2. Using `transform: translateX(-50%)` to shift it left by half its width
83
- 3. Using `margin-left: 50%` to position it from the center of the container
130
+ ### Markdown Support
84
131
 
85
- This combination allows elements to extend beyond their parent container while remaining visually centered.
132
+ 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).
86
133
 
87
134
  ## License
88
135
 
package/dist/breakout.css CHANGED
@@ -1,22 +1,21 @@
1
1
  /* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
2
2
 
3
3
  .breakout {
4
- padding-left: 10%;
5
- padding-right: 10%;
4
+ padding-inline: 10%;
6
5
 
7
6
  /* Direct children, or wrapped in <p> for Markdown support */
8
7
  }
9
8
 
10
9
  .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 {
11
- display: inline-block;
12
- width: auto;
10
+ width: -moz-fit-content;
11
+ width: fit-content;
13
12
  min-width: 100%;
14
13
  max-width: 125%;
15
- transform: translateX(-50%);
16
14
  margin-left: 50%;
15
+ transform: translateX(-50%);
17
16
  }
18
17
 
19
- /* Let inline blocks shrink to fit their content */
18
+ /* Respect inline blocks' min-width */
20
19
 
21
20
  .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 {
22
21
  min-width: auto;
@@ -25,7 +24,107 @@
25
24
  /* Max out the width of the element */
26
25
 
27
26
  .breakout > .breakout-item-max:not(does-not-exist),.breakout > p > .breakout-item-max {
28
- width: 125% !important; /* @TODO: !important for cases like figure.breakout-item-max */
27
+ width: 125% !important; /* !important is for cases like figure.breakout-item-max @TODO */
28
+ }
29
+
30
+ .breakout-headings h2:not([class]),.breakout-headings h3:not([class]),.breakout-headings h4:not([class]),.breakout-headings hr {
31
+ position: relative;
32
+ }
33
+
34
+ .breakout-headings h2:not([class])::before {
35
+ content: "";
36
+ display: block;
37
+ position: absolute;
38
+ background-color: rgba(0, 0, 0, 5%);
39
+ }
40
+
41
+ .breakout-headings h3:not([class])::before {
42
+ content: "";
43
+ display: block;
44
+ position: absolute;
45
+ background-color: rgba(0, 0, 0, 5%);
46
+ }
47
+
48
+ .breakout-headings h4:not([class])::before {
49
+ content: "";
50
+ display: block;
51
+ position: absolute;
52
+ background-color: rgba(0, 0, 0, 5%);
53
+ }
54
+
55
+ .breakout-headings hr:not(.does-not-exist)::before {
56
+ content: "";
57
+ display: block;
58
+ position: absolute;
59
+ background-color: rgba(0, 0, 0, 5%);
60
+ }
61
+
62
+ .breakout-headings h2:not([class])::before {
63
+ width: 10em;
64
+ right: 100%;
65
+ margin-right: 1rem;
66
+ height: 0.3em;
67
+ top: 50%;
68
+ transform: translateY(-50%);
69
+ background: linear-gradient(
70
+ to left,
71
+ rgba(0, 0, 0, 10%),
72
+ rgba(0, 0, 0, 5%) 10%,
73
+ transparent
74
+ );
29
75
  }
30
76
 
31
- /* @TODO: Allow non-direct children. */
77
+ .breakout-headings h3:not([class])::before {
78
+ width: 10em;
79
+ right: 100%;
80
+ margin-right: 1rem;
81
+ height: 0.3em;
82
+ top: 50%;
83
+ transform: translateY(-50%);
84
+ background: linear-gradient(
85
+ to left,
86
+ rgba(0, 0, 0, 10%),
87
+ rgba(0, 0, 0, 5%) 10%,
88
+ transparent
89
+ );
90
+ }
91
+
92
+ .breakout-headings h4:not([class])::before {
93
+ width: 10em;
94
+ right: 100%;
95
+ margin-right: 1rem;
96
+ height: 0.3em;
97
+ top: 50%;
98
+ transform: translateY(-50%);
99
+ background: linear-gradient(
100
+ to left,
101
+ rgba(0, 0, 0, 10%),
102
+ rgba(0, 0, 0, 5%) 10%,
103
+ transparent
104
+ );
105
+ }
106
+
107
+ .breakout-headings hr {
108
+ height: 0.75rem;
109
+ border: none;
110
+ overflow: visible;
111
+ }
112
+
113
+ .breakout-headings hr::before {
114
+ width: 100vw;
115
+ left: 50%;
116
+ height: 100%;
117
+ transform: translateX(-50%);
118
+ }
119
+
120
+ .breakout-headings hr + h2::before {
121
+ display: none !important;
122
+ }
123
+
124
+ .breakout-headings hr + h3::before {
125
+ display: none !important;
126
+ }
127
+
128
+ .breakout-headings hr + h4::before {
129
+ display: none !important;
130
+ }
package/package.json CHANGED
@@ -1,14 +1,13 @@
1
1
  {
2
2
  "name": "@anydigital/breakout-css",
3
- "version": "1.0.0-alpha.6",
4
- "description": "Modern CSS utilities to easily break-out / hang / pop-out images, iframes, or other figures from their parent container",
3
+ "version": "1.0.0-alpha.8",
4
+ "description": "Modern CSS utilities to easily break-out / hang / pop-out images, iframes, and other figures from their parent container",
5
5
  "keywords": [
6
6
  "css",
7
7
  "breakout",
8
8
  "images",
9
9
  "figures",
10
10
  "tailwind",
11
- "tailwind-plugin",
12
11
  "utilities"
13
12
  ],
14
13
  "files": [
@@ -31,9 +30,6 @@
31
30
  },
32
31
  "author": "Anton Staroverov",
33
32
  "license": "MIT",
34
- "peerDependencies": {
35
- "tailwindcss": "^3.0.0 || ^4.0.0"
36
- },
37
33
  "devDependencies": {
38
34
  "postcss": "^8.4.0",
39
35
  "postcss-cli": "^11.0.0",
package/src/breakout.css CHANGED
@@ -1,8 +1,7 @@
1
1
  /* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
2
2
 
3
3
  .breakout {
4
- padding-left: 10%;
5
- padding-right: 10%;
4
+ padding-inline: 10%;
6
5
 
7
6
  /* Direct children, or wrapped in <p> for Markdown support */
8
7
  & > *,
@@ -14,28 +13,78 @@
14
13
  table,
15
14
  pre,
16
15
  iframe, object, embed, video,
17
- /* Custom utility class for other tags that need to be broken out */
16
+ /* Custom utility classes for other tags that need to be broken out */
18
17
  .breakout-item,
19
18
  .breakout-item-max
20
19
  ) {
21
- display: inline-block;
22
- width: auto;
20
+ width: fit-content;
23
21
  min-width: 100%;
24
22
  max-width: 125%;
25
- transform: translateX(-50%);
26
23
  margin-left: 50%;
24
+ transform: translateX(-50%);
27
25
  }
28
26
 
29
- /* Let inline blocks shrink to fit their content */
27
+ /* Respect inline blocks' min-width */
30
28
  &:is(img, picture, figure, canvas, audio) {
31
29
  min-width: auto;
32
30
  }
33
31
 
34
32
  /* Max out the width of the element */
35
33
  &.breakout-item-max {
36
- width: 125% !important; /* @TODO: !important for cases like figure.breakout-item-max */
34
+ width: 125% !important; /* !important is for cases like figure.breakout-item-max @TODO */
37
35
  }
38
36
  }
39
37
  }
40
38
 
41
- /* @TODO: Allow non-direct children. */
39
+ .breakout-headings {
40
+ h2:not([class]),
41
+ h3:not([class]),
42
+ h4:not([class]),
43
+ hr {
44
+ position: relative;
45
+
46
+ &::before {
47
+ content: "";
48
+ display: block;
49
+ position: absolute;
50
+ background-color: rgba(0, 0, 0, 5%);
51
+ }
52
+ }
53
+ h2:not([class]),
54
+ h3:not([class]),
55
+ h4:not([class]) {
56
+ &::before {
57
+ width: 10em;
58
+ right: 100%;
59
+ margin-right: 1rem;
60
+ height: 0.3em;
61
+ top: 50%;
62
+ transform: translateY(-50%);
63
+ background: linear-gradient(
64
+ to left,
65
+ rgba(0, 0, 0, 10%),
66
+ rgba(0, 0, 0, 5%) 10%,
67
+ transparent
68
+ );
69
+ }
70
+ }
71
+ hr {
72
+ height: 0.75rem;
73
+ border: none;
74
+ overflow: visible;
75
+
76
+ &::before {
77
+ width: 100vw;
78
+ left: 50%;
79
+ height: 100%;
80
+ transform: translateX(-50%);
81
+ }
82
+ }
83
+ hr + h2,
84
+ hr + h3,
85
+ hr + h4 {
86
+ &::before {
87
+ display: none !important;
88
+ }
89
+ }
90
+ }