@anydigital/breakout-css 1.0.0-alpha.7 → 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.
- package/README.md +44 -10
- package/dist/breakout.css +102 -2
- package/package.json +2 -2
- package/src/breakout.css +53 -2
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
|
|
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
|
|
19
|
+
@import "@anydigital/breakout-css";
|
|
17
20
|
```
|
|
18
21
|
|
|
19
22
|
^ This is supported by Tailwind v4!
|
|
@@ -26,10 +29,10 @@ 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
|
```
|
|
@@ -39,15 +42,41 @@ Modern CSS utilities to easily break-out / hang / pop-out images, iframes, or ot
|
|
|
39
42
|
The breakout effect automatically applies to direct children or elements wrapped in `<p>` tags:
|
|
40
43
|
|
|
41
44
|
**Inline blocks:**
|
|
45
|
+
|
|
42
46
|
- `img`, `picture`, `figure`, `canvas`, `audio`
|
|
43
47
|
|
|
44
48
|
**Larger blocks:**
|
|
49
|
+
|
|
45
50
|
- `table`, `pre`
|
|
46
51
|
- `iframe`, `object`, `embed`, `video`
|
|
47
52
|
|
|
48
53
|
**Custom utility classes:**
|
|
54
|
+
|
|
49
55
|
- Elements with `.breakout-item` or `.breakout-item-max` class
|
|
50
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
|
+
|
|
51
80
|
### Manual Breakout
|
|
52
81
|
|
|
53
82
|
For elements that don't automatically break out, use the `.breakout-item` class:
|
|
@@ -55,11 +84,11 @@ For elements that don't automatically break out, use the `.breakout-item` class:
|
|
|
55
84
|
```html
|
|
56
85
|
<div class="breakout">
|
|
57
86
|
<p>Regular content...</p>
|
|
58
|
-
|
|
87
|
+
|
|
59
88
|
<div class="breakout-item">
|
|
60
89
|
<iframe src="https://example.com/embed"></iframe>
|
|
61
90
|
</div>
|
|
62
|
-
|
|
91
|
+
|
|
63
92
|
<p>More content...</p>
|
|
64
93
|
</div>
|
|
65
94
|
```
|
|
@@ -71,10 +100,10 @@ By default, breakout elements use `width: fit-content` with `max-width: 125%`, a
|
|
|
71
100
|
```html
|
|
72
101
|
<div class="breakout">
|
|
73
102
|
<p>Regular content...</p>
|
|
74
|
-
|
|
103
|
+
|
|
75
104
|
<!-- This will always be 125% width, never smaller -->
|
|
76
|
-
<img src="wide-image.jpg" class="breakout-item-max" alt="Wide image"
|
|
77
|
-
|
|
105
|
+
<img src="wide-image.jpg" class="breakout-item-max" alt="Wide image" />
|
|
106
|
+
|
|
78
107
|
<p>More content...</p>
|
|
79
108
|
</div>
|
|
80
109
|
```
|
|
@@ -93,6 +122,11 @@ The breakout effect on elements is achieved by:
|
|
|
93
122
|
|
|
94
123
|
This combination allows elements to extend beyond their parent container (up to 125% width) while remaining visually centered.
|
|
95
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.
|
|
129
|
+
|
|
96
130
|
### Markdown Support
|
|
97
131
|
|
|
98
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).
|
package/dist/breakout.css
CHANGED
|
@@ -24,7 +24,107 @@
|
|
|
24
24
|
/* Max out the width of the element */
|
|
25
25
|
|
|
26
26
|
.breakout > .breakout-item-max:not(does-not-exist),.breakout > p > .breakout-item-max {
|
|
27
|
-
width: 125% !important; /*
|
|
27
|
+
width: 125% !important; /* !important is for cases like figure.breakout-item-max @TODO */
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
|
|
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
|
+
);
|
|
75
|
+
}
|
|
76
|
+
|
|
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,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@anydigital/breakout-css",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
4
|
-
"description": "Modern CSS utilities to easily break-out / hang / pop-out images, iframes,
|
|
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",
|
package/src/breakout.css
CHANGED
|
@@ -31,9 +31,60 @@
|
|
|
31
31
|
|
|
32
32
|
/* Max out the width of the element */
|
|
33
33
|
&.breakout-item-max {
|
|
34
|
-
width: 125% !important; /*
|
|
34
|
+
width: 125% !important; /* !important is for cases like figure.breakout-item-max @TODO */
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
-
|
|
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
|
+
}
|