beercss 3.13.3 → 4.0.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 (39) hide show
  1. package/README.md +92 -88
  2. package/dist/cdn/beer.css +1248 -140
  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 +2542 -1430
  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 -5
  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.1" target="_blank"><img src="https://img.shields.io/bundlephobia/minzip/beercss@4.0.1" 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
+ - ✅ 100% valid HTML markup
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.1/dist/cdn/beer.min.css" rel="stylesheet" />
87
+ <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.1/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.1/dist/cdn/beer.scoped.min.css" rel="stylesheet" />
106
+ <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.1/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.1/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.1/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" />
@@ -205,75 +150,76 @@ Download all files from CDN https://cdn.jsdelivr.net/npm/beercss@3.13.3/dist/cdn
205
150
  You can use this html to setup your project. See on [Codepen](https://codepen.io/leo-bnu/pen/yLKLPxj). More about in [Main layout](docs/MAIN_LAYOUT.md).
206
151
 
207
152
  ```html
208
- <html>
153
+ <!DOCTYPE html>
154
+ <html lang="en">
209
155
  <head>
210
156
  <meta charset="UTF-8">
211
157
  <meta name="viewport" content="width=device-width, initial-scale=1">
212
158
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
213
159
  <meta name="google" content="notranslate">
214
160
  <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>
161
+ <link href="https://cdn.jsdelivr.net/npm/beercss@4.0.1/dist/cdn/beer.min.css" rel="stylesheet">
162
+ <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.1/dist/cdn/beer.min.js"></script>
163
+ <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.4/dist/cdn/material-dynamic-colors.min.js"></script>
218
164
  </head>
219
165
  <body class="dark">
220
166
  <nav class="left max l">
221
167
  <header>
222
168
  <nav>
223
- <img src="https://www.beercss.com/favicon.png" class="circle extra">
169
+ <img alt="logo" src="https://www.beercss.com/favicon.png" class="circle extra">
224
170
  <h6>Cheers</h6>
225
171
  </nav>
226
172
  </header>
227
173
  <a>
228
174
  <i>home</i>
229
- <div>Home</div>
175
+ <span>Home</span>
230
176
  </a>
231
177
  <a>
232
178
  <i>search</i>
233
- <div>Search</div>
179
+ <span>Search</span>
234
180
  </a>
235
181
  <a>
236
182
  <i>share</i>
237
- <div>Share</div>
183
+ <span>Share</span>
238
184
  </a>
239
185
  <a>
240
186
  <i>more_vert</i>
241
- <div>More</div>
187
+ <span>More</span>
242
188
  </a>
243
189
  <div class="divider"></div>
244
190
  <a>
245
191
  <i>widgets</i>
246
- <div>Widgets</div>
192
+ <span>Widgets</span>
247
193
  </a>
248
194
  <a>
249
195
  <i>chat</i>
250
- <div>Chat</div>
196
+ <span>Chat</span>
251
197
  </a>
252
198
  <a>
253
199
  <i>help</i>
254
- <div>Help</div>
200
+ <span>Help</span>
255
201
  </a>
256
202
  </nav>
257
203
 
258
204
  <nav class="left m">
259
205
  <header>
260
- <img src="https://www.beercss.com/favicon.png" class="circle extra">
206
+ <img alt="logo" src="https://www.beercss.com/favicon.png" class="circle extra">
261
207
  </header>
262
208
  <a>
263
209
  <i>home</i>
264
- <div>Home</div>
210
+ <span>Home</span>
265
211
  </a>
266
212
  <a>
267
213
  <i>search</i>
268
- <div>Search</div>
214
+ <span>Search</span>
269
215
  </a>
270
216
  <a>
271
217
  <i>share</i>
272
- <div>Share</div>
218
+ <span>Share</span>
273
219
  </a>
274
220
  <a>
275
221
  <i>more_vert</i>
276
- <div>More</div>
222
+ <span>More</span>
277
223
  </a>
278
224
  </nav>
279
225
 
@@ -293,9 +239,9 @@ You can use this html to setup your project. See on [Codepen](https://codepen.io
293
239
  </nav>
294
240
 
295
241
  <main class="responsive">
296
- <img src="https://www.beercss.com/beer-and-woman.svg" class="responsive round medium-height">
242
+ <img alt="beer and woman" src="https://www.beercss.com/beer-and-woman.svg" class="responsive round medium-height">
297
243
  <h3>Welcome</h3>
298
- <h5>The beer is ready!</h5>
244
+ <h4>The beer is ready!</h4>
299
245
  </main>
300
246
  </body>
301
247
  </html>
@@ -303,6 +249,64 @@ You can use this html to setup your project. See on [Codepen](https://codepen.io
303
249
 
304
250
  **We recommend using the material-dynamic-colors only when your app needs to change theme at runtime.**
305
251
 
252
+ ### ✅ DO:
253
+
254
+ ```
255
+ // 1 setting to 1 document
256
+ <body class="dark|light">...</body>
257
+
258
+ // 1 element to N helpers
259
+ <element class="helper helper">...</element>
260
+ <div class="element helper helper">...</div>
261
+
262
+ // 1 main element per document
263
+ <...>
264
+ <main></main>
265
+ </...>
266
+
267
+ // inline/block elements in block elements
268
+ <div>
269
+ <div></div>
270
+ <span></span>
271
+ </div>
272
+
273
+ // write css like this
274
+ .element.helper {...}
275
+ .element > .element {...}
276
+ .element > .helper {...}
277
+ ```
278
+
279
+ ### 🚫 DON'T:
280
+
281
+ ```
282
+ // N elements to 1 tag
283
+ <div class="element element helper">...</div>
284
+ <element class="element helper">...</element>
285
+
286
+ // element with dependencies
287
+ <div class="element">
288
+ <div class="element-header">...</div>
289
+ <div class="element-content">...</div>
290
+ <div class="element-footer">...</div>
291
+ </div>
292
+
293
+ // N main elements per document
294
+ <...>
295
+ <main></main>
296
+ <main></main>
297
+ </...>
298
+
299
+ // block elements in inline elements
300
+ <span>
301
+ <div></div>
302
+ </span>
303
+
304
+ // write css like this
305
+ .element.element {...}
306
+ .element .element {...}
307
+ .element .helper {...}
308
+ ```
309
+
306
310
  # Documentation
307
311
 
308
312
  Complete documentation and examples available at: