breakouts 0.0.6 → 0.0.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 +8 -4
- package/dist/breakouts.css +46 -9
- package/dist/breakouts.min.css +1 -1
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,9 +1,5 @@
|
|
|
1
1
|
# ✨ Breakouts
|
|
2
2
|
|
|
3
|
-
[](https://github.com/Cantilux/breakouts/actions/workflows/pages/pages-build-deployment)
|
|
4
|
-
|
|
5
|
-
[](https://github.com/Cantilux/breakouts/actions/workflows/publish.yml)
|
|
6
|
-
|
|
7
3
|
**Breakouts** is a minimal and extensible SCSS/CSS utility framework for modern layout systems.
|
|
8
4
|
|
|
9
5
|
It provides utilities for containers, full-bleed sections, breakout content, and grid layouts with named lines — built for flexibility and responsiveness, whether you're building a landing page, a blog, or a full-scale web app.
|
|
@@ -18,6 +14,14 @@ It provides utilities for containers, full-bleed sections, breakout content, and
|
|
|
18
14
|
npm install breakouts
|
|
19
15
|
```
|
|
20
16
|
|
|
17
|
+
In your SCSS entry point:
|
|
18
|
+
|
|
19
|
+
```scss
|
|
20
|
+
@use 'breakouts' as *;
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
Note: breakouts automatically forwards all core modules from src/index.scss. You can also import individual modules as needed for tree-shaking.
|
|
24
|
+
|
|
21
25
|
## 📦 Framework Structure
|
|
22
26
|
|
|
23
27
|
Breakouts includes a small set of layout-focused utility classes to help you build responsive and consistent page structures.
|
package/dist/breakouts.css
CHANGED
|
@@ -1,33 +1,70 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
--color-background: #
|
|
3
|
-
--color-
|
|
2
|
+
--color-background: #ffffff;
|
|
3
|
+
--color-surface: #f0f0f0;
|
|
4
|
+
--color-text: #111111;
|
|
5
|
+
--color-muted: #666666;
|
|
4
6
|
--color-primary: #0055ff;
|
|
5
7
|
--color-secondary: #0033aa;
|
|
6
8
|
}
|
|
7
9
|
|
|
8
|
-
.dark
|
|
9
|
-
|
|
10
|
-
--color-
|
|
10
|
+
.dark,
|
|
11
|
+
.dark :root {
|
|
12
|
+
--color-background: #111111;
|
|
13
|
+
--color-surface: #1a1a1a;
|
|
14
|
+
--color-text: #eeeeee;
|
|
15
|
+
--color-muted: #aaaaaa;
|
|
11
16
|
--color-primary: #88b0ff;
|
|
12
17
|
--color-secondary: #cdd9ff;
|
|
13
18
|
}
|
|
14
19
|
|
|
15
20
|
.light,
|
|
16
21
|
.light :root {
|
|
17
|
-
--color-background: #
|
|
18
|
-
--color-
|
|
22
|
+
--color-background: #ffffff;
|
|
23
|
+
--color-surface: #f0f0f0;
|
|
24
|
+
--color-text: #111111;
|
|
25
|
+
--color-muted: #666666;
|
|
19
26
|
--color-primary: #0055ff;
|
|
20
27
|
--color-secondary: #0033aa;
|
|
21
28
|
}
|
|
22
29
|
|
|
23
30
|
@media (prefers-color-scheme: dark) {
|
|
24
31
|
:root:not(.light):not(.dark) {
|
|
25
|
-
--color-background: #
|
|
26
|
-
--color-
|
|
32
|
+
--color-background: #111111;
|
|
33
|
+
--color-surface: #1a1a1a;
|
|
34
|
+
--color-text: #eeeeee;
|
|
35
|
+
--color-muted: #aaaaaa;
|
|
27
36
|
--color-primary: #88b0ff;
|
|
28
37
|
--color-secondary: #cdd9ff;
|
|
29
38
|
}
|
|
30
39
|
}
|
|
40
|
+
.bg-background {
|
|
41
|
+
background-color: var(--color-background);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.bg-surface {
|
|
45
|
+
background-color: var(--color-surface);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.bg-primary {
|
|
49
|
+
background-color: var(--color-primary);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.bg-secondary {
|
|
53
|
+
background-color: var(--color-secondary);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.text-text {
|
|
57
|
+
color: var(--color-text);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.text-background {
|
|
61
|
+
color: var(--color-background);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.text-muted {
|
|
65
|
+
color: var(--color-muted);
|
|
66
|
+
}
|
|
67
|
+
|
|
31
68
|
/* Basic reset */
|
|
32
69
|
*,
|
|
33
70
|
*::before,
|
package/dist/breakouts.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--color-background: #
|
|
1
|
+
:root{--color-background: #ffffff;--color-surface: #f0f0f0;--color-text: #111111;--color-muted: #666666;--color-primary: #0055ff;--color-secondary: #0033aa}.dark,.dark :root{--color-background: #111111;--color-surface: #1a1a1a;--color-text: #eeeeee;--color-muted: #aaaaaa;--color-primary: #88b0ff;--color-secondary: #cdd9ff}.light,.light :root{--color-background: #ffffff;--color-surface: #f0f0f0;--color-text: #111111;--color-muted: #666666;--color-primary: #0055ff;--color-secondary: #0033aa}@media(prefers-color-scheme: dark){:root:not(.light):not(.dark){--color-background: #111111;--color-surface: #1a1a1a;--color-text: #eeeeee;--color-muted: #aaaaaa;--color-primary: #88b0ff;--color-secondary: #cdd9ff}}.bg-background{background-color:var(--color-background)}.bg-surface{background-color:var(--color-surface)}.bg-primary{background-color:var(--color-primary)}.bg-secondary{background-color:var(--color-secondary)}.text-text{color:var(--color-text)}.text-background{color:var(--color-background)}.text-muted{color:var(--color-muted)}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html,body{margin:0;padding:0;width:100%;overflow-x:hidden}body{padding:2rem;font-family:system-ui,sans-serif;line-height:1.6}body{font-family:system-ui,sans-serif;font-size:1rem;line-height:1.6;color:var(--color-text);background-color:var(--color-background);margin:0}h1{font-size:2.25rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h2{font-size:1.75rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h3{font-size:1.5rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h4{font-size:1.25rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h5{font-size:1.125rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}h6{font-size:1rem;line-height:1.2;margin:2rem 0 1rem;font-weight:600;color:var(--color-text)}p{margin:1rem 0}a{color:var(--color-primary);text-decoration:underline}a:hover{color:var(--color-secondary)}.container{margin-inline:auto;max-width:72rem;padding-inline:1rem}.full-bleed{width:100vw;margin-left:50%;transform:translateX(-50%)}.breakout{width:100vw;margin-left:calc(-1*(100vw - 100%)/2)}:root{--gap: clamp(1rem, 6vw, 3rem);--full: minmax(var(--gap), 1fr);--feature: minmax(0, 5rem);--popout: minmax(0, 2rem);--content: min(50ch, 100% - var(--gap) * 2)}.breakouts-grid{display:grid;grid-template-columns:[full-start] var(--full) [feature-start] var(--feature) [popout-start] var(--popout) [content-start] var(--content) [content-end] var(--popout) [popout-end] var(--feature) [feature-end] var(--full) [full-end];gap:var(--gap)}.content{grid-column:content}.popout{grid-column:popout}.feature{grid-column:feature}.full{grid-column:full}.grid{display:grid;grid-template-columns:1fr minmax(0, var(--container-max-width, 64rem)) 1fr;gap:var(--gap)}.grid>*{grid-column:2}.grid--full>*{grid-column:1/-1}/*# sourceMappingURL=breakouts.min.css.map */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "breakouts",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.8",
|
|
4
4
|
"description": "A personal SCSS/CSS layout utility framework.",
|
|
5
5
|
"main": "dist/breakouts.css",
|
|
6
6
|
"files": [
|
|
@@ -9,9 +9,9 @@
|
|
|
9
9
|
],
|
|
10
10
|
"scripts": {
|
|
11
11
|
"build": "sass src/_index.scss dist/breakouts.css --style=expanded && sass src/_index.scss dist/breakouts.min.css --style=compressed && cp dist/breakouts.css docs/breakouts.css",
|
|
12
|
-
"release:patch": "npm run build && npm version patch && git push && git push --follow-tags",
|
|
13
|
-
"release:minor": "npm run build && npm version minor && git push && git push --follow-tags",
|
|
14
|
-
"release:major": "npm run build && npm version major && git push && git push --follow-tags"
|
|
12
|
+
"release:patch": "npm run build && npm version patch && git push && git push --follow-tags && npm publish --access public",
|
|
13
|
+
"release:minor": "npm run build && npm version minor && git push && git push --follow-tags && npm publish --access public",
|
|
14
|
+
"release:major": "npm run build && npm version major && git push && git push --follow-tags && npm publish --access public"
|
|
15
15
|
},
|
|
16
16
|
"author": "Tuo Nome",
|
|
17
17
|
"license": "MIT",
|