breakouts 0.1.0 → 0.1.2
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 +82 -310
- package/dist/breakouts.css +9 -9
- 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 +2 -2
- package/src/_index.scss +1 -6
- package/src/base/_colors.scss +1 -1
- package/src/{layout/_grid.scss → base/_layout.scss} +17 -0
- package/src/theme/_chupa-pop.scss +4 -7
- package/src/theme/_medical.scss +6 -9
- package/src/theme/_tootsie-pop.scss +6 -9
- package/src/layout/_breakouts.scss +0 -4
- package/src/layout/_container.scss +0 -5
- package/src/layout/_full-bleed.scss +0 -5
package/README.md
CHANGED
|
@@ -1,197 +1,88 @@
|
|
|
1
|
-
#
|
|
1
|
+
# 📐 Breakouts – SCSS/CSS Layout Framework
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
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.
|
|
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.
|
|
6
4
|
|
|
7
5
|
---
|
|
8
6
|
|
|
9
7
|
## 🚀 Installation
|
|
10
8
|
|
|
11
|
-
|
|
9
|
+
Using npm:
|
|
12
10
|
|
|
13
11
|
```bash
|
|
14
12
|
npm install breakouts
|
|
15
13
|
```
|
|
16
14
|
|
|
17
|
-
|
|
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
|
-
|
|
25
|
-
## 📦 Framework Structure
|
|
26
|
-
|
|
27
|
-
Breakouts includes a small set of layout-focused utility classes to help you build responsive and consistent page structures.
|
|
15
|
+
Using bun:
|
|
28
16
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
| `.container` | Creates a centered layout wrapper with a max-width and responsive padding |
|
|
32
|
-
| `.full-bleed` | Stretches content edge-to-edge across the viewport |
|
|
33
|
-
| `.breakout` | Expands content outside the container’s padding without going full-bleed |
|
|
34
|
-
| `.grid` | Defines a named-line CSS grid with `main` and `full` layout regions |
|
|
35
|
-
| `.grid--full` | Forces children of `.grid` to span the entire width (`full` region) |
|
|
36
|
-
| `.breakouts-grid` | A more advanced named-line grid layout using CSS variables |
|
|
37
|
-
| `.content` | Places content in the main centered column within `.breakouts-grid` |
|
|
38
|
-
| `.popout` | Slightly outside the `.content` width for medium breakout |
|
|
39
|
-
| `.feature` | Wider area used for highlighting visual components |
|
|
40
|
-
| `.full` | Full-width layout spanning the entire grid |
|
|
41
|
-
|
|
42
|
-
## 🧩 Extending the Framework
|
|
43
|
-
|
|
44
|
-
Breakouts is fully configurable — you can override its core variables before importing it.
|
|
45
|
-
|
|
46
|
-
### 🔁 Example: Override the color palette
|
|
47
|
-
|
|
48
|
-
```scss
|
|
49
|
-
$colors: (
|
|
50
|
-
primary: #ff6600,
|
|
51
|
-
secondary: #222222,
|
|
52
|
-
background: #fefefe,
|
|
53
|
-
text: #111
|
|
54
|
-
);
|
|
55
|
-
|
|
56
|
-
@use "breakouts";
|
|
17
|
+
```bash
|
|
18
|
+
bun add breakouts
|
|
57
19
|
```
|
|
58
20
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
## 🔌 Use Only What You Need
|
|
62
|
-
|
|
63
|
-
Breakouts is modular and each part of the framework can be imported individually.
|
|
64
|
-
|
|
65
|
-
### Import specific modules
|
|
66
|
-
|
|
67
|
-
If you only want color utilities, you can import them directly:
|
|
68
|
-
|
|
69
|
-
```scss
|
|
70
|
-
@use "breakouts/theme/colors" as *;
|
|
21
|
+
---
|
|
71
22
|
|
|
72
|
-
|
|
73
|
-
@include bg-color-utilities();
|
|
74
|
-
```
|
|
23
|
+
## 🛠 Usage
|
|
75
24
|
|
|
76
|
-
|
|
25
|
+
### SCSS with `@use`
|
|
77
26
|
|
|
78
27
|
```scss
|
|
79
|
-
@use
|
|
28
|
+
@use 'breakouts' as *;
|
|
80
29
|
```
|
|
81
30
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
## 🧱 Define Your Own Utilities on Top
|
|
85
|
-
|
|
86
|
-
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.
|
|
87
|
-
|
|
88
|
-
### Example: custom button style
|
|
89
|
-
|
|
90
|
-
```scss
|
|
91
|
-
.button {
|
|
92
|
-
background-color: var(--color-primary);
|
|
93
|
-
color: var(--color-background);
|
|
94
|
-
padding: 0.5rem 1rem;
|
|
95
|
-
border: none;
|
|
96
|
-
border-radius: 0.25rem;
|
|
97
|
-
font-weight: 600;
|
|
98
|
-
cursor: pointer;
|
|
99
|
-
}
|
|
31
|
+
### Import CSS directly
|
|
100
32
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
}
|
|
33
|
+
```html
|
|
34
|
+
<link rel="stylesheet" href="/node_modules/breakouts/dist/breakouts.css" />
|
|
104
35
|
```
|
|
105
36
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
This approach encourages consistency while giving you full creative freedom.
|
|
109
|
-
|
|
110
|
-
## ✍️ Typography
|
|
111
|
-
|
|
112
|
-
Breakouts includes base typographic styles to ensure clean, readable text with consistent rhythm and spacing.
|
|
113
|
-
|
|
114
|
-
- Responsive font sizing and heading scale
|
|
115
|
-
- Theme-based color integration
|
|
116
|
-
- Styled links and paragraphs
|
|
117
|
-
- Easily extendable via SCSS variables
|
|
37
|
+
---
|
|
118
38
|
|
|
119
|
-
|
|
120
|
-
body {
|
|
121
|
-
font-family: system-ui, sans-serif;
|
|
122
|
-
font-size: 1rem;
|
|
123
|
-
line-height: 1.6;
|
|
124
|
-
color: var(--color-text);
|
|
125
|
-
}
|
|
39
|
+
## 🧱 Features
|
|
126
40
|
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
41
|
+
- ✅ Full-bleed layout with `.container`, `.full-bleed`, `.breakouts`
|
|
42
|
+
- ✅ Breakouts Grid with named areas (`.full`, `.popout`, `.feature`, etc.)
|
|
43
|
+
- ✅ Spacing utilities: `.m-1`, `.px-2`, etc.
|
|
44
|
+
- ✅ Text utilities: alignment, transformation, weight
|
|
45
|
+
- ✅ Responsive-friendly
|
|
46
|
+
- ✅ Dark mode support and theme overrides
|
|
47
|
+
- ✅ Prebuilt themes for fast prototyping
|
|
48
|
+
- ✅ Minimal reset and clean typography
|
|
133
49
|
|
|
134
|
-
|
|
135
|
-
margin: 1rem 0;
|
|
136
|
-
}
|
|
50
|
+
---
|
|
137
51
|
|
|
138
|
-
|
|
139
|
-
color: var(--color-primary);
|
|
140
|
-
text-decoration: underline;
|
|
52
|
+
## 🎨 Prebuilt Themes
|
|
141
53
|
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
54
|
+
| Theme Name | Description | Import Path |
|
|
55
|
+
|----------------|----------------------------------------------------------------|----------------------------------------|
|
|
56
|
+
| **Chupa Pop** | Bold and colorful palette inspired by candy tones | `@use 'breakouts/theme/chupa-pop'` |
|
|
57
|
+
| **Medical** | Calm, healthcare-inspired palette with blues and greens | `@use 'breakouts/theme/medical'` |
|
|
58
|
+
| **Tootsie Pop**| Retro and playful candy-themed palette | `@use 'breakouts/theme/tootsie-pop'` |
|
|
147
59
|
|
|
148
|
-
|
|
60
|
+
---
|
|
149
61
|
|
|
150
62
|
## ✍️ Text Utilities
|
|
151
63
|
|
|
152
|
-
|
|
64
|
+
| Class | Description |
|
|
65
|
+
|------------------|--------------------------|
|
|
66
|
+
| `.text-left` | Align text left |
|
|
67
|
+
| `.text-center` | Align text center |
|
|
68
|
+
| `.text-right` | Align text right |
|
|
69
|
+
| `.text-justify` | Justify text |
|
|
70
|
+
| `.text-uppercase` | Uppercase text |
|
|
71
|
+
| `.text-lowercase` | Lowercase text |
|
|
72
|
+
| `.text-capitalize`| Capitalize text |
|
|
73
|
+
| `.font-bold` | Bold text |
|
|
74
|
+
| `.font-normal` | Normal weight text |
|
|
75
|
+
| `.italic` | Italic text |
|
|
76
|
+
| `.not-italic` | Not italic |
|
|
77
|
+
| `.leading-tight` | Line height 1.25 |
|
|
78
|
+
| `.leading-normal` | Line height 1.5 |
|
|
79
|
+
| `.leading-loose` | Line height 2 |
|
|
153
80
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
| Class | Description |
|
|
157
|
-
|------------------|---------------------|
|
|
158
|
-
| `.text-left` | Align text to left |
|
|
159
|
-
| `.text-center` | Align text to center |
|
|
160
|
-
| `.text-right` | Align text to right |
|
|
161
|
-
| `.text-justify` | Justified text |
|
|
162
|
-
|
|
163
|
-
### Transformation
|
|
164
|
-
|
|
165
|
-
| Class | Description |
|
|
166
|
-
|---------------------|---------------------------|
|
|
167
|
-
| `.text-uppercase` | Transform to uppercase |
|
|
168
|
-
| `.text-lowercase` | Transform to lowercase |
|
|
169
|
-
| `.text-capitalize` | Capitalize each word |
|
|
170
|
-
|
|
171
|
-
### Font Weight & Style
|
|
172
|
-
|
|
173
|
-
| Class | Description |
|
|
174
|
-
|------------------|-----------------|
|
|
175
|
-
| `.font-bold` | Bold text |
|
|
176
|
-
| `.font-normal` | Normal weight |
|
|
177
|
-
| `.italic` | Italic text |
|
|
178
|
-
| `.not-italic` | Remove italic |
|
|
179
|
-
|
|
180
|
-
### Line Height
|
|
181
|
-
|
|
182
|
-
| Class | Description |
|
|
183
|
-
|---------------------|------------------------|
|
|
184
|
-
| `.leading-tight` | Line height: 1.25 |
|
|
185
|
-
| `.leading-normal` | Line height: 1.5 |
|
|
186
|
-
| `.leading-loose` | Line height: 2 |
|
|
187
|
-
|
|
188
|
-
You can mix and match these utilities with other layout and color classes for quick styling.
|
|
81
|
+
---
|
|
189
82
|
|
|
190
83
|
## 📏 Spacing Utilities
|
|
191
84
|
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
These classes are generated from a customizable scale:
|
|
85
|
+
Available spacing classes are based on the `$space-scale` map:
|
|
195
86
|
|
|
196
87
|
```scss
|
|
197
88
|
$space-scale: (
|
|
@@ -205,196 +96,77 @@ $space-scale: (
|
|
|
205
96
|
);
|
|
206
97
|
```
|
|
207
98
|
|
|
208
|
-
|
|
99
|
+
| Type | Prefixes |
|
|
100
|
+
|----------|------------------------------------|
|
|
101
|
+
| Margin | `m`, `mt`, `mr`, `mb`, `ml`, `mx`, `my` |
|
|
102
|
+
| Padding | `p`, `pt`, `pr`, `pb`, `pl`, `px`, `py` |
|
|
103
|
+
|
|
104
|
+
---
|
|
209
105
|
|
|
210
|
-
|
|
211
|
-
|---------|--------------------------------------|
|
|
212
|
-
| Margin | `m`, `mt`, `mr`, `mb`, `ml`, `mx`, `my` |
|
|
213
|
-
| Padding | `p`, `pt`, `pr`, `pb`, `pl`, `px`, `py` |
|
|
106
|
+
## 🌗 Dark Mode
|
|
214
107
|
|
|
215
|
-
|
|
108
|
+
Breakouts supports dark mode automatically by toggling the `.dark` or `.light` class on the `<html>` tag.
|
|
216
109
|
|
|
217
110
|
```html
|
|
218
|
-
<
|
|
219
|
-
|
|
220
|
-
<
|
|
111
|
+
<html class="dark">
|
|
112
|
+
<!-- or -->
|
|
113
|
+
<html class="light">
|
|
221
114
|
```
|
|
222
115
|
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
## 🌙 Dark Mode Support
|
|
226
|
-
|
|
227
|
-
Breakouts includes built-in support for **dark mode**, using CSS variables and system preferences.
|
|
228
|
-
|
|
229
|
-
### 🌓 Automatic dark mode
|
|
230
|
-
|
|
231
|
-
By default, the framework responds to the user's system setting using:
|
|
116
|
+
Use `prefers-color-scheme` if you want to auto-detect:
|
|
232
117
|
|
|
233
118
|
```scss
|
|
234
119
|
@media (prefers-color-scheme: dark) {
|
|
235
|
-
:
|
|
236
|
-
// Dark color variables
|
|
237
|
-
}
|
|
120
|
+
html { class: dark; }
|
|
238
121
|
}
|
|
239
122
|
```
|
|
240
123
|
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
### 🌘 Manual Override (Optional)
|
|
244
|
-
|
|
245
|
-
If you want to control dark mode manually—rather than relying on the user's system preferences—you can use the `.dark` class.
|
|
246
|
-
|
|
247
|
-
Apply it to the root HTML element:
|
|
248
|
-
|
|
249
|
-
```html
|
|
250
|
-
<html class="dark">
|
|
251
|
-
```
|
|
252
|
-
|
|
253
|
-
When this class is present, Breakouts will use the dark color palette regardless of system settings.
|
|
254
|
-
|
|
255
|
-
This is ideal for implementing a light/dark theme toggle in your application via JavaScript or local storage.
|
|
256
|
-
|
|
257
|
-
All color-based utility classes like .text-* and .bg-* will respond automatically, as they rely on CSS variables.
|
|
258
|
-
|
|
259
|
-
### ✅ Compatible with All Color Utilities
|
|
260
|
-
|
|
261
|
-
All utility classes that rely on colors—such as:
|
|
262
|
-
|
|
263
|
-
- `.text-primary`
|
|
264
|
-
- `.bg-surface`
|
|
265
|
-
- `.text-muted`
|
|
266
|
-
- `.bg-secondary`
|
|
267
|
-
|
|
268
|
-
...are automatically compatible with dark mode.
|
|
269
|
-
|
|
270
|
-
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.
|
|
271
|
-
|
|
272
|
-
You can keep writing markup the same way in both themes:
|
|
273
|
-
|
|
274
|
-
```html
|
|
275
|
-
<div class="bg-background text-text">
|
|
276
|
-
<p class="text-muted">This works in both light and dark modes.</p>
|
|
277
|
-
</div>
|
|
278
|
-
```
|
|
279
|
-
|
|
280
|
-
## 🎨 Prebuilt Themes
|
|
281
|
-
|
|
282
|
-
Breakouts comes with a selection of ready-to-use themes. You can apply them by importing the corresponding file:
|
|
124
|
+
---
|
|
283
125
|
|
|
284
|
-
|
|
285
|
-
|----------------|----------------------------------------------------------------|-----------------------------------|
|
|
286
|
-
| **Chupa Pop** | A bold and colorful theme inspired by candy tones. | `@use 'breakouts/theme/chupa-pop'` |
|
|
287
|
-
| **Medical** | A calm and clean theme based on classical healthcare palettes. | `@use 'breakouts/theme/medical'` |
|
|
288
|
-
| **Tootsie Pop**| A playful retro theme with rich candy shades. | `@use 'breakouts/theme/tootsie-pop'` |
|
|
126
|
+
## 🧪 Demo & Examples
|
|
289
127
|
|
|
290
|
-
|
|
128
|
+
View the live demo via GitHub Pages:
|
|
129
|
+
👉 [https://cantilux.github.io/breakouts](https://cantilux.github.io/breakouts)
|
|
291
130
|
|
|
292
|
-
|
|
131
|
+
---
|
|
293
132
|
|
|
294
|
-
|
|
133
|
+
## 🧩 Customize with `@use`
|
|
295
134
|
|
|
296
|
-
|
|
135
|
+
Override core variables before importing:
|
|
297
136
|
|
|
298
137
|
```scss
|
|
299
138
|
@use 'breakouts' with (
|
|
300
139
|
$color-primary: #d1ff4a,
|
|
301
|
-
$color-
|
|
302
|
-
$color-primary-light: lighten(#d1ff4a, 15%),
|
|
303
|
-
|
|
304
|
-
$color-accent: #8a2be2,
|
|
305
|
-
$color-accent-dark: darken(#8a2be2, 15%),
|
|
306
|
-
$color-accent-light: lighten(#8a2be2, 15%)
|
|
140
|
+
$color-accent: #8a2be2
|
|
307
141
|
);
|
|
308
142
|
```
|
|
309
143
|
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
```scss
|
|
313
|
-
--color-primary: #d1ff4a;
|
|
314
|
-
--color-accent: #8a2be2;
|
|
315
|
-
```
|
|
316
|
-
|
|
317
|
-
And will apply to utility classes like:
|
|
318
|
-
|
|
319
|
-
```html
|
|
320
|
-
<section class="bg-primary text-background">Primary Background</section>
|
|
321
|
-
<section class="bg-accent text-background">Accent Background</section>
|
|
322
|
-
```
|
|
323
|
-
|
|
324
|
-
You can also override any other color or spacing variable defined in the framework for full control.
|
|
325
|
-
|
|
326
|
-
## 🎨 Custom Theme Setup
|
|
327
|
-
|
|
328
|
-
If you're using a bundler like Vite or Webpack and encounter issues with `@use ... with`, the recommended approach is to recreate Breakouts' internal structure in your own project and apply theming from there.
|
|
329
|
-
|
|
330
|
-
### ✅ Example: Create a custom `breakouts.scss`
|
|
144
|
+
Or create a custom theme:
|
|
331
145
|
|
|
332
146
|
```scss
|
|
333
|
-
//
|
|
334
|
-
|
|
147
|
+
// my-theme.scss
|
|
335
148
|
@forward 'breakouts/src/theme/variables' with (
|
|
336
149
|
$color-primary: #d1ff4a,
|
|
337
|
-
$color-
|
|
338
|
-
$color-primary-light: lighten(#d1ff4a, 15%),
|
|
339
|
-
|
|
340
|
-
$color-accent: #8a2be2,
|
|
341
|
-
$color-accent-dark: darken(#8a2be2, 15%),
|
|
342
|
-
$color-accent-light: lighten(#8a2be2, 15%)
|
|
150
|
+
$color-accent: #8a2be2
|
|
343
151
|
);
|
|
344
152
|
|
|
345
153
|
@use 'breakouts/src/theme/variables' as *;
|
|
346
154
|
@forward 'breakouts/src/theme/colors';
|
|
347
|
-
@forward 'breakouts/src/base/reset';
|
|
348
|
-
@forward 'breakouts/src/base/typography';
|
|
349
|
-
@forward 'breakouts/src/layout/container';
|
|
350
|
-
@forward 'breakouts/src/layout/full-bleed';
|
|
351
|
-
@forward 'breakouts/src/layout/breakouts';
|
|
352
|
-
@forward 'breakouts/src/layout/grid';
|
|
353
|
-
```
|
|
354
|
-
|
|
355
|
-
💡 Use your custom theme
|
|
356
|
-
In your app entry point or component:
|
|
357
|
-
|
|
358
|
-
```scss
|
|
359
|
-
@use '@/styles/breakouts' as *;
|
|
360
155
|
```
|
|
361
156
|
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
## 🛠️ Development
|
|
365
|
-
|
|
366
|
-
To build or modify Breakouts locally, follow these steps:
|
|
367
|
-
|
|
368
|
-
1. Install dependencies:
|
|
369
|
-
|
|
370
|
-
```bash
|
|
371
|
-
npm install
|
|
372
|
-
```
|
|
373
|
-
|
|
374
|
-
2. Build the CSS files:
|
|
375
|
-
|
|
376
|
-
```bash
|
|
377
|
-
npm run build
|
|
378
|
-
```
|
|
379
|
-
|
|
380
|
-
This will generate two files in the dist/ folder:
|
|
381
|
-
|
|
382
|
-
breakouts.css: the expanded, human-readable version (ideal for development)
|
|
157
|
+
---
|
|
383
158
|
|
|
384
|
-
|
|
159
|
+
## 💡 Extend Breakouts
|
|
385
160
|
|
|
386
|
-
You can
|
|
161
|
+
You can write your own mixins or import individual parts:
|
|
387
162
|
|
|
388
|
-
```
|
|
389
|
-
|
|
163
|
+
```scss
|
|
164
|
+
@use 'breakouts/utilities/spacing';
|
|
165
|
+
@use 'breakouts/base/typography';
|
|
390
166
|
```
|
|
391
167
|
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
## 📄 License
|
|
395
|
-
|
|
396
|
-
This project is licensed under the [MIT License](LICENSE).
|
|
168
|
+
---
|
|
397
169
|
|
|
398
|
-
|
|
170
|
+
## 📦 License
|
|
399
171
|
|
|
400
|
-
|
|
172
|
+
MIT — [Cantilux](https://github.com/Cantilux)
|
package/dist/breakouts.css
CHANGED
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
--color-accent: #c60055;
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
|
-
.
|
|
53
|
+
.background {
|
|
54
54
|
background-color: var(--color-background);
|
|
55
55
|
}
|
|
56
56
|
|
|
@@ -650,6 +650,14 @@ a:hover {
|
|
|
650
650
|
line-height: 2;
|
|
651
651
|
}
|
|
652
652
|
|
|
653
|
+
:root {
|
|
654
|
+
--gap: clamp(1rem, 6vw, 3rem);
|
|
655
|
+
--full: minmax(var(--gap), 1fr);
|
|
656
|
+
--feature: minmax(0, 5rem);
|
|
657
|
+
--popout: minmax(0, 2rem);
|
|
658
|
+
--content: min(50ch, 100% - var(--gap) * 2);
|
|
659
|
+
}
|
|
660
|
+
|
|
653
661
|
.container {
|
|
654
662
|
margin-inline: auto;
|
|
655
663
|
max-width: 72rem;
|
|
@@ -667,14 +675,6 @@ a:hover {
|
|
|
667
675
|
margin-left: calc(-1 * (100vw - 100%) / 2);
|
|
668
676
|
}
|
|
669
677
|
|
|
670
|
-
:root {
|
|
671
|
-
--gap: clamp(1rem, 6vw, 3rem);
|
|
672
|
-
--full: minmax(var(--gap), 1fr);
|
|
673
|
-
--feature: minmax(0, 5rem);
|
|
674
|
-
--popout: minmax(0, 2rem);
|
|
675
|
-
--content: min(50ch, 100% - var(--gap) * 2);
|
|
676
|
-
}
|
|
677
|
-
|
|
678
678
|
.breakouts-grid {
|
|
679
679
|
display: grid;
|
|
680
680
|
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];
|
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/_typography.scss","../src/
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../src/base/_colors.scss","../src/base/_reset.scss","../src/base/_spacing.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-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 :root{--color-background: #111111;--color-surface: #1a1a1a;--color-text: #eeeeee;--color-muted: #aaaaaa;--color-primary: #0033aa;--color-secondary: #002277;--color-accent: #c60055}.light,.light :root{--color-background: #ffffff;--color-surface: #f8f8f8;--color-text: #222222;--color-muted: #999999;--color-primary: #88b0ff;--color-secondary: #ccd9ff;--color-accent: #ff80ab}@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}}.
|
|
1
|
+
:root{--color-background: #ffffff;--color-surface: #f0f0f0;--color-text: #111111;--color-muted: #666666;--color-primary: #0055ff;--color-secondary: #0033aa;--color-accent: #ff4081;--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 :root{--color-background: #111111;--color-surface: #1a1a1a;--color-text: #eeeeee;--color-muted: #aaaaaa;--color-primary: #0033aa;--color-secondary: #002277;--color-accent: #c60055}.light,.light :root{--color-background: #ffffff;--color-surface: #f8f8f8;--color-text: #222222;--color-muted: #999999;--color-primary: #88b0ff;--color-secondary: #ccd9ff;--color-accent: #ff80ab}@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}}.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)}.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}.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}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%)}.breakout{width:100vw;margin-left:calc(-1*(100vw - 100%)/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 */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../src/base/_colors.scss","../src/base/_reset.scss","../src/base/_spacing.scss","../src/base/_typography.scss","../src/
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../src/base/_colors.scss","../src/base/_reset.scss","../src/base/_spacing.scss","../src/base/_typography.scss","../src/base/_layout.scss"],"names":[],"mappings":"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","file":"breakouts.min.css"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "breakouts",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "A personal SCSS/CSS layout utility framework.",
|
|
5
5
|
"main": "dist/breakouts.css",
|
|
6
6
|
"files": [
|
|
@@ -17,6 +17,6 @@
|
|
|
17
17
|
"author": "Tuo Nome",
|
|
18
18
|
"license": "MIT",
|
|
19
19
|
"devDependencies": {
|
|
20
|
-
"sass": "^1.
|
|
20
|
+
"sass": "^1.86.2"
|
|
21
21
|
}
|
|
22
22
|
}
|
package/src/_index.scss
CHANGED
package/src/base/_colors.scss
CHANGED
|
@@ -6,6 +6,23 @@
|
|
|
6
6
|
--content: min(50ch, 100% - var(--gap) * 2);
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
+
.container {
|
|
10
|
+
margin-inline: auto;
|
|
11
|
+
max-width: 72rem;
|
|
12
|
+
padding-inline: 1rem;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.full-bleed {
|
|
16
|
+
width: 100vw;
|
|
17
|
+
margin-left: 50%;
|
|
18
|
+
transform: translateX(-50%);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.breakout {
|
|
22
|
+
width: 100vw;
|
|
23
|
+
margin-left: calc(-1 * (100vw - 100%) / 2);
|
|
24
|
+
}
|
|
25
|
+
|
|
9
26
|
// Breakouts Grid (named lines)
|
|
10
27
|
.breakouts-grid {
|
|
11
28
|
display: grid;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
// src/theme/_chupa-pop.scss
|
|
2
2
|
|
|
3
|
-
$color-primary: #ecb838 !default;
|
|
4
|
-
$color-secondary: #ab4073 !default;
|
|
5
|
-
$color-accent: #196484 !default;
|
|
3
|
+
$color-primary: #ecb838 !default;
|
|
4
|
+
$color-secondary: #ab4073 !default;
|
|
5
|
+
$color-accent: #196484 !default;
|
|
6
6
|
|
|
7
7
|
@forward 'breakouts/src/theme/variables' with (
|
|
8
8
|
$color-primary: $primary,
|
|
@@ -22,7 +22,4 @@ $color-accent: #196484 !default; // Blu petrolio
|
|
|
22
22
|
@forward 'breakouts/src/theme/colors';
|
|
23
23
|
@forward 'breakouts/src/base/reset';
|
|
24
24
|
@forward 'breakouts/src/base/typography';
|
|
25
|
-
@forward 'breakouts/src/layout
|
|
26
|
-
@forward 'breakouts/src/layout/full-bleed';
|
|
27
|
-
@forward 'breakouts/src/layout/breakouts';
|
|
28
|
-
@forward 'breakouts/src/layout/grid';
|
|
25
|
+
@forward 'breakouts/src/base/layout';
|
package/src/theme/_medical.scss
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
// src/theme/medical.scss
|
|
2
2
|
|
|
3
|
-
$primary: #4682B4 !default;
|
|
4
|
-
$secondary: #9DC183 !default;
|
|
5
|
-
$accent: #A9A9A9 !default;
|
|
6
|
-
$muted: #D3D3D3 !default;
|
|
7
|
-
$background: #FFFFFF !default;
|
|
3
|
+
$primary: #4682B4 !default;
|
|
4
|
+
$secondary: #9DC183 !default;
|
|
5
|
+
$accent: #A9A9A9 !default;
|
|
6
|
+
$muted: #D3D3D3 !default;
|
|
7
|
+
$background: #FFFFFF !default;
|
|
8
8
|
|
|
9
9
|
@forward 'breakouts/src/theme/variables'with ($color-primary: $primary,
|
|
10
10
|
$color-primary-dark: darken($primary, 15%),
|
|
@@ -30,7 +30,4 @@ $background: #FFFFFF !default; // Bianco puro
|
|
|
30
30
|
@forward 'breakouts/src/theme/colors';
|
|
31
31
|
@forward 'breakouts/src/base/reset';
|
|
32
32
|
@forward 'breakouts/src/base/typography';
|
|
33
|
-
@forward 'breakouts/src/layout
|
|
34
|
-
@forward 'breakouts/src/layout/full-bleed';
|
|
35
|
-
@forward 'breakouts/src/layout/breakouts';
|
|
36
|
-
@forward 'breakouts/src/layout/grid';
|
|
33
|
+
@forward 'breakouts/src/base/layout';
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
// src/theme/tootsie-pop.scss
|
|
2
2
|
|
|
3
|
-
$primary: #93329E !default;
|
|
4
|
-
$secondary: #F2711C !default;
|
|
5
|
-
$accent: #E94057 !default;
|
|
6
|
-
$muted: #FFE5B4 !default;
|
|
7
|
-
$background: #4F2F4C !default;
|
|
3
|
+
$primary: #93329E !default;
|
|
4
|
+
$secondary: #F2711C !default;
|
|
5
|
+
$accent: #E94057 !default;
|
|
6
|
+
$muted: #FFE5B4 !default;
|
|
7
|
+
$background: #4F2F4C !default;
|
|
8
8
|
|
|
9
9
|
@forward 'breakouts/src/theme/variables' with (
|
|
10
10
|
$color-primary: $primary,
|
|
@@ -32,7 +32,4 @@ $background: #4F2F4C !default; // Viola scuro (sfondo)
|
|
|
32
32
|
@forward 'breakouts/src/theme/colors';
|
|
33
33
|
@forward 'breakouts/src/base/reset';
|
|
34
34
|
@forward 'breakouts/src/base/typography';
|
|
35
|
-
@forward 'breakouts/src/layout
|
|
36
|
-
@forward 'breakouts/src/layout/full-bleed';
|
|
37
|
-
@forward 'breakouts/src/layout/breakouts';
|
|
38
|
-
@forward 'breakouts/src/layout/grid';
|
|
35
|
+
@forward 'breakouts/src/base/layout';
|