beathers 5.0.0 โ 5.1.0
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/dist/css/beathers.min.css +1 -1
- package/dist/css/beathers.min.css.map +1 -1
- package/dist/scripts/BuildTheme.js +5 -74
- package/dist/scripts/cli.js +209 -1
- package/dist/scripts/types.d.ts +2 -4
- package/package.json +28 -32
- package/public/images/logo.png +0 -0
- package/readme.md +132 -150
- package/src/scss/beathers.min.scss +8 -8
package/readme.md
CHANGED
|
@@ -1,39 +1,18 @@
|
|
|
1
1
|
<div align="center">
|
|
2
|
-
|
|
3
|
-
<img src="./public/images/logo.png" alt="Beathers logo" width="700" height="312">
|
|
4
|
-
</a>
|
|
5
|
-
<h1 align="center">Beathers <small>v5.0.0</small></h1>
|
|
2
|
+
<img src="https://raw.githubusercontent.com/BhoenixStudio/Beathers/main/public/images/logo.png" alt="Beathers logo" width="700" height="312">
|
|
6
3
|
<p align="center">The Perfect Fusion of Strength and Featherlight Agility</p>
|
|
7
|
-
<br>
|
|
8
|
-
<br>
|
|
9
|
-
<p align='center'>
|
|
10
|
-
<a href="https://beathers.bhoenixstudio.com"><strong>Explore our documents</strong></a>
|
|
11
|
-
<br>
|
|
12
|
-
<a href="https://github.com/BhoenixStudio/Beathers/issues/new?template=bug_report.md">Report bug</a>
|
|
13
|
-
ยท
|
|
14
|
-
<a href="https://github.com/BhoenixStudio/Beathers/issues/new?template=feature_request.md">Request feature</a>
|
|
15
|
-
</p>
|
|
16
4
|
</div>
|
|
17
5
|
|
|
18
|
-
# Beathers
|
|
19
|
-
|
|
20
6
|
[](https://www.npmjs.com/package/beathers)
|
|
21
7
|
[](https://opensource.org/licenses/MIT)
|
|
22
8
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
Beathers is a lightweight, powerful SCSS library designed to accelerate your web development workflow. It offers a comprehensive suite of SCSS mixins, variables, and utility classes, enabling you to build responsive, visually appealing web applications with ease. Beathers focuses on providing reusable components, a flexible responsive grid system, and intuitive typography helpers, streamlining the process of creating modern user interfaces.
|
|
26
|
-
|
|
27
|
-
## Documentation
|
|
9
|
+
Beathers is a lightweight, powerful SCSS library designed to accelerate your web development workflow. **Everything is fully customizable** through a simple configuration file, allowing you to tailor every aspect to match your brand and requirements. It offers a comprehensive suite of SCSS mixins, variables, and utility classes, enabling you to build responsive, visually appealing web applications with complete design control.
|
|
28
10
|
|
|
29
|
-
|
|
30
|
-
The documentation provides comprehensive guides, usage examples, and detailed explanations of all available mixins, variables, and utility classes.
|
|
11
|
+
## Get Started
|
|
31
12
|
|
|
32
|
-
|
|
13
|
+
### Installation
|
|
33
14
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
```shell
|
|
15
|
+
```bash
|
|
37
16
|
npm install beathers
|
|
38
17
|
# or
|
|
39
18
|
yarn add beathers
|
|
@@ -41,148 +20,156 @@ yarn add beathers
|
|
|
41
20
|
pnpm add beathers
|
|
42
21
|
```
|
|
43
22
|
|
|
44
|
-
|
|
23
|
+
### Create Configuration File
|
|
45
24
|
|
|
46
|
-
|
|
47
|
-
2. **Create** a `beathers.configs.json` file with your theme settings
|
|
48
|
-
3. **Build** your theme: `beathers build`
|
|
49
|
-
4. **Import** the generated CSS/SCSS files in your project
|
|
25
|
+
Use the interactive CLI to create your theme configuration:
|
|
50
26
|
|
|
51
|
-
|
|
27
|
+
```bash
|
|
28
|
+
beathers init
|
|
29
|
+
```
|
|
52
30
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
31
|
+
This will prompt you to:
|
|
32
|
+
|
|
33
|
+
- Choose your configuration file format (JSON, JS, or TypeScript)
|
|
34
|
+
- Set up initial theme values like colors and typography
|
|
35
|
+
- Configure which features to enable/disable
|
|
36
|
+
|
|
37
|
+
### Build Your Theme
|
|
38
|
+
|
|
39
|
+
Generate your custom CSS from the configuration:
|
|
40
|
+
|
|
41
|
+
```bash
|
|
42
|
+
beathers build
|
|
63
43
|
```
|
|
64
44
|
|
|
65
|
-
|
|
45
|
+
### Import in Your Project
|
|
66
46
|
|
|
67
|
-
|
|
47
|
+
**CSS Import (Recommended):**
|
|
68
48
|
|
|
69
49
|
```css
|
|
70
|
-
/* Import the
|
|
50
|
+
/* Import the compiled CSS */
|
|
71
51
|
@import 'node_modules/beathers/dist/css/beathers.min.css';
|
|
72
|
-
|
|
73
|
-
/* Import icons separately */
|
|
74
|
-
@import 'node_modules/beathers/dist/css/beathers-icons.min.css';
|
|
75
52
|
```
|
|
76
53
|
|
|
77
|
-
|
|
54
|
+
**SCSS Import:**
|
|
78
55
|
|
|
79
56
|
```scss
|
|
80
57
|
// Import the entire library
|
|
81
58
|
@import 'node_modules/beathers/src/scss/beathers.min.scss';
|
|
82
59
|
|
|
83
|
-
// Or import
|
|
60
|
+
// Or import specific modules
|
|
84
61
|
@import 'node_modules/beathers/src/scss/functions/colors';
|
|
85
62
|
@import 'node_modules/beathers/src/scss/style/grid';
|
|
86
|
-
@import 'node_modules/beathers/src/scss/style/typographic';
|
|
87
|
-
|
|
88
|
-
// Import using @use (with variables)
|
|
89
|
-
@use 'node_modules/beathers/src/scss/beathers.min.scss' as beathers;
|
|
90
|
-
@use 'node_modules/beathers/src/scss/functions/colors' as colors;
|
|
91
|
-
|
|
92
|
-
// Or use @use with * to import without namespace
|
|
93
|
-
@use 'node_modules/beathers/src/scss/functions/colors' as *;
|
|
94
63
|
```
|
|
95
64
|
|
|
96
|
-
|
|
65
|
+
**JavaScript/Framework Import:**
|
|
97
66
|
|
|
98
67
|
```javascript
|
|
99
|
-
// Next.js
|
|
68
|
+
// Next.js, React, Vue, Angular
|
|
100
69
|
import 'beathers/dist/css/beathers.min.css'
|
|
70
|
+
```
|
|
101
71
|
|
|
102
|
-
|
|
103
|
-
import 'beathers/dist/css/beathers.min.css'
|
|
72
|
+
### Example Configuration
|
|
104
73
|
|
|
105
|
-
|
|
106
|
-
|
|
74
|
+
```json
|
|
75
|
+
{
|
|
76
|
+
"colors": {
|
|
77
|
+
"primary": { "light": "#007bff", "dark": "#0056b3" },
|
|
78
|
+
"success": { "light": "#28a745", "dark": "#20c997" }
|
|
79
|
+
},
|
|
80
|
+
"typography": {
|
|
81
|
+
"defaultFontFamilies": ["Inter", "system-ui", "sans-serif"]
|
|
82
|
+
},
|
|
83
|
+
"settings": {
|
|
84
|
+
"axisDivisions": 12,
|
|
85
|
+
"breakpoints": {
|
|
86
|
+
"sm": "640px",
|
|
87
|
+
"md": "768px",
|
|
88
|
+
"lg": "1024px"
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
|
107
92
|
```
|
|
108
93
|
|
|
109
|
-
## Configuration
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
###
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
|
124
|
-
|
|
|
125
|
-
|
|
|
126
|
-
| **
|
|
127
|
-
|
|
|
128
|
-
|
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
|
133
|
-
|
|
|
134
|
-
|
|
|
135
|
-
| `
|
|
136
|
-
| **
|
|
137
|
-
| `
|
|
138
|
-
| `
|
|
139
|
-
| `
|
|
140
|
-
| `
|
|
141
|
-
| `
|
|
142
|
-
| `
|
|
143
|
-
| `
|
|
144
|
-
| `
|
|
145
|
-
|
|
|
146
|
-
| `
|
|
147
|
-
| `
|
|
148
|
-
| `
|
|
149
|
-
| `
|
|
150
|
-
| `
|
|
151
|
-
| `
|
|
152
|
-
|
|
|
153
|
-
| `
|
|
154
|
-
| `
|
|
155
|
-
|
|
|
156
|
-
| `
|
|
157
|
-
| `
|
|
158
|
-
| `
|
|
159
|
-
| `
|
|
160
|
-
| `
|
|
161
|
-
| `
|
|
162
|
-
| `
|
|
163
|
-
| `
|
|
164
|
-
| `
|
|
165
|
-
| `
|
|
166
|
-
| `
|
|
167
|
-
| `
|
|
168
|
-
| `
|
|
169
|
-
| `
|
|
170
|
-
| `
|
|
171
|
-
| `
|
|
172
|
-
| `
|
|
173
|
-
| `
|
|
174
|
-
| `
|
|
175
|
-
| `
|
|
176
|
-
| `
|
|
177
|
-
| `
|
|
178
|
-
| `
|
|
179
|
-
| `
|
|
180
|
-
| `
|
|
181
|
-
| `
|
|
182
|
-
| `
|
|
183
|
-
| `
|
|
184
|
-
|
|
185
|
-
|
|
94
|
+
## Configuration
|
|
95
|
+
|
|
96
|
+
Beathers uses a configuration file to customize your theme. All options are optional and have sensible defaults.
|
|
97
|
+
|
|
98
|
+
### Configuration File Options
|
|
99
|
+
|
|
100
|
+
You can create one of these files in your project root:
|
|
101
|
+
|
|
102
|
+
- `beathers.configs.json` - JSON format
|
|
103
|
+
- `beathers.configs.js` - JavaScript format
|
|
104
|
+
- `beathers.configs.ts` - TypeScript format (with type safety)
|
|
105
|
+
|
|
106
|
+
### Key Configuration Sections
|
|
107
|
+
|
|
108
|
+
| Section | Description | Purpose |
|
|
109
|
+
| -------------- | -------------------------------------------------- | --------------------------------------------------- |
|
|
110
|
+
| **colors** | Define your color palette with light/dark variants | Brand colors, state colors (success, warning, etc.) |
|
|
111
|
+
| **typography** | Configure fonts, sizes, and text settings | Font families, weights, sizes, and formatting |
|
|
112
|
+
| **settings** | Layout and spacing configuration | Grid system, breakpoints, spacing values |
|
|
113
|
+
| **roles** | Enable/disable specific features | Control which utilities are generated |
|
|
114
|
+
|
|
115
|
+
### Common Configuration Properties
|
|
116
|
+
|
|
117
|
+
| Property | Type | Example |
|
|
118
|
+
| ------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
119
|
+
| **COLORS** |
|
|
120
|
+
| `color` <br /> Color variants (as json) | "color": { light: `#${string}$`, dark: `#${string}$` } | "primary": {"light": "#007bff", "dark": "#0056b3"} |
|
|
121
|
+
| **TYPOGRAPHY** |
|
|
122
|
+
| `defaultFontFamilies` <br /> Fallback fonts (as array) | `string[]` | ["system-ui", "sans-serif"] |
|
|
123
|
+
| `fontMainPath` <br /> Your fonts path | `string` | "/fonts/" |
|
|
124
|
+
| `fontFormat` <br /> Your fonts format | `string` | "woff2" |
|
|
125
|
+
| `fontWeights` <br /> Your fonts weights (as array) | `thin`,`extra-light`,`light`,`regular`,<br />`medium`,`semibold`,`bold`,`extra-bold`,`black` | ["regular", "medium", "bold"] |
|
|
126
|
+
| `fontStyles` <br /> Your fonts styles (as array) | `normal`,`italic`,`oblique` | ["normal"] |
|
|
127
|
+
| `fontSizes` <br /> Your fonts sizes (as json) | Record<`string`, `${number}px` `${number}rem` `${number}em`> | subtitle1: "16px" <br /> (Azvailable: h1, h2, h3, h4, h5, h6, subtitle1, subtitle2, button, body1, body2, caption, overline) <br /> (Note: You can add/remove) |
|
|
128
|
+
| `textTruncate` <br /> Text truncation | `number` | 3 |
|
|
129
|
+
| `fonts` <br /> Custom font definitions <br /> (Local/External) (as json) | {weights: same as `weights`, styles: same as `styles`, <br /> variants: {"fontName" :{title: `string`, unicode?: `string`, format?: `woff`, isLocal?: `boolean`, url?: `https://${string}`, `http://${string}`}}} | {variants: {"font1" :{title: "roboto"}}} |
|
|
130
|
+
| **SETTINGS** |
|
|
131
|
+
| `axisDivisions` <br /> Grid system divisions | `number` | 12 |
|
|
132
|
+
| `opacities` <br /> Available opacity values <br /> min: 0 - max: 100 (as array) | `number[]` | [10, 20] |
|
|
133
|
+
| `blurValues` <br /> Blur effect values (as array) | `number[]` | [2, 4, 8, 16, 32] |
|
|
134
|
+
| `insetValues` <br /> Inset values (as array) | `number[]` | [0, 5] |
|
|
135
|
+
| `bordersValue` <br /> Default border width (as array) | `number[]` | [1, 2] |
|
|
136
|
+
| `radiuses` <br /> Border radius values (as array) | `number[]` | [5,10,15] |
|
|
137
|
+
| `breakpoints` <br /> Responsive breakpoints (as json) | Record<(`sm` , `md` , `lg` , `xl` , `xxl`), `${number}px` `${number}rem` `${number}em`> | {"sm": "640px", "md": "768px"} |
|
|
138
|
+
| `wrappers` <br /> Container widths (as json) | Record<(`sm` , `md` , `lg` , `xl` , `xxl`), { width: `${number}px` `${number}rem` `${number}em`; padding?: `${number}px` `${number}rem` `${number}em`}> | {"sm": {"width": "540px", "padding":"15px"}} |
|
|
139
|
+
| `guttersValues` <br /> Spacing values (as json) | Record<(`auto`, `number`), `${number}px` `${number}rem` `${number}em`> | {"auto": "1rem", 1: "0.25rem"} |
|
|
140
|
+
| **ROLES** |
|
|
141
|
+
| `useMediaQueries` <br /> Enable responsive utilities | `boolean` | `true` |
|
|
142
|
+
| `useIcons` <br /> Include icon styles | `boolean` | `true` |
|
|
143
|
+
| `useFontFamilies` <br /> Include font family utilities | `boolean` | `true` |
|
|
144
|
+
| `useFontSizes` <br /> Include font size utilities | `boolean` | `true` |
|
|
145
|
+
| `useFontShapes` <br /> Include font style utilities | `boolean` | `true` |
|
|
146
|
+
| `useTextAligns` <br /> Include text alignment utilities | `boolean` | `true` |
|
|
147
|
+
| `useTextTruncate` <br /> Include text truncation utilities | `boolean` | `true` |
|
|
148
|
+
| `useColors` <br /> Include color utilities | `boolean` | `true` |
|
|
149
|
+
| `useColorsOpacities` <br /> Include color opacity utilities | `boolean` | `true` |
|
|
150
|
+
| `useColorsLightMode` <br /> Include light mode colors | `boolean` | `true` |
|
|
151
|
+
| `useColorsDarkMode` <br /> Include dark mode colors | `boolean` | `true` |
|
|
152
|
+
| `useCurrentColors` <br /> Include currentColor utilities | `boolean` | `true` |
|
|
153
|
+
| `useRootColors` <br /> Include CSS custom properties | `boolean` | `true` |
|
|
154
|
+
| `useGrid` <br /> Include grid system | `boolean` | `true` |
|
|
155
|
+
| `useFlex` <br /> Include flexbox utilities | `boolean` | `true` |
|
|
156
|
+
| `useTransitions` <br /> Include transition utilities | `boolean` | `true` |
|
|
157
|
+
| `useWrappers` <br /> Include container utilities | `boolean` | `true` |
|
|
158
|
+
| `useShadows` <br /> Include shadow utilities | `boolean` | `true` |
|
|
159
|
+
| `useDisplays` <br /> Include display utilities | `boolean` | `true` |
|
|
160
|
+
| `useOverflows` <br /> Include overflow utilities | `boolean` | `true` |
|
|
161
|
+
| `useOpacities` <br /> Include opacity utilities | `boolean` | `true` |
|
|
162
|
+
| `useBlur` <br /> Include blur utilities | `boolean` | `true` |
|
|
163
|
+
| `useObjectFits` <br /> Include object-fit utilities | `boolean` | `true` |
|
|
164
|
+
| `usePositions` <br /> Include positioning utilities | `boolean` | `true` |
|
|
165
|
+
| `useInsets` <br /> Include inset utilities | `boolean` | `true` |
|
|
166
|
+
| `useSizes` <br /> Include sizing utilities | `boolean` | `true` |
|
|
167
|
+
| `useGutters` <br /> Include spacing utilities | `boolean` | `true` |
|
|
168
|
+
| `useBorders` <br /> Include border utilities | `boolean` | `true` |
|
|
169
|
+
| `useTextBorders` <br /> Include text border utilities | `boolean` | `true` |
|
|
170
|
+
| `useRadius` <br /> Include border radius utilities | `boolean` | `true` |
|
|
171
|
+
|
|
172
|
+
### TypeScript Configuration Example
|
|
186
173
|
|
|
187
174
|
```typescript
|
|
188
175
|
// beathers.configs.ts
|
|
@@ -221,15 +208,10 @@ export default {
|
|
|
221
208
|
} satisfies Theme
|
|
222
209
|
```
|
|
223
210
|
|
|
224
|
-
##
|
|
225
|
-
|
|
226
|
-
The Beathers Library is licensed under the MIT License. See the [LICENSE](LICENSE) file for more information.
|
|
211
|
+
## Contact & Support
|
|
227
212
|
|
|
228
|
-
|
|
213
|
+
[](https://bhoenixstudio.com/beathers)
|
|
229
214
|
|
|
230
|
-
|
|
215
|
+
[](https://bhoenixstudio.com/beathers)
|
|
231
216
|
|
|
232
|
-
-
|
|
233
|
-
- ๐ Website: [beathers.bhoenixstudio.com](https://beathers.bhoenixstudio.com)
|
|
234
|
-
- ๐ฌ GitHub Issues: [Report bugs or request features](https://github.com/BhoenixStudio/Beathers/issues)
|
|
235
|
-
- ๐ Documentation: [Full documentation](https://beathers.bhoenixstudio.com)
|
|
217
|
+
[](mailto:contact@bhoenixstudio.com)
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* Beathers v5.
|
|
2
|
+
* Beathers v5.1.0 (https://bhoenixstudio.com/beathers)
|
|
3
3
|
* Copyright 2020-2025 Bhoenix Studio
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
-
@use
|
|
7
|
-
|
|
6
|
+
@use './variables';
|
|
7
|
+
|
|
8
8
|
// Style ----- ----- ----- -----
|
|
9
|
-
@use
|
|
10
|
-
@use
|
|
11
|
-
@use
|
|
12
|
-
@use
|
|
13
|
-
@use
|
|
9
|
+
@use './settings/resets';
|
|
10
|
+
@use './style/colors';
|
|
11
|
+
@use './style/typographic';
|
|
12
|
+
@use './style/grid';
|
|
13
|
+
@use './style/shaping';
|