beathers 5.7.6 → 5.9.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.
Files changed (48) hide show
  1. package/.prettierrc.js +10 -8
  2. package/CHANGELOG +305 -274
  3. package/css/beathers.min.css +2 -2
  4. package/css/beathers.min.css.map +1 -1
  5. package/docs/colors.md +250 -250
  6. package/docs/grid-system.md +130 -130
  7. package/docs/shaping.md +272 -272
  8. package/docs/typography.md +124 -124
  9. package/package.json +107 -105
  10. package/readme.md +301 -301
  11. package/scripts/commands/build.js +4 -4
  12. package/scripts/commands/clean.d.ts +2 -0
  13. package/scripts/commands/clean.d.ts.map +1 -0
  14. package/scripts/commands/clean.js +22 -0
  15. package/scripts/commands/fonts.d.ts.map +1 -1
  16. package/scripts/commands/fonts.js +4 -3
  17. package/scripts/commands/index.js +8 -8
  18. package/scripts/commands/init.js +1 -1
  19. package/scripts/commands/version-update.d.ts +2 -0
  20. package/scripts/commands/version-update.d.ts.map +1 -0
  21. package/scripts/commands/version-update.js +122 -0
  22. package/scripts/commands/version.js +1 -1
  23. package/scripts/helpers/BuildScssVariables.d.ts +1 -1
  24. package/scripts/helpers/BuildScssVariables.d.ts.map +1 -1
  25. package/scripts/helpers/BuildScssVariables.js +20 -10
  26. package/scripts/helpers/LoadUserConfigs.js +1 -1
  27. package/scripts/helpers/ReadDefaultValues.js +20 -20
  28. package/scripts/types.d.ts +1 -1
  29. package/scripts/types.d.ts.map +1 -1
  30. package/scss/_variables.scss +19 -19
  31. package/scss/beathers.min.scss +15 -14
  32. package/scss/functions/_colors.scss +242 -230
  33. package/scss/functions/_mediaQueries.scss +140 -136
  34. package/scss/functions/_others.scss +113 -79
  35. package/scss/functions/_typographic.scss +133 -129
  36. package/scss/functions/_validations.scss +293 -251
  37. package/scss/settings/_configs.scss +270 -270
  38. package/scss/settings/_defaults.scss +209 -214
  39. package/scss/settings/_index.scss +90 -90
  40. package/scss/style/_button.scss +103 -101
  41. package/scss/style/_colors.scss +156 -146
  42. package/scss/style/_dialog.scss +147 -146
  43. package/scss/style/_glass.scss +98 -80
  44. package/scss/style/_grid.scss +121 -95
  45. package/scss/style/_loader.scss +74 -62
  46. package/scss/style/_resets.scss +176 -168
  47. package/scss/style/_shaping.scss +561 -439
  48. package/scss/style/_typographic.scss +400 -345
package/docs/grid-system.md CHANGED
@@ -1,130 +1,130 @@
1
- # Grid System Documentation
2
-
3
- > Simple guide to using grid and flexbox utilities in Beathers CSS framework
4
-
5
- ## Table of Contents
6
-
7
- - [CSS Grid](#css-grid)
8
- - [Flexbox](#flexbox)
9
-
10
- ---
11
-
12
- ## CSS Grid
13
-
14
- ### Normal State
15
-
16
- ```html
17
- <!-- Grid Container -->
18
- <div class="grid">
19
- <div>Column 1</div>
20
- <div>Column 2</div>
21
- <div>Column 3</div>
22
- </div>
23
-
24
- <div class="grid cols:12">
25
- <div class="col:4">1/3 width</div>
26
- <div class="col:4">1/3 width</div>
27
- <div class="col:4">1/3 width</div>
28
- </div>
29
-
30
- <div class="grid cols:12">
31
- <div class="col:6">Half width</div>
32
- <div class="col:6">Half width</div>
33
- </div>
34
-
35
- <div class="grid cols:12">
36
- <div class="col:4">4 columns</div>
37
- <div class="col:8">8 columns</div>
38
- <div class="col:3">3 columns</div>
39
- <div class="col:9">9 columns</div>
40
- <div class="col:auto">Auto width</div>
41
- </div>
42
- ```
43
-
44
- ### Row System
45
-
46
- ```html
47
- <div class="grid rows:12">
48
- <div class="row:4">1/3 width</div>
49
- <div class="row:4">1/3 width</div>
50
- <div class="row:auto">Auto height</div>
51
- </div>
52
- ```
53
-
54
- ### Responsive Grid
55
-
56
- ```html
57
- <div class="grid cols:1 md:cols:2 lg:cols:4">
58
- <div>Item 1</div>
59
- <div>Item 2</div>
60
- <div>Item 3</div>
61
- <div>Item 4</div>
62
- </div>
63
-
64
- <div class="grid cols:12">
65
- <div class="col:12 md:col:6 lg:col:4">Responsive column</div>
66
- <div class="col:12 md:col:6 lg:col:8">Responsive column</div>
67
- </div>
68
- ```
69
-
70
- ---
71
-
72
- ## Flexbox
73
-
74
- ### Normal State
75
-
76
- ```html
77
- <!-- Basic Flex Container -->
78
- <div class="flex">
79
- <div>Flex item 1</div>
80
- <div>Flex item 2</div>
81
- <div>Flex item 3</div>
82
- </div>
83
-
84
- <!-- Flex with direction -->
85
- <div class="flex row">Horizontal layout</div>
86
- <div class="flex column">Vertical layout</div>
87
- <div class="flex row-reverse">Reverse horizontal</div>
88
- <div class="flex column-reverse">Reverse vertical</div>
89
- ```
90
-
91
- ### Flex Wrap
92
-
93
- ```html
94
- <div class="flex wrap">Wrapping flex container</div>
95
- <div class="flex nowrap">Non-wrapping flex container</div>
96
- ```
97
-
98
- ### Flex Wrapper System
99
-
100
- ```html
101
- <!-- Auto-sized flex children -->
102
- <div class="flex flex-wrapper row cols:auto">
103
- <div>Auto width item</div>
104
- <div>Auto width item</div>
105
- <div>Auto width item</div>
106
- </div>
107
-
108
- <!-- Equal columns with flex -->
109
- <div class="flex flex-wrapper row cols:3">
110
- <div>1/3 width</div>
111
- <div>1/3 width</div>
112
- <div>1/3 width</div>
113
- </div>
114
- ```
115
-
116
- ### Responsive Flexbox
117
-
118
- ```html
119
- <div class="flex column md:row">
120
- <div>Item 1</div>
121
- <div>Item 2</div>
122
- </div>
123
-
124
- <div class="flex flex-wrapper row cols:1 md:cols:2 lg:cols:4">
125
- <div>Responsive flex item</div>
126
- <div>Responsive flex item</div>
127
- <div>Responsive flex item</div>
128
- <div>Responsive flex item</div>
129
- </div>
130
- ```
1
+ # Grid System Documentation
2
+
3
+ > Simple guide to using grid and flexbox utilities in Beathers CSS framework
4
+
5
+ ## Table of Contents
6
+
7
+ - [CSS Grid](#css-grid)
8
+ - [Flexbox](#flexbox)
9
+
10
+ ---
11
+
12
+ ## CSS Grid
13
+
14
+ ### Normal State
15
+
16
+ ```html
17
+ <!-- Grid Container -->
18
+ <div class="grid">
19
+ <div>Column 1</div>
20
+ <div>Column 2</div>
21
+ <div>Column 3</div>
22
+ </div>
23
+
24
+ <div class="grid cols:12">
25
+ <div class="col:4">1/3 width</div>
26
+ <div class="col:4">1/3 width</div>
27
+ <div class="col:4">1/3 width</div>
28
+ </div>
29
+
30
+ <div class="grid cols:12">
31
+ <div class="col:6">Half width</div>
32
+ <div class="col:6">Half width</div>
33
+ </div>
34
+
35
+ <div class="grid cols:12">
36
+ <div class="col:4">4 columns</div>
37
+ <div class="col:8">8 columns</div>
38
+ <div class="col:3">3 columns</div>
39
+ <div class="col:9">9 columns</div>
40
+ <div class="col:auto">Auto width</div>
41
+ </div>
42
+ ```
43
+
44
+ ### Row System
45
+
46
+ ```html
47
+ <div class="grid rows:12">
48
+ <div class="row:4">1/3 width</div>
49
+ <div class="row:4">1/3 width</div>
50
+ <div class="row:auto">Auto height</div>
51
+ </div>
52
+ ```
53
+
54
+ ### Responsive Grid
55
+
56
+ ```html
57
+ <div class="grid cols:1 md:cols:2 lg:cols:4">
58
+ <div>Item 1</div>
59
+ <div>Item 2</div>
60
+ <div>Item 3</div>
61
+ <div>Item 4</div>
62
+ </div>
63
+
64
+ <div class="grid cols:12">
65
+ <div class="col:12 md:col:6 lg:col:4">Responsive column</div>
66
+ <div class="col:12 md:col:6 lg:col:8">Responsive column</div>
67
+ </div>
68
+ ```
69
+
70
+ ---
71
+
72
+ ## Flexbox
73
+
74
+ ### Normal State
75
+
76
+ ```html
77
+ <!-- Basic Flex Container -->
78
+ <div class="flex">
79
+ <div>Flex item 1</div>
80
+ <div>Flex item 2</div>
81
+ <div>Flex item 3</div>
82
+ </div>
83
+
84
+ <!-- Flex with direction -->
85
+ <div class="flex row">Horizontal layout</div>
86
+ <div class="flex column">Vertical layout</div>
87
+ <div class="flex row-reverse">Reverse horizontal</div>
88
+ <div class="flex column-reverse">Reverse vertical</div>
89
+ ```
90
+
91
+ ### Flex Wrap
92
+
93
+ ```html
94
+ <div class="flex wrap">Wrapping flex container</div>
95
+ <div class="flex nowrap">Non-wrapping flex container</div>
96
+ ```
97
+
98
+ ### Flex Wrapper System
99
+
100
+ ```html
101
+ <!-- Auto-sized flex children -->
102
+ <div class="flex flex-wrapper row cols:auto">
103
+ <div>Auto width item</div>
104
+ <div>Auto width item</div>
105
+ <div>Auto width item</div>
106
+ </div>
107
+
108
+ <!-- Equal columns with flex -->
109
+ <div class="flex flex-wrapper row cols:3">
110
+ <div>1/3 width</div>
111
+ <div>1/3 width</div>
112
+ <div>1/3 width</div>
113
+ </div>
114
+ ```
115
+
116
+ ### Responsive Flexbox
117
+
118
+ ```html
119
+ <div class="flex column md:row">
120
+ <div>Item 1</div>
121
+ <div>Item 2</div>
122
+ </div>
123
+
124
+ <div class="flex flex-wrapper row cols:1 md:cols:2 lg:cols:4">
125
+ <div>Responsive flex item</div>
126
+ <div>Responsive flex item</div>
127
+ <div>Responsive flex item</div>
128
+ <div>Responsive flex item</div>
129
+ </div>
130
+ ```