breakouts 0.0.3 → 0.0.6
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 +168 -0
- package/dist/breakouts.css +118 -0
- package/dist/breakouts.min.css +1 -1
- package/package.json +5 -2
package/README.md
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
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
|
+
|
|
3
7
|
**Breakouts** is a minimal and extensible SCSS/CSS utility framework for modern layout systems.
|
|
4
8
|
|
|
5
9
|
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.
|
|
@@ -31,6 +35,170 @@ Breakouts includes a small set of layout-focused utility classes to help you bui
|
|
|
31
35
|
| `.feature` | Wider area used for highlighting visual components |
|
|
32
36
|
| `.full` | Full-width layout spanning the entire grid |
|
|
33
37
|
|
|
38
|
+
## 🧩 Extending the Framework
|
|
39
|
+
|
|
40
|
+
Breakouts is fully configurable — you can override its core variables before importing it.
|
|
41
|
+
|
|
42
|
+
### 🔁 Example: Override the color palette
|
|
43
|
+
|
|
44
|
+
```scss
|
|
45
|
+
$colors: (
|
|
46
|
+
primary: #ff6600,
|
|
47
|
+
secondary: #222222,
|
|
48
|
+
background: #fefefe,
|
|
49
|
+
text: #111
|
|
50
|
+
);
|
|
51
|
+
|
|
52
|
+
@use "breakouts";
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
This replaces the default color palette defined in the framework. You can override any variable marked with !default.
|
|
56
|
+
|
|
57
|
+
## 🔌 Use Only What You Need
|
|
58
|
+
|
|
59
|
+
Breakouts is modular and each part of the framework can be imported individually.
|
|
60
|
+
|
|
61
|
+
### Import specific modules
|
|
62
|
+
|
|
63
|
+
If you only want color utilities, you can import them directly:
|
|
64
|
+
|
|
65
|
+
```scss
|
|
66
|
+
@use "breakouts/theme/colors" as *;
|
|
67
|
+
|
|
68
|
+
@include text-color-utilities();
|
|
69
|
+
@include bg-color-utilities();
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
If you only need grid layout helpers:
|
|
73
|
+
|
|
74
|
+
```scss
|
|
75
|
+
@use "breakouts/layout/grid";
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
This gives you full control over what gets compiled into your CSS, keeping it lean and optimized for your project.
|
|
79
|
+
|
|
80
|
+
## 🧱 Define Your Own Utilities on Top
|
|
81
|
+
|
|
82
|
+
Breakouts exposes a consistent set of CSS variables (e.g. `--color-primary`, `--color-background`, etc.) that you can reuse to build your own custom components or utility classes.
|
|
83
|
+
|
|
84
|
+
### Example: custom button style
|
|
85
|
+
|
|
86
|
+
```scss
|
|
87
|
+
.button {
|
|
88
|
+
background-color: var(--color-primary);
|
|
89
|
+
color: var(--color-background);
|
|
90
|
+
padding: 0.5rem 1rem;
|
|
91
|
+
border: none;
|
|
92
|
+
border-radius: 0.25rem;
|
|
93
|
+
font-weight: 600;
|
|
94
|
+
cursor: pointer;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.button:hover {
|
|
98
|
+
background-color: var(--color-secondary);
|
|
99
|
+
}
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
By using the same design tokens, your custom elements stay visually aligned with the rest of the system.
|
|
103
|
+
|
|
104
|
+
This approach encourages consistency while giving you full creative freedom.
|
|
105
|
+
|
|
106
|
+
## ✍️ Typography
|
|
107
|
+
|
|
108
|
+
Breakouts includes base typographic styles to ensure clean, readable text with consistent rhythm and spacing.
|
|
109
|
+
|
|
110
|
+
- Responsive font sizing and heading scale
|
|
111
|
+
- Theme-based color integration
|
|
112
|
+
- Styled links and paragraphs
|
|
113
|
+
- Easily extendable via SCSS variables
|
|
114
|
+
|
|
115
|
+
```scss
|
|
116
|
+
body {
|
|
117
|
+
font-family: system-ui, sans-serif;
|
|
118
|
+
font-size: 1rem;
|
|
119
|
+
line-height: 1.6;
|
|
120
|
+
color: var(--color-text);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
h1, h2, h3, h4, h5, h6 {
|
|
124
|
+
line-height: 1.2;
|
|
125
|
+
font-weight: 600;
|
|
126
|
+
margin: 2rem 0 1rem;
|
|
127
|
+
color: var(--color-text);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
p {
|
|
131
|
+
margin: 1rem 0;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
a {
|
|
135
|
+
color: var(--color-primary);
|
|
136
|
+
text-decoration: underline;
|
|
137
|
+
|
|
138
|
+
&:hover {
|
|
139
|
+
color: var(--color-secondary);
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
You can override the heading scale, base sizes, and fonts by defining your own variables before importing Breakouts.
|
|
145
|
+
|
|
146
|
+
## 🌙 Dark Mode Support
|
|
147
|
+
|
|
148
|
+
Breakouts includes built-in support for **dark mode**, using CSS variables and system preferences.
|
|
149
|
+
|
|
150
|
+
### 🌓 Automatic dark mode
|
|
151
|
+
|
|
152
|
+
By default, the framework responds to the user's system setting using:
|
|
153
|
+
|
|
154
|
+
```scss
|
|
155
|
+
@media (prefers-color-scheme: dark) {
|
|
156
|
+
:root {
|
|
157
|
+
// Dark color variables
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
This means all your color utility classes like .bg-primary, .text-muted, etc., automatically switch based on the user's device.
|
|
163
|
+
|
|
164
|
+
### 🌘 Manual Override (Optional)
|
|
165
|
+
|
|
166
|
+
If you want to control dark mode manually—rather than relying on the user's system preferences—you can use the `.dark` class.
|
|
167
|
+
|
|
168
|
+
Apply it to the root HTML element:
|
|
169
|
+
|
|
170
|
+
```html
|
|
171
|
+
<html class="dark">
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
When this class is present, Breakouts will use the dark color palette regardless of system settings.
|
|
175
|
+
|
|
176
|
+
This is ideal for implementing a light/dark theme toggle in your application via JavaScript or local storage.
|
|
177
|
+
|
|
178
|
+
All color-based utility classes like .text-* and .bg-* will respond automatically, as they rely on CSS variables.
|
|
179
|
+
|
|
180
|
+
### ✅ Compatible with All Color Utilities
|
|
181
|
+
|
|
182
|
+
All utility classes that rely on colors—such as:
|
|
183
|
+
|
|
184
|
+
- `.text-primary`
|
|
185
|
+
- `.bg-surface`
|
|
186
|
+
- `.text-muted`
|
|
187
|
+
- `.bg-secondary`
|
|
188
|
+
|
|
189
|
+
...are automatically compatible with dark mode.
|
|
190
|
+
|
|
191
|
+
This is possible because Breakouts uses CSS custom properties (variables) for all colors. When the color mode changes (automatically or via `.dark` class), the variables are updated, and the utilities respond instantly without requiring any changes to your HTML.
|
|
192
|
+
|
|
193
|
+
You can keep writing markup the same way in both themes:
|
|
194
|
+
|
|
195
|
+
```html
|
|
196
|
+
<div class="bg-background text-text">
|
|
197
|
+
<p class="text-muted">This works in both light and dark modes.</p>
|
|
198
|
+
</div>
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
|
|
34
202
|
## 🛠️ Development
|
|
35
203
|
|
|
36
204
|
To build or modify Breakouts locally, follow these steps:
|
package/dist/breakouts.css
CHANGED
|
@@ -1,3 +1,33 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--color-background: #fff;
|
|
3
|
+
--color-text: #111;
|
|
4
|
+
--color-primary: #0055ff;
|
|
5
|
+
--color-secondary: #0033aa;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.dark {
|
|
9
|
+
--color-background: #111;
|
|
10
|
+
--color-text: #eee;
|
|
11
|
+
--color-primary: #88b0ff;
|
|
12
|
+
--color-secondary: #cdd9ff;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.light,
|
|
16
|
+
.light :root {
|
|
17
|
+
--color-background: #fff;
|
|
18
|
+
--color-text: #111;
|
|
19
|
+
--color-primary: #0055ff;
|
|
20
|
+
--color-secondary: #0033aa;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@media (prefers-color-scheme: dark) {
|
|
24
|
+
:root:not(.light):not(.dark) {
|
|
25
|
+
--color-background: #111;
|
|
26
|
+
--color-text: #eee;
|
|
27
|
+
--color-primary: #88b0ff;
|
|
28
|
+
--color-secondary: #cdd9ff;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
1
31
|
/* Basic reset */
|
|
2
32
|
*,
|
|
3
33
|
*::before,
|
|
@@ -15,6 +45,81 @@ body {
|
|
|
15
45
|
overflow-x: hidden;
|
|
16
46
|
}
|
|
17
47
|
|
|
48
|
+
body {
|
|
49
|
+
padding: 2rem;
|
|
50
|
+
font-family: system-ui, sans-serif;
|
|
51
|
+
line-height: 1.6;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
body {
|
|
55
|
+
font-family: system-ui, sans-serif;
|
|
56
|
+
font-size: 1rem;
|
|
57
|
+
line-height: 1.6;
|
|
58
|
+
color: var(--color-text);
|
|
59
|
+
background-color: var(--color-background);
|
|
60
|
+
margin: 0;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
h1 {
|
|
64
|
+
font-size: 2.25rem;
|
|
65
|
+
line-height: 1.2;
|
|
66
|
+
margin: 2rem 0 1rem;
|
|
67
|
+
font-weight: 600;
|
|
68
|
+
color: var(--color-text);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
h2 {
|
|
72
|
+
font-size: 1.75rem;
|
|
73
|
+
line-height: 1.2;
|
|
74
|
+
margin: 2rem 0 1rem;
|
|
75
|
+
font-weight: 600;
|
|
76
|
+
color: var(--color-text);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
h3 {
|
|
80
|
+
font-size: 1.5rem;
|
|
81
|
+
line-height: 1.2;
|
|
82
|
+
margin: 2rem 0 1rem;
|
|
83
|
+
font-weight: 600;
|
|
84
|
+
color: var(--color-text);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
h4 {
|
|
88
|
+
font-size: 1.25rem;
|
|
89
|
+
line-height: 1.2;
|
|
90
|
+
margin: 2rem 0 1rem;
|
|
91
|
+
font-weight: 600;
|
|
92
|
+
color: var(--color-text);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
h5 {
|
|
96
|
+
font-size: 1.125rem;
|
|
97
|
+
line-height: 1.2;
|
|
98
|
+
margin: 2rem 0 1rem;
|
|
99
|
+
font-weight: 600;
|
|
100
|
+
color: var(--color-text);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
h6 {
|
|
104
|
+
font-size: 1rem;
|
|
105
|
+
line-height: 1.2;
|
|
106
|
+
margin: 2rem 0 1rem;
|
|
107
|
+
font-weight: 600;
|
|
108
|
+
color: var(--color-text);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
p {
|
|
112
|
+
margin: 1rem 0;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
a {
|
|
116
|
+
color: var(--color-primary);
|
|
117
|
+
text-decoration: underline;
|
|
118
|
+
}
|
|
119
|
+
a:hover {
|
|
120
|
+
color: var(--color-secondary);
|
|
121
|
+
}
|
|
122
|
+
|
|
18
123
|
.container {
|
|
19
124
|
margin-inline: auto;
|
|
20
125
|
max-width: 72rem;
|
|
@@ -62,4 +167,17 @@ body {
|
|
|
62
167
|
grid-column: full;
|
|
63
168
|
}
|
|
64
169
|
|
|
170
|
+
.grid {
|
|
171
|
+
display: grid;
|
|
172
|
+
grid-template-columns: 1fr minmax(0, var(--container-max-width, 64rem)) 1fr;
|
|
173
|
+
gap: var(--gap);
|
|
174
|
+
}
|
|
175
|
+
.grid > * {
|
|
176
|
+
grid-column: 2;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.grid--full > * {
|
|
180
|
+
grid-column: 1/-1;
|
|
181
|
+
}
|
|
182
|
+
|
|
65
183
|
/*# sourceMappingURL=breakouts.css.map */
|
package/dist/breakouts.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html,body{margin:0;padding:0;width:100%;overflow-x:hidden}.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}/*# sourceMappingURL=breakouts.min.css.map */
|
|
1
|
+
:root{--color-background: #fff;--color-text: #111;--color-primary: #0055ff;--color-secondary: #0033aa}.dark{--color-background: #111;--color-text: #eee;--color-primary: #88b0ff;--color-secondary: #cdd9ff}.light,.light :root{--color-background: #fff;--color-text: #111;--color-primary: #0055ff;--color-secondary: #0033aa}@media(prefers-color-scheme: dark){:root:not(.light):not(.dark){--color-background: #111;--color-text: #eee;--color-primary: #88b0ff;--color-secondary: #cdd9ff}}*,*::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.6",
|
|
4
4
|
"description": "A personal SCSS/CSS layout utility framework.",
|
|
5
5
|
"main": "dist/breakouts.css",
|
|
6
6
|
"files": [
|
|
@@ -8,7 +8,10 @@
|
|
|
8
8
|
"dist/breakouts.min.css"
|
|
9
9
|
],
|
|
10
10
|
"scripts": {
|
|
11
|
-
"build": "sass src/_index.scss dist/breakouts.css --style=expanded && sass src/_index.scss dist/breakouts.min.css --style=compressed"
|
|
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
15
|
},
|
|
13
16
|
"author": "Tuo Nome",
|
|
14
17
|
"license": "MIT",
|