create-berna-stencil 1.0.48 → 1.0.50
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/docs/Styling with SCSS.md +30 -4
- package/package.json +1 -1
|
@@ -100,15 +100,41 @@ header {
|
|
|
100
100
|
height: root.$header-height;
|
|
101
101
|
}
|
|
102
102
|
```
|
|
103
|
+
## Scss modules
|
|
104
|
+
You can create your custom css modules by creating a new `.scss` file in `src/frontend/scss/modules/` (the name of the file must start with `_`)
|
|
103
105
|
|
|
104
|
-
|
|
106
|
+
You can create subfolders if you want to refactor the structure, but be sure to update the relative paths in the pages that import them
|
|
107
|
+
|
|
108
|
+
### _yourModule.scss <small>(`src/frontend/scss/modules/subfolder/`)</small>
|
|
109
|
+
```scss
|
|
110
|
+
@use '../root' as root;
|
|
111
|
+
|
|
112
|
+
body {
|
|
113
|
+
background-color: root.$primary;
|
|
114
|
+
}
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
### examplePage.scss
|
|
118
|
+
```scss
|
|
119
|
+
@import "../modules/subfolder/yourModule";
|
|
120
|
+
|
|
121
|
+
// This page will now inherit the body tag rules
|
|
122
|
+
// If the same property is declared in both, the last imported one wins
|
|
123
|
+
body {
|
|
124
|
+
color: root.$dark;
|
|
125
|
+
}
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
### Pre-existing modules
|
|
105
129
|
|
|
106
130
|
| File | Purpose |
|
|
107
131
|
|---|---|
|
|
108
132
|
| `_root.scss` | Global variables (colors, spacing) |
|
|
109
133
|
| `_global.scss` | Site-wide base rules and frameworks |
|
|
110
|
-
| `
|
|
134
|
+
| `_typography.scss` | Font rules
|
|
111
135
|
| `_header.scss` | Header styles |
|
|
112
136
|
| `_footer.scss` | Footer styles |
|
|
113
|
-
| `
|
|
114
|
-
| `
|
|
137
|
+
| `_mobile.scss` | Media query rules |
|
|
138
|
+
| `_buttons.scss` | Style and hovers for buttons
|
|
139
|
+
| `_animations.scss` | Keyframe animations (`fade-in`, `spin`) |
|
|
140
|
+
| `_notification.scss` | Notification component style |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "create-berna-stencil",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.50",
|
|
4
4
|
"description": "Eleventy boilerplate with per-page SCSS/JS pipeline, esbuild bundling, multi-framework CSS support and a built-in page management CLI",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"author": "Michele Garofalo",
|