beercss 3.13.3 → 4.0.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.
Files changed (39) hide show
  1. package/README.md +86 -83
  2. package/dist/cdn/beer.css +1249 -137
  3. package/dist/cdn/beer.custom-element.js +2 -3
  4. package/dist/cdn/beer.custom-element.min.js +1 -1
  5. package/dist/cdn/beer.js +20 -19
  6. package/dist/cdn/beer.min.css +1 -1
  7. package/dist/cdn/beer.min.js +1 -1
  8. package/dist/cdn/beer.scoped.css +2544 -1428
  9. package/dist/cdn/beer.scoped.min.css +2 -1
  10. package/package.json +2 -2
  11. package/src/cdn/beer.css +4 -2
  12. package/src/cdn/beer.ts +5 -5
  13. package/src/cdn/customElement.js +2 -3
  14. package/src/cdn/elements/bars.css +8 -8
  15. package/src/cdn/elements/buttons.css +2 -3
  16. package/src/cdn/elements/chips.css +0 -1
  17. package/src/cdn/elements/dialogs.css +2 -8
  18. package/src/cdn/elements/expansions.css +10 -3
  19. package/src/cdn/elements/fields.css +11 -12
  20. package/src/cdn/elements/icons.css +1 -1
  21. package/src/cdn/elements/lists.css +6 -2
  22. package/src/cdn/elements/mainLayouts.css +2 -2
  23. package/src/cdn/elements/media.css +2 -2
  24. package/src/cdn/elements/menus.css +4 -4
  25. package/src/cdn/elements/navigations.css +7 -8
  26. package/src/cdn/elements/progress.css +4 -4
  27. package/src/cdn/elements/progress.ts +11 -9
  28. package/src/cdn/elements/selections.css +3 -3
  29. package/src/cdn/elements/sliders.css +15 -19
  30. package/src/cdn/elements/sliders.ts +5 -5
  31. package/src/cdn/helpers/forms.css +1 -1
  32. package/src/cdn/helpers/ripples.ts +1 -1
  33. package/src/cdn/helpers/scrolls.css +0 -1
  34. package/src/cdn/helpers/typography.css +31 -30
  35. package/src/cdn/settings/fonts.css +8 -8
  36. package/src/cdn/settings/globals.css +37 -0
  37. package/src/cdn/{helpers → settings}/reset.css +5 -23
  38. /package/src/cdn/{helpers → settings}/theme.css +0 -0
  39. /package/src/cdn/{helpers → settings}/theme.ts +0 -0
package/README.md CHANGED
@@ -4,7 +4,7 @@
4
4
  <p align="center">
5
5
  <a href="https://github.com/beercss/beercss/blob/main/LICENSE"><img src="https://img.shields.io/github/license/beercss/beercss" alt="License"></a>
6
6
  <a href="https://github.com/beercss/beercss"><img src="https://img.shields.io/jsdelivr/npm/hy/beercss" alt="Downloads"></a>
7
- <a href="https://bundlephobia.com/package/beercss@3.13.3" target="_blank"><img src="https://img.shields.io/bundlephobia/minzip/beercss@3.13.3" alt="minzipped size"></a>
7
+ <a href="https://bundlephobia.com/package/beercss@4.0.0" target="_blank"><img src="https://img.shields.io/bundlephobia/minzip/beercss@4.0.0" alt="minzipped size"></a>
8
8
  <a href="https://www.npmjs.com/package/beercss"><img src="https://img.shields.io/npm/v/beercss" alt="Version"></a>
9
9
  <a href="https://github.com/beercss/beercss/pulls"><img src="https://img.shields.io/github/issues-pr/beercss/beercss" alt="Pull Request"></a>
10
10
  <a href="https://github.com/beercss/beercss/issues"><img src="https://img.shields.io/github/issues/beercss/beercss" alt="Issues"></a>
@@ -30,6 +30,7 @@ Beer CSS is an MIT-licensed open source project with its ongoing development mad
30
30
 
31
31
  <p align="center">
32
32
  <a href="https://github.com/sponsors/beercss">Github Sponsors</a><br /><br />
33
+ <img src="https://images.weserv.nl/?url=avatars.githubusercontent.com/u/15235526?s=56&v=4&mask=circle&maxage=7d" alt="Sponsors">
33
34
  <img src="https://images.weserv.nl/?url=avatars.githubusercontent.com/u/12303444?s=56&v=4&mask=circle&maxage=7d" alt="Sponsors">
34
35
  <img src="https://images.weserv.nl/?url=avatars.githubusercontent.com/u/40445940?s=56&v=4&mask=circle&maxage=7d" alt="Sponsors">
35
36
  <img src="https://images.weserv.nl/?url=avatars.githubusercontent.com/u/74856856?s=56&v=4&mask=circle&maxage=7d" alt="Sponsors">
@@ -49,6 +50,8 @@ Beer CSS is an MIT-licensed open source project with its ongoing development mad
49
50
  - 🎯 Highly focused on DX.
50
51
  - 🚫 No build steps, configurations or dependencies.
51
52
  - ✨ Build modern interfaces without any custom CSS.
53
+ - ✅ [HTML compliance](https://validator.w3.org/nu/?doc=https://www.beercss.com)
54
+ - 💯 Google Lighthouse friendly
52
55
 
53
56
  # A lightweight beer
54
57
 
@@ -58,7 +61,7 @@ Let's be honest, in the ever-evolving world of web development, we're all lookin
58
61
 
59
62
  # The principles
60
63
 
61
- This project was guided by the **"Germany Beer Purity Law"** or **"Reinheitsgebot"** created in 1516. This law states that beer should only be brewed with the following ingredients: **water**, **barley malt** and **hops**. Only 3 ingredients. Exciting, right? So we thinking about It and our 3 ingredients are: **settings**, **elements** and **helpers**. This sounds weird at first time, because It's not BEM, OOCSS, SMACSS, ITCSS, "Utility first" or any other approach. Our approach doesn't avoid some bad practices, but is lightweight, tasty and pure like a beer. Just try it and feel it! 😁
64
+ This project was guided by the **"Germany Beer Purity Law"** or **"Reinheitsgebot"** created in 1516. This law states that beer should only be brewed with the following ingredients: **water**, **barley malt** and **hops**. Only 3 ingredients. Exciting, right? So we thinking about It and our 3 ingredients are: [Settings](docs/SETTINGS.md), [Elements](docs/ELEMENTS.md) and [Helpers](docs/HELPERS.md). This sounds weird at first time, because It's not BEM, OOCSS, SMACSS, ITCSS, "Utility first" or any other approach. Our approach doesn't avoid some bad practices, but is lightweight, tasty and pure like a beer. Just try it and feel it! 😁
62
65
 
63
66
  ```
64
67
  | SETTINGS | // The settings affects all document
@@ -75,72 +78,14 @@ This project was guided by the **"Germany Beer Purity Law"** or **"Reinheitsgebo
75
78
  |---------------|
76
79
  ```
77
80
 
78
- ### ✅ DO:
79
-
80
- ```
81
- // 1 setting to 1 document
82
- <body class="dark|light">...</body>
83
-
84
- // 1 element to N helpers
85
- <element class="helper helper">...</element>
86
- <div class="element helper helper">...</div>
87
-
88
- // nav elements before all others
89
- <body>
90
- <nav class="left|right|top|bottom">...</nav>
91
- ...
92
- </body>
93
-
94
- <div id="app">
95
- <nav class="left|right|top|bottom">...</nav>
96
- ...
97
- </div>
98
-
99
- // write css like this
100
- .element.helper {...}
101
- .element > .element {...}
102
- .element > .helper {...}
103
- ```
104
-
105
- ### 🚫 DON'T:
106
-
107
- ```
108
- // N elements to 1 tag
109
- <div class="element element helper">...</div>
110
- <element class="element helper">...</element>
111
-
112
- // element with dependencies
113
- <div class="element">
114
- <div class="element-header">...</div>
115
- <div class="element-content">...</div>
116
- <div class="element-footer">...</div>
117
- </div>
118
-
119
- // nav elements after all others
120
- <body>
121
- ...
122
- <nav class="left|right|top|bottom">...</nav>
123
- </body>
124
-
125
- <div id="app">
126
- ...
127
- <nav class="left|right|top|bottom">...</nav>
128
- </div>
129
-
130
- // write css like this
131
- .element.element {...}
132
- .element .element {...}
133
- .element .helper {...}
134
- ```
135
-
136
81
  # Get started
137
82
 
138
83
  ### DEFAULT VERSION
139
84
 
140
85
  ```html
141
- <link href="https://cdn.jsdelivr.net/npm/beercss@3.13.3/dist/cdn/beer.min.css" rel="stylesheet" />
142
- <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.13.3/dist/cdn/beer.min.js"></script>
143
- <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
86
+ <link href="https://cdn.jsdelivr.net/npm/beercss@4.0.0/dist/cdn/beer.min.css" rel="stylesheet" />
87
+ <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.0/dist/cdn/beer.min.js"></script>
88
+ <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.4/dist/cdn/material-dynamic-colors.min.js"></script>
144
89
  ```
145
90
 
146
91
  ```js
@@ -157,9 +102,9 @@ import "material-dynamic-colors";
157
102
  Applied on child elements of `<* class="beer">...</*>`.
158
103
 
159
104
  ```html
160
- <link href="https://cdn.jsdelivr.net/npm/beercss@3.13.3/dist/cdn/beer.scoped.min.css" rel="stylesheet" />
161
- <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.13.3/dist/cdn/beer.min.js"></script>
162
- <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
105
+ <link href="https://cdn.jsdelivr.net/npm/beercss@4.0.0/dist/cdn/beer.scoped.min.css" rel="stylesheet" />
106
+ <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.0/dist/cdn/beer.min.js"></script>
107
+ <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.4/dist/cdn/material-dynamic-colors.min.js"></script>
163
108
  ```
164
109
 
165
110
  ```js
@@ -176,8 +121,8 @@ import "material-dynamic-colors";
176
121
  Applied on child elements of `<beer-css>...</beer-css>`.
177
122
 
178
123
  ```html
179
- <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.13.3/dist/cdn/beer.custom-element.min.js"></script>
180
- <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
124
+ <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.0/dist/cdn/beer.custom-element.min.js"></script>
125
+ <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.4/dist/cdn/material-dynamic-colors.min.js"></script>
181
126
  ```
182
127
 
183
128
  ```js
@@ -192,7 +137,7 @@ import "material-dynamic-colors";
192
137
 
193
138
  ### LOCAL CDN VERSION
194
139
 
195
- Download all files from CDN https://cdn.jsdelivr.net/npm/beercss@3.13.3/dist/cdn/ and https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/. Now put the files inside a new folder in your project (like `/beercss` for example):
140
+ Download all files from CDN https://cdn.jsdelivr.net/npm/beercss@4.0.0/dist/cdn/ and https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.4/dist/cdn/. Now put the files inside a new folder in your project (like `/beercss` for example):
196
141
 
197
142
  ```html
198
143
  <link href="/beercss/beer.min.css" rel="stylesheet" />
@@ -212,9 +157,9 @@ You can use this html to setup your project. See on [Codepen](https://codepen.io
212
157
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
213
158
  <meta name="google" content="notranslate">
214
159
  <title>Hello world</title>
215
- <link href="https://cdn.jsdelivr.net/npm/beercss@3.13.3/dist/cdn/beer.min.css" rel="stylesheet">
216
- <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.13.3/dist/cdn/beer.min.js"></script>
217
- <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
160
+ <link href="https://cdn.jsdelivr.net/npm/beercss@4.0.0/dist/cdn/beer.min.css" rel="stylesheet">
161
+ <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.0/dist/cdn/beer.min.js"></script>
162
+ <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.4/dist/cdn/material-dynamic-colors.min.js"></script>
218
163
  </head>
219
164
  <body class="dark">
220
165
  <nav class="left max l">
@@ -226,32 +171,32 @@ You can use this html to setup your project. See on [Codepen](https://codepen.io
226
171
  </header>
227
172
  <a>
228
173
  <i>home</i>
229
- <div>Home</div>
174
+ <span>Home</span>
230
175
  </a>
231
176
  <a>
232
177
  <i>search</i>
233
- <div>Search</div>
178
+ <span>Search</span>
234
179
  </a>
235
180
  <a>
236
181
  <i>share</i>
237
- <div>Share</div>
182
+ <span>Share</span>
238
183
  </a>
239
184
  <a>
240
185
  <i>more_vert</i>
241
- <div>More</div>
186
+ <span>More</span>
242
187
  </a>
243
188
  <div class="divider"></div>
244
189
  <a>
245
190
  <i>widgets</i>
246
- <div>Widgets</div>
191
+ <span>Widgets</span>
247
192
  </a>
248
193
  <a>
249
194
  <i>chat</i>
250
- <div>Chat</div>
195
+ <span>Chat</span>
251
196
  </a>
252
197
  <a>
253
198
  <i>help</i>
254
- <div>Help</div>
199
+ <span>Help</span>
255
200
  </a>
256
201
  </nav>
257
202
 
@@ -261,19 +206,19 @@ You can use this html to setup your project. See on [Codepen](https://codepen.io
261
206
  </header>
262
207
  <a>
263
208
  <i>home</i>
264
- <div>Home</div>
209
+ <span>Home</span>
265
210
  </a>
266
211
  <a>
267
212
  <i>search</i>
268
- <div>Search</div>
213
+ <span>Search</span>
269
214
  </a>
270
215
  <a>
271
216
  <i>share</i>
272
- <div>Share</div>
217
+ <span>Share</span>
273
218
  </a>
274
219
  <a>
275
220
  <i>more_vert</i>
276
- <div>More</div>
221
+ <span>More</span>
277
222
  </a>
278
223
  </nav>
279
224
 
@@ -303,6 +248,64 @@ You can use this html to setup your project. See on [Codepen](https://codepen.io
303
248
 
304
249
  **We recommend using the material-dynamic-colors only when your app needs to change theme at runtime.**
305
250
 
251
+ ### ✅ DO:
252
+
253
+ ```
254
+ // 1 setting to 1 document
255
+ <body class="dark|light">...</body>
256
+
257
+ // 1 element to N helpers
258
+ <element class="helper helper">...</element>
259
+ <div class="element helper helper">...</div>
260
+
261
+ // 1 main element per document
262
+ <...>
263
+ <main></main>
264
+ </...>
265
+
266
+ // inline/block elements in block elements
267
+ <div>
268
+ <div></div>
269
+ <span></span>
270
+ </div>
271
+
272
+ // write css like this
273
+ .element.helper {...}
274
+ .element > .element {...}
275
+ .element > .helper {...}
276
+ ```
277
+
278
+ ### 🚫 DON'T:
279
+
280
+ ```
281
+ // N elements to 1 tag
282
+ <div class="element element helper">...</div>
283
+ <element class="element helper">...</element>
284
+
285
+ // element with dependencies
286
+ <div class="element">
287
+ <div class="element-header">...</div>
288
+ <div class="element-content">...</div>
289
+ <div class="element-footer">...</div>
290
+ </div>
291
+
292
+ // N main elements per document
293
+ <...>
294
+ <main></main>
295
+ <main></main>
296
+ </...>
297
+
298
+ // block elements in inline elements
299
+ <span>
300
+ <div></div>
301
+ </span>
302
+
303
+ // write css like this
304
+ .element.element {...}
305
+ .element .element {...}
306
+ .element .helper {...}
307
+ ```
308
+
306
309
  # Documentation
307
310
 
308
311
  Complete documentation and examples available at: