breakouts 0.5.7 β 0.7.1
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 +88 -206
- package/dist/breakouts.css +28 -10
- package/dist/breakouts.css.map +1 -1
- package/dist/breakouts.min.css +1 -1
- package/dist/breakouts.min.css.map +1 -1
- package/package.json +3 -3
- package/src/base/_colors.scss +23 -5
- package/src/base/_layout.scss +7 -1
- package/src/base/_reset.scss +0 -6
- package/src/base/_spacing.scss +4 -2
package/README.md
CHANGED
|
@@ -1,97 +1,78 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Breakouts
|
|
2
2
|
|
|
3
3
|
Breakouts is a minimal, modular layout framework for SCSS/CSS that gives you just the right amount of structure: full-bleed containers, responsive grids, spacing, theming, and a clean set of utilities.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
## π Installation
|
|
8
|
-
|
|
9
|
-
Using npm:
|
|
5
|
+
## Installation
|
|
10
6
|
|
|
11
7
|
```bash
|
|
12
8
|
npm install breakouts
|
|
13
9
|
```
|
|
14
10
|
|
|
15
|
-
Using bun:
|
|
16
|
-
|
|
17
11
|
```bash
|
|
18
12
|
bun add breakouts
|
|
19
13
|
```
|
|
20
14
|
|
|
21
|
-
|
|
15
|
+
## Usage
|
|
22
16
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
### SCSS with `@use`
|
|
17
|
+
### SCSS
|
|
26
18
|
|
|
27
19
|
```scss
|
|
28
|
-
@use 'breakouts
|
|
20
|
+
@use 'breakouts' as *;
|
|
29
21
|
```
|
|
30
22
|
|
|
31
|
-
###
|
|
23
|
+
### CSS
|
|
32
24
|
|
|
33
25
|
```html
|
|
34
26
|
<link rel="stylesheet" href="/node_modules/breakouts/dist/breakouts.css" />
|
|
35
27
|
```
|
|
36
28
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
|
57
|
-
|
|
58
|
-
| `.
|
|
59
|
-
| `.
|
|
60
|
-
| `.
|
|
61
|
-
| `.
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
| `.italic` | Italic text |
|
|
85
|
-
| `.not-italic` | Not italic |
|
|
86
|
-
| `.leading-tight` | Line height 1.25 |
|
|
87
|
-
| `.leading-normal` | Line height 1.5 |
|
|
88
|
-
| `.leading-loose` | Line height 2 |
|
|
89
|
-
|
|
90
|
-
---
|
|
91
|
-
|
|
92
|
-
## π Spacing Utilities
|
|
93
|
-
|
|
94
|
-
Available spacing classes are based on the `$space-scale` map:
|
|
29
|
+
## Core Layout API
|
|
30
|
+
|
|
31
|
+
The main abstraction is the `.breakouts` container. Every direct child defaults to the centered content column, and modifier classes let individual elements break outward.
|
|
32
|
+
|
|
33
|
+
```html
|
|
34
|
+
<article class="breakouts">
|
|
35
|
+
<p>Default content width</p>
|
|
36
|
+
<figure class="popout">Slightly wider</figure>
|
|
37
|
+
<pre class="feature">Wider still</pre>
|
|
38
|
+
<img class="full" src="hero.jpg" alt="" />
|
|
39
|
+
</article>
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
### Layout classes
|
|
43
|
+
|
|
44
|
+
| Class | Purpose |
|
|
45
|
+
| --- | --- |
|
|
46
|
+
| `.breakouts` | Main named-line breakout grid container |
|
|
47
|
+
| `.content` | Explicitly place an item in the content column |
|
|
48
|
+
| `.popout` | Slight breakout outside content |
|
|
49
|
+
| `.feature` | Larger breakout for emphasis |
|
|
50
|
+
| `.full` | Full-width breakout |
|
|
51
|
+
| `.container` | Traditional centered wrapper |
|
|
52
|
+
| `.full-bleed` | Viewport-wide utility outside the named-grid pattern |
|
|
53
|
+
| `.breakout` | Simpler wide utility outside the named-grid pattern |
|
|
54
|
+
|
|
55
|
+
### Default sizing tokens
|
|
56
|
+
|
|
57
|
+
These CSS custom properties drive the layout and can be overridden per scope:
|
|
58
|
+
|
|
59
|
+
```css
|
|
60
|
+
:root {
|
|
61
|
+
--gap: clamp(1rem, 6vw, 3rem);
|
|
62
|
+
--full: minmax(var(--gap), 1fr);
|
|
63
|
+
--feature: minmax(0, 5rem);
|
|
64
|
+
--popout: minmax(0, 2rem);
|
|
65
|
+
--content: min(50ch, 100% - var(--gap) * 2);
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## Utility Layer
|
|
70
|
+
|
|
71
|
+
Breakouts intentionally ships only a small utility surface around the breakout layout.
|
|
72
|
+
|
|
73
|
+
### Spacing
|
|
74
|
+
|
|
75
|
+
Spacing classes are generated from this scale:
|
|
95
76
|
|
|
96
77
|
```scss
|
|
97
78
|
$space-scale: (
|
|
@@ -106,20 +87,21 @@ $space-scale: (
|
|
|
106
87
|
);
|
|
107
88
|
```
|
|
108
89
|
|
|
109
|
-
|
|
110
|
-
|----------|------------------------------------|
|
|
111
|
-
| Margin | `m`, `mt`, `mr`, `mb`, `ml`, `mx`, `my` |
|
|
112
|
-
| Padding | `p`, `pt`, `pr`, `pb`, `pl`, `px`, `py` |
|
|
90
|
+
Available prefixes:
|
|
113
91
|
|
|
114
|
-
|
|
92
|
+
- Margin: `m`, `mt`, `mr`, `mb`, `ml`, `mx`, `my`
|
|
93
|
+
- Padding: `p`, `pt`, `pr`, `pb`, `pl`, `px`, `py`
|
|
115
94
|
|
|
116
|
-
|
|
95
|
+
### Typography
|
|
117
96
|
|
|
118
|
-
|
|
97
|
+
- Alignment: `text-left`, `text-center`, `text-right`, `text-justify`
|
|
98
|
+
- Transform: `text-uppercase`, `text-lowercase`, `text-capitalize`
|
|
99
|
+
- Weight/style: `font-bold`, `font-normal`, `italic`, `not-italic`
|
|
100
|
+
- Leading: `leading-tight`, `leading-normal`, `leading-loose`
|
|
119
101
|
|
|
120
|
-
###
|
|
102
|
+
### Colors
|
|
121
103
|
|
|
122
|
-
|
|
104
|
+
Base tokens exposed as CSS variables:
|
|
123
105
|
|
|
124
106
|
- `--color-background`
|
|
125
107
|
- `--color-surface`
|
|
@@ -128,156 +110,56 @@ The following tokens are always available:
|
|
|
128
110
|
- `--color-primary`
|
|
129
111
|
- `--color-secondary`
|
|
130
112
|
- `--color-accent`
|
|
131
|
-
- `--color-
|
|
132
|
-
- `--color-
|
|
133
|
-
- `--color-
|
|
134
|
-
- `--color-neutral-400`
|
|
135
|
-
- `--color-neutral-500`
|
|
136
|
-
- `--color-neutral-600`
|
|
137
|
-
- `--color-neutral-700`
|
|
138
|
-
- `--color-neutral-800`
|
|
139
|
-
- `--color-neutral-900`
|
|
140
|
-
|
|
141
|
-
### Utility classes
|
|
142
|
-
|
|
143
|
-
#### Background colors
|
|
144
|
-
|
|
145
|
-
| Class | Description |
|
|
146
|
-
|----------------|--------------------------------------|
|
|
147
|
-
| `.bg-surface` | `background-color: var(--color-surface)` |
|
|
148
|
-
| `.bg-primary` | `background-color: var(--color-primary)` |
|
|
149
|
-
| `.bg-secondary` | `background-color: var(--color-secondary)` |
|
|
150
|
-
| `.bg-accent` | `background-color: var(--color-accent)` |
|
|
151
|
-
|
|
152
|
-
#### Text colors
|
|
153
|
-
|
|
154
|
-
| Class | Description |
|
|
155
|
-
|-------------------|-------------------------------------------|
|
|
156
|
-
| `.text-primary` | `color: var(--color-primary)` |
|
|
157
|
-
| `.text-secondary` | `color: var(--color-secondary)` |
|
|
158
|
-
| `.text-accent` | `color: var(--color-accent)` |
|
|
159
|
-
| `.text-surface` | `color: var(--color-surface)` |
|
|
160
|
-
| `.text-muted` | `color: var(--color-muted)` |
|
|
161
|
-
| `.text-neutral-100`| `color: var(--color-neutral-100)` |
|
|
162
|
-
| `.text-neutral-200`| `color: var(--color-neutral-200)` |
|
|
163
|
-
| `.text-neutral-300`| `color: var(--color-neutral-300)` |
|
|
164
|
-
| `.text-neutral-400`| `color: var(--color-neutral-400)` |
|
|
165
|
-
| `.text-neutral-500`| `color: var(--color-neutral-500)` |
|
|
166
|
-
| `.text-neutral-600`| `color: var(--color-neutral-600)` |
|
|
167
|
-
| `.text-neutral-700`| `color: var(--color-neutral-700)` |
|
|
168
|
-
| `.text-neutral-800`| `color: var(--color-neutral-800)` |
|
|
169
|
-
| `.text-neutral-900`| `color: var(--color-neutral-900)` |
|
|
170
|
-
|
|
171
|
-
Example:
|
|
172
|
-
|
|
173
|
-
```html
|
|
174
|
-
<div class="bg-surface p-4">
|
|
175
|
-
<h3 class="text-primary">Primary title</h3>
|
|
176
|
-
<p class="text-muted">Muted paragraph text</p>
|
|
177
|
-
<p class="text-neutral-700">Neutral text</p>
|
|
178
|
-
</div>
|
|
179
|
-
```
|
|
180
|
-
|
|
181
|
-
---
|
|
182
|
-
|
|
183
|
-
## π Position Utilities
|
|
113
|
+
- `--color-success`
|
|
114
|
+
- `--color-error`
|
|
115
|
+
- `--color-warning`
|
|
184
116
|
|
|
185
|
-
|
|
186
|
-
|-------------------|--------------------------------------|
|
|
187
|
-
| `.position-static` | Set `position: static;` (default) |
|
|
188
|
-
| `.position-relative` | Set `position: relative;` |
|
|
189
|
-
| `.position-absolute` | Set `position: absolute;` |
|
|
190
|
-
| `.position-fixed` | Set `position: fixed;` |
|
|
191
|
-
| `.position-sticky` | Set `position: sticky;` |
|
|
192
|
-
| `.z-index-0` | Set `z-index: 0;` |
|
|
193
|
-
| `.z-index-1` | Set `z-index: 1;` |
|
|
194
|
-
| `.z-index-10` | Set `z-index: 10;` |
|
|
195
|
-
| `.z-index-100` | Set `z-index: 100;` |
|
|
196
|
-
| `.z-index-1000` | Set `z-index: 1000;` |
|
|
117
|
+
Common utility classes:
|
|
197
118
|
|
|
198
|
-
|
|
119
|
+
- Background: `bg-background`, `bg-surface`, `bg-primary`, `bg-secondary`, `bg-accent`, `bg-muted`
|
|
120
|
+
- Text: `text-background`, `text-color`, `text-primary`, `text-secondary`, `text-accent`, `text-muted`
|
|
199
121
|
|
|
200
|
-
##
|
|
122
|
+
## Themes And Color Modes
|
|
201
123
|
|
|
202
|
-
Breakouts supports dark
|
|
124
|
+
Breakouts supports explicit light/dark classes on `<html>` and also respects `prefers-color-scheme` when no explicit class is present.
|
|
203
125
|
|
|
204
126
|
```html
|
|
205
127
|
<html class="dark">
|
|
206
|
-
<!-- or -->
|
|
207
|
-
<html class="light">
|
|
208
|
-
```
|
|
209
|
-
|
|
210
|
-
Use `prefers-color-scheme` if you want to auto-detect:
|
|
211
|
-
|
|
212
|
-
```scss
|
|
213
|
-
@media (prefers-color-scheme: dark) {
|
|
214
|
-
html { class: dark; }
|
|
215
|
-
}
|
|
216
128
|
```
|
|
217
129
|
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
## π§ͺ Demo & Examples
|
|
130
|
+
Prebuilt themes:
|
|
221
131
|
|
|
222
|
-
|
|
223
|
-
|
|
132
|
+
| Theme | Import |
|
|
133
|
+
| --- | --- |
|
|
134
|
+
| Chupa Pop | `@use 'breakouts/src/theme/chupa-pop';` |
|
|
135
|
+
| Medical | `@use 'breakouts/src/theme/medical';` |
|
|
136
|
+
| Tootsie Pop | `@use 'breakouts/src/theme/tootsie-pop';` |
|
|
224
137
|
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
## 𧩠Customize with `@use`
|
|
228
|
-
|
|
229
|
-
Override core variables before importing:
|
|
138
|
+
If a theme overrides variables, load it before the main entrypoint:
|
|
230
139
|
|
|
231
140
|
```scss
|
|
232
|
-
@use 'breakouts/src/
|
|
233
|
-
|
|
234
|
-
$color-accent: #8a2be2
|
|
235
|
-
);
|
|
141
|
+
@use 'breakouts/src/theme/chupa-pop';
|
|
142
|
+
@use 'breakouts' as *;
|
|
236
143
|
```
|
|
237
144
|
|
|
238
|
-
|
|
145
|
+
## Customization
|
|
146
|
+
|
|
147
|
+
Override variables on first load with `@use ... with (...)`:
|
|
239
148
|
|
|
240
149
|
```scss
|
|
241
|
-
|
|
242
|
-
@forward 'breakouts/src/base/variables' with (
|
|
150
|
+
@use 'breakouts' with (
|
|
243
151
|
$color-primary: #d1ff4a,
|
|
244
152
|
$color-accent: #8a2be2
|
|
245
153
|
);
|
|
246
|
-
|
|
247
|
-
@use 'breakouts/src/base/variables' as *;
|
|
248
|
-
@forward 'breakouts/src/base/colors';
|
|
249
154
|
```
|
|
250
155
|
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
## π¨ Prebuilt Themes
|
|
254
|
-
|
|
255
|
-
| Theme Name | Description | Import Path |
|
|
256
|
-
|----------------|----------------------------------------------------------------|----------------------------------------|
|
|
257
|
-
| **Chupa Pop** | Bold and colorful palette inspired by candy tones | `@use 'breakouts/src/theme/chupa-pop'` |
|
|
258
|
-
| **Medical** | Calm, healthcare-inspired palette with blues and greens | `@use 'breakouts/src/theme/medical'` |
|
|
259
|
-
| **Tootsie Pop**| Retro and playful candy-themed palette | `@use 'breakouts/src/theme/tootsie-pop'` |
|
|
260
|
-
|
|
261
|
-
Case of use
|
|
262
|
-
|
|
263
|
-
```scss
|
|
264
|
-
@use 'breakouts/src/theme/chupa-pop';
|
|
265
|
-
@use 'breakouts' as *;
|
|
266
|
-
```
|
|
267
|
-
|
|
268
|
-
---
|
|
269
|
-
|
|
270
|
-
## π‘ Extend Breakouts
|
|
271
|
-
|
|
272
|
-
You can write your own mixins or import individual parts:
|
|
156
|
+
Or import only the modules you need:
|
|
273
157
|
|
|
274
158
|
```scss
|
|
159
|
+
@use 'breakouts/src/base/layout';
|
|
275
160
|
@use 'breakouts/src/base/spacing';
|
|
276
|
-
@use 'breakouts/src/base/typography';
|
|
277
161
|
```
|
|
278
162
|
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
## π¦ License
|
|
163
|
+
## Demo
|
|
282
164
|
|
|
283
|
-
|
|
165
|
+
GitHub Pages demo: [cantilux.github.io/breakouts](https://cantilux.github.io/breakouts)
|
package/dist/breakouts.css
CHANGED
|
@@ -18,10 +18,12 @@
|
|
|
18
18
|
--color-neutral-700: #495057;
|
|
19
19
|
--color-neutral-800: #343a40;
|
|
20
20
|
--color-neutral-900: #212529;
|
|
21
|
+
color-scheme: light;
|
|
21
22
|
}
|
|
22
23
|
|
|
23
|
-
.dark,
|
|
24
|
-
.dark
|
|
24
|
+
html.dark,
|
|
25
|
+
:root.dark,
|
|
26
|
+
.dark {
|
|
25
27
|
--color-background: #111111;
|
|
26
28
|
--color-surface: #1a1a1a;
|
|
27
29
|
--color-text: #eeeeee;
|
|
@@ -32,10 +34,12 @@
|
|
|
32
34
|
--color-success: #1e7e34;
|
|
33
35
|
--color-error: #a71d2a;
|
|
34
36
|
--color-warning: #c79100;
|
|
37
|
+
color-scheme: dark;
|
|
35
38
|
}
|
|
36
39
|
|
|
37
|
-
.light,
|
|
38
|
-
.light
|
|
40
|
+
html.light,
|
|
41
|
+
:root.light,
|
|
42
|
+
.light {
|
|
39
43
|
--color-background: #ffffff;
|
|
40
44
|
--color-surface: #f8f8f8;
|
|
41
45
|
--color-text: #222222;
|
|
@@ -46,6 +50,7 @@
|
|
|
46
50
|
--color-success: #71dd8a;
|
|
47
51
|
--color-error: #ff6b6b;
|
|
48
52
|
--color-warning: #ffdb4d;
|
|
53
|
+
color-scheme: light;
|
|
49
54
|
}
|
|
50
55
|
|
|
51
56
|
@media (prefers-color-scheme: dark) {
|
|
@@ -60,8 +65,13 @@
|
|
|
60
65
|
--color-success: #1e7e34;
|
|
61
66
|
--color-error: #a71d2a;
|
|
62
67
|
--color-warning: #c79100;
|
|
68
|
+
color-scheme: dark;
|
|
63
69
|
}
|
|
64
70
|
}
|
|
71
|
+
.bg-background {
|
|
72
|
+
background-color: var(--color-background);
|
|
73
|
+
}
|
|
74
|
+
|
|
65
75
|
.bg-surface {
|
|
66
76
|
background-color: var(--color-surface);
|
|
67
77
|
}
|
|
@@ -94,6 +104,14 @@
|
|
|
94
104
|
background-color: var(--color-warning);
|
|
95
105
|
}
|
|
96
106
|
|
|
107
|
+
.text-background {
|
|
108
|
+
color: var(--color-background);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.text-color {
|
|
112
|
+
color: var(--color-text);
|
|
113
|
+
}
|
|
114
|
+
|
|
97
115
|
.text-primary {
|
|
98
116
|
color: var(--color-primary);
|
|
99
117
|
}
|
|
@@ -178,12 +196,6 @@ body {
|
|
|
178
196
|
overflow-x: hidden;
|
|
179
197
|
}
|
|
180
198
|
|
|
181
|
-
body {
|
|
182
|
-
padding: 2rem;
|
|
183
|
-
font-family: system-ui, sans-serif;
|
|
184
|
-
line-height: 1.6;
|
|
185
|
-
}
|
|
186
|
-
|
|
187
199
|
.m-0 {
|
|
188
200
|
margin: 0;
|
|
189
201
|
}
|
|
@@ -878,12 +890,18 @@ a:hover {
|
|
|
878
890
|
transform: translateX(calc(100% - 100vw));
|
|
879
891
|
}
|
|
880
892
|
|
|
893
|
+
.breakouts,
|
|
881
894
|
.breakouts-grid {
|
|
882
895
|
display: grid;
|
|
883
896
|
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];
|
|
884
897
|
gap: var(--gap);
|
|
885
898
|
}
|
|
886
899
|
|
|
900
|
+
.breakouts > *,
|
|
901
|
+
.breakouts-grid > * {
|
|
902
|
+
grid-column: content;
|
|
903
|
+
}
|
|
904
|
+
|
|
887
905
|
.content {
|
|
888
906
|
grid-column: content;
|
|
889
907
|
}
|
package/dist/breakouts.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../src/base/_colors.scss","../src/base/_reset.scss","../src/base/_spacing.scss","../src/base/_positions.scss","../src/base/_typography.scss","../src/base/_layout.scss"],"names":[],"mappings":"AAIA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;AAAA;
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../src/base/_colors.scss","../src/base/_reset.scss","../src/base/_spacing.scss","../src/base/_positions.scss","../src/base/_typography.scss","../src/base/_layout.scss"],"names":[],"mappings":"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","file":"breakouts.css"}
|
package/dist/breakouts.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--color-background: #ffffff;--color-surface: #f0f0f0;--color-text: #111111;--color-muted: #666666;--color-primary: #0055ff;--color-secondary: #0033aa;--color-accent: #ff4081;--color-success: #28a745;--color-error: #dc3545;--color-warning: #ffc107;--color-neutral-100: #f8f9fa;--color-neutral-200: #e9ecef;--color-neutral-300: #dee2e6;--color-neutral-400: #ced4da;--color-neutral-500: #adb5bd;--color-neutral-600: #6c757d;--color-neutral-700: #495057;--color-neutral-800: #343a40;--color-neutral-900: #212529}.dark,.dark
|
|
1
|
+
:root{--color-background: #ffffff;--color-surface: #f0f0f0;--color-text: #111111;--color-muted: #666666;--color-primary: #0055ff;--color-secondary: #0033aa;--color-accent: #ff4081;--color-success: #28a745;--color-error: #dc3545;--color-warning: #ffc107;--color-neutral-100: #f8f9fa;--color-neutral-200: #e9ecef;--color-neutral-300: #dee2e6;--color-neutral-400: #ced4da;--color-neutral-500: #adb5bd;--color-neutral-600: #6c757d;--color-neutral-700: #495057;--color-neutral-800: #343a40;--color-neutral-900: #212529;color-scheme:light}html.dark,:root.dark,.dark{--color-background: #111111;--color-surface: #1a1a1a;--color-text: #eeeeee;--color-muted: #aaaaaa;--color-primary: #0033aa;--color-secondary: #002277;--color-accent: #c60055;--color-success: #1e7e34;--color-error: #a71d2a;--color-warning: #c79100;color-scheme:dark}html.light,:root.light,.light{--color-background: #ffffff;--color-surface: #f8f8f8;--color-text: #222222;--color-muted: #999999;--color-primary: #88b0ff;--color-secondary: #ccd9ff;--color-accent: #ff80ab;--color-success: #71dd8a;--color-error: #ff6b6b;--color-warning: #ffdb4d;color-scheme:light}@media(prefers-color-scheme: dark){:root:not(.light):not(.dark){--color-background: #111111;--color-surface: #1a1a1a;--color-text: #eeeeee;--color-muted: #aaaaaa;--color-primary: #0033aa;--color-secondary: #002277;--color-accent: #c60055;--color-success: #1e7e34;--color-error: #a71d2a;--color-warning: #c79100;color-scheme:dark}}.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)}.bg-accent{background-color:var(--color-accent)}.bg-muted{background-color:var(--color-muted)}.bg-success{background-color:var(--color-success)}.bg-error{background-color:var(--color-error)}.bg-warning{background-color:var(--color-warning)}.text-background{color:var(--color-background)}.text-color{color:var(--color-text)}.text-primary{color:var(--color-primary)}.text-accent{color:var(--color-accent)}.text-secondary{color:var(--color-secondary)}.text-surface{color:var(--color-surface)}.text-muted{color:var(--color-muted)}.text-success{color:var(--color-success)}.text-error{color:var(--color-error)}.text-warning{color:var(--color-warning)}.text-neutral-100{color:var(--color-neutral-100)}.text-neutral-200{color:var(--color-neutral-200)}.text-neutral-300{color:var(--color-neutral-300)}.text-neutral-400{color:var(--color-neutral-400)}.text-neutral-500{color:var(--color-neutral-500)}.text-neutral-600{color:var(--color-neutral-600)}.text-neutral-700{color:var(--color-neutral-700)}.text-neutral-800{color:var(--color-neutral-800)}.text-neutral-900{color:var(--color-neutral-900)}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html,body{margin:0;padding:0;width:100%;overflow-x:hidden}.m-0{margin:0}.mt-0{margin-top:0}.mr-0{margin-right:0}.mb-0{margin-bottom:0}.ml-0{margin-left:0}.mx-0{margin-left:0;margin-right:0}.my-0{margin-top:0;margin-bottom:0}.p-0{padding:0}.pt-0{padding-top:0}.pr-0{padding-right:0}.pb-0{padding-bottom:0}.pl-0{padding-left:0}.px-0{padding-left:0;padding-right:0}.py-0{padding-top:0;padding-bottom:0}.m-1{margin:.25rem}.mt-1{margin-top:.25rem}.mr-1{margin-right:.25rem}.mb-1{margin-bottom:.25rem}.ml-1{margin-left:.25rem}.mx-1{margin-left:.25rem;margin-right:.25rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.p-1{padding:.25rem}.pt-1{padding-top:.25rem}.pr-1{padding-right:.25rem}.pb-1{padding-bottom:.25rem}.pl-1{padding-left:.25rem}.px-1{padding-left:.25rem;padding-right:.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.m-2{margin:.5rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.mb-2{margin-bottom:.5rem}.ml-2{margin-left:.5rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.p-2{padding:.5rem}.pt-2{padding-top:.5rem}.pr-2{padding-right:.5rem}.pb-2{padding-bottom:.5rem}.pl-2{padding-left:.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.m-3{margin:.75rem}.mt-3{margin-top:.75rem}.mr-3{margin-right:.75rem}.mb-3{margin-bottom:.75rem}.ml-3{margin-left:.75rem}.mx-3{margin-left:.75rem;margin-right:.75rem}.my-3{margin-top:.75rem;margin-bottom:.75rem}.p-3{padding:.75rem}.pt-3{padding-top:.75rem}.pr-3{padding-right:.75rem}.pb-3{padding-bottom:.75rem}.pl-3{padding-left:.75rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.m-4{margin:1rem}.mt-4{margin-top:1rem}.mr-4{margin-right:1rem}.mb-4{margin-bottom:1rem}.ml-4{margin-left:1rem}.mx-4{margin-left:1rem;margin-right:1rem}.my-4{margin-top:1rem;margin-bottom:1rem}.p-4{padding:1rem}.pt-4{padding-top:1rem}.pr-4{padding-right:1rem}.pb-4{padding-bottom:1rem}.pl-4{padding-left:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-4{padding-top:1rem;padding-bottom:1rem}.m-5{margin:1.25rem}.mt-5{margin-top:1.25rem}.mr-5{margin-right:1.25rem}.mb-5{margin-bottom:1.25rem}.ml-5{margin-left:1.25rem}.mx-5{margin-left:1.25rem;margin-right:1.25rem}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.p-5{padding:1.25rem}.pt-5{padding-top:1.25rem}.pr-5{padding-right:1.25rem}.pb-5{padding-bottom:1.25rem}.pl-5{padding-left:1.25rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.m-6{margin:1.5rem}.mt-6{margin-top:1.5rem}.mr-6{margin-right:1.5rem}.mb-6{margin-bottom:1.5rem}.ml-6{margin-left:1.5rem}.mx-6{margin-left:1.5rem;margin-right:1.5rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.p-6{padding:1.5rem}.pt-6{padding-top:1.5rem}.pr-6{padding-right:1.5rem}.pb-6{padding-bottom:1.5rem}.pl-6{padding-left:1.5rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.m-auto{margin:auto}.mt-auto{margin-top:auto}.mr-auto{margin-right:auto}.mb-auto{margin-bottom:auto}.ml-auto{margin-left:auto}.mx-auto{margin-left:auto;margin-right:auto}.my-auto{margin-top:auto;margin-bottom:auto}.p-auto{padding:auto}.pt-auto{padding-top:auto}.pr-auto{padding-right:auto}.pb-auto{padding-bottom:auto}.pl-auto{padding-left:auto}.px-auto{padding-left:auto;padding-right:auto}.py-auto{padding-top:auto;padding-bottom:auto}.position-static{position:static}.position-relative{position:relative}.position-absolute{position:absolute}.position-fixed{position:fixed}.position-sticky{position:sticky}.z-index-0{z-index:0}.z-index-1{z-index:1}.z-index-10{z-index:10}.z-index-100{z-index:100}.z-index-1000{z-index:1000}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)}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.text-uppercase{text-transform:uppercase}.text-lowercase{text-transform:lowercase}.text-capitalize{text-transform:capitalize}.font-bold{font-weight:bold}.font-normal{font-weight:normal}.italic{font-style:italic}.not-italic{font-style:normal}.leading-tight{line-height:1.25}.leading-normal{line-height:1.5}.leading-loose{line-height: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)}.container{margin-inline:auto;max-width:72rem;padding-inline:1rem}.full-bleed{width:100vw;margin-left:50%;transform:translateX(-50%)}.full-bleed--left{width:100vw;margin-left:0;transform:translateX(0)}.full-bleed--right{width:100vw;margin-left:calc(-1*(100vw - 100%)/2);transform:translateX(calc(100% - 100vw))}.breakout{width:100vw;margin-left:calc(-1*(100vw - 100%)/2)}.breakout--left{width:100vw;margin-left:0;transform:translateX(0)}.breakout--right{width:100vw;margin-left:calc(-1*(100vw - 100%)/2);transform:translateX(calc(100% - 100vw))}.breakouts,.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)}.breakouts>*,.breakouts-grid>*{grid-column:content}.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 */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../src/base/_colors.scss","../src/base/_reset.scss","../src/base/_spacing.scss","../src/base/_positions.scss","../src/base/_typography.scss","../src/base/_layout.scss"],"names":[],"mappings":"AAIA,MACI,4BACA,yBACA,sBACA,uBACA,yBACA,2BACA,wBACA,yBACA,uBACA,yBAEA,6BACA,6BACA,6BACA,6BACA,6BACA,6BACA,6BACA,6BACA,
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../src/base/_colors.scss","../src/base/_reset.scss","../src/base/_spacing.scss","../src/base/_positions.scss","../src/base/_typography.scss","../src/base/_layout.scss"],"names":[],"mappings":"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","file":"breakouts.min.css"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "breakouts",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "A
|
|
3
|
+
"version": "0.7.1",
|
|
4
|
+
"description": "A focused SCSS/CSS breakout layout toolkit inspired by the Mulligan named-grid pattern.",
|
|
5
5
|
"main": "dist/breakouts.css",
|
|
6
6
|
"files": [
|
|
7
7
|
"src/",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"release:minor": "npm run build && npm version minor --sign-git-tag && git push && git push --follow-tags && npm publish --access public",
|
|
14
14
|
"release:major": "npm run build && npm version major --sign-git-tag && git push && git push --follow-tags && npm publish --access public"
|
|
15
15
|
},
|
|
16
|
-
"author": "
|
|
16
|
+
"author": "Cantilux",
|
|
17
17
|
"license": "MIT",
|
|
18
18
|
"devDependencies": {
|
|
19
19
|
"sass": "^1.86.2"
|
package/src/base/_colors.scss
CHANGED
|
@@ -23,10 +23,12 @@
|
|
|
23
23
|
--color-neutral-700: #{$color-neutral-700};
|
|
24
24
|
--color-neutral-800: #{$color-neutral-800};
|
|
25
25
|
--color-neutral-900: #{$color-neutral-900};
|
|
26
|
+
color-scheme: light;
|
|
26
27
|
}
|
|
27
28
|
|
|
28
|
-
.dark,
|
|
29
|
-
.dark
|
|
29
|
+
html.dark,
|
|
30
|
+
:root.dark,
|
|
31
|
+
.dark {
|
|
30
32
|
--color-background: #{$color-background-dark};
|
|
31
33
|
--color-surface: #{$color-surface-dark};
|
|
32
34
|
--color-text: #{$color-text-dark};
|
|
@@ -37,10 +39,12 @@
|
|
|
37
39
|
--color-success: #{$color-success-dark};
|
|
38
40
|
--color-error: #{$color-error-dark};
|
|
39
41
|
--color-warning: #{$color-warning-dark};
|
|
42
|
+
color-scheme: dark;
|
|
40
43
|
}
|
|
41
44
|
|
|
42
|
-
.light,
|
|
43
|
-
.light
|
|
45
|
+
html.light,
|
|
46
|
+
:root.light,
|
|
47
|
+
.light {
|
|
44
48
|
--color-background: #{$color-background-light};
|
|
45
49
|
--color-surface: #{$color-surface-light};
|
|
46
50
|
--color-text: #{$color-text-light};
|
|
@@ -51,6 +55,7 @@
|
|
|
51
55
|
--color-success: #{$color-success-light};
|
|
52
56
|
--color-error: #{$color-error-light};
|
|
53
57
|
--color-warning: #{$color-warning-light};
|
|
58
|
+
color-scheme: light;
|
|
54
59
|
}
|
|
55
60
|
|
|
56
61
|
@media (prefers-color-scheme: dark) {
|
|
@@ -65,11 +70,16 @@
|
|
|
65
70
|
--color-success: #{$color-success-dark};
|
|
66
71
|
--color-error: #{$color-error-dark};
|
|
67
72
|
--color-warning: #{$color-warning-dark};
|
|
73
|
+
color-scheme: dark;
|
|
68
74
|
}
|
|
69
75
|
}
|
|
70
76
|
|
|
71
77
|
// Utility classes for background and text colors
|
|
72
78
|
|
|
79
|
+
.bg-background {
|
|
80
|
+
background-color: var(--color-background);
|
|
81
|
+
}
|
|
82
|
+
|
|
73
83
|
.bg-surface {
|
|
74
84
|
background-color: var(--color-surface);
|
|
75
85
|
}
|
|
@@ -102,6 +112,14 @@
|
|
|
102
112
|
background-color: var(--color-warning);
|
|
103
113
|
}
|
|
104
114
|
|
|
115
|
+
.text-background {
|
|
116
|
+
color: var(--color-background);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.text-color {
|
|
120
|
+
color: var(--color-text);
|
|
121
|
+
}
|
|
122
|
+
|
|
105
123
|
.text-primary {
|
|
106
124
|
color: var(--color-primary);
|
|
107
125
|
}
|
|
@@ -168,4 +186,4 @@
|
|
|
168
186
|
|
|
169
187
|
.text-neutral-900 {
|
|
170
188
|
color: var(--color-neutral-900);
|
|
171
|
-
}
|
|
189
|
+
}
|
package/src/base/_layout.scss
CHANGED
|
@@ -53,6 +53,7 @@
|
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
// Breakouts Grid (named lines)
|
|
56
|
+
.breakouts,
|
|
56
57
|
.breakouts-grid {
|
|
57
58
|
display: grid;
|
|
58
59
|
grid-template-columns:
|
|
@@ -60,6 +61,11 @@
|
|
|
60
61
|
gap: var(--gap);
|
|
61
62
|
}
|
|
62
63
|
|
|
64
|
+
.breakouts > *,
|
|
65
|
+
.breakouts-grid > * {
|
|
66
|
+
grid-column: content;
|
|
67
|
+
}
|
|
68
|
+
|
|
63
69
|
.content {
|
|
64
70
|
grid-column: content;
|
|
65
71
|
}
|
|
@@ -89,4 +95,4 @@
|
|
|
89
95
|
|
|
90
96
|
.grid--full>* {
|
|
91
97
|
grid-column: 1 / -1;
|
|
92
|
-
}
|
|
98
|
+
}
|
package/src/base/_reset.scss
CHANGED
package/src/base/_spacing.scss
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
// This file contains the spacing variables and utility classes for the project.
|
|
2
2
|
|
|
3
|
+
@use 'sass:meta';
|
|
4
|
+
|
|
3
5
|
$space-scale: (0: 0,
|
|
4
6
|
1: 0.25rem,
|
|
5
7
|
2: 0.5rem,
|
|
@@ -31,7 +33,7 @@ $value in $space-scale {
|
|
|
31
33
|
@each $prefix,
|
|
32
34
|
$properties in $spacing-properties {
|
|
33
35
|
.#{$prefix}-#{$name} {
|
|
34
|
-
@if type-of($properties)=='list' {
|
|
36
|
+
@if meta.type-of($properties)=='list' {
|
|
35
37
|
@each $prop in $properties {
|
|
36
38
|
#{$prop}: $value;
|
|
37
39
|
}
|
|
@@ -42,4 +44,4 @@ $value in $space-scale {
|
|
|
42
44
|
}
|
|
43
45
|
}
|
|
44
46
|
}
|
|
45
|
-
}
|
|
47
|
+
}
|