uikit 3.25.18-dev.9fa57fb → 3.25.18-dev.f49c4ef

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 (202) hide show
  1. package/CHANGELOG.md +32 -2
  2. package/build/prefix.js +1 -1
  3. package/build/publishDev.js +1 -1
  4. package/build/scope.js +1 -1
  5. package/build/scss.js +1 -1
  6. package/dist/css/uikit-core-rtl.css +942 -820
  7. package/dist/css/uikit-core-rtl.min.css +1 -1
  8. package/dist/css/uikit-core.css +942 -820
  9. package/dist/css/uikit-core.min.css +1 -1
  10. package/dist/css/uikit-rtl.css +1039 -917
  11. package/dist/css/uikit-rtl.min.css +1 -1
  12. package/dist/css/uikit.css +1039 -917
  13. package/dist/css/uikit.min.css +1 -1
  14. package/dist/js/components/countdown.js +1 -1
  15. package/dist/js/components/countdown.min.js +1 -1
  16. package/dist/js/components/filter.js +1 -1
  17. package/dist/js/components/filter.min.js +1 -1
  18. package/dist/js/components/lightbox-panel.js +133 -132
  19. package/dist/js/components/lightbox-panel.min.js +1 -1
  20. package/dist/js/components/lightbox.js +134 -133
  21. package/dist/js/components/lightbox.min.js +1 -1
  22. package/dist/js/components/marquee.js +179 -0
  23. package/dist/js/components/marquee.min.js +1 -0
  24. package/dist/js/components/notification.js +1 -1
  25. package/dist/js/components/notification.min.js +1 -1
  26. package/dist/js/components/parallax.js +8 -12
  27. package/dist/js/components/parallax.min.js +1 -1
  28. package/dist/js/components/slider-parallax.js +8 -12
  29. package/dist/js/components/slider-parallax.min.js +1 -1
  30. package/dist/js/components/slider.js +43 -27
  31. package/dist/js/components/slider.min.js +1 -1
  32. package/dist/js/components/slideshow-parallax.js +8 -12
  33. package/dist/js/components/slideshow-parallax.min.js +1 -1
  34. package/dist/js/components/slideshow.js +71 -102
  35. package/dist/js/components/slideshow.min.js +1 -1
  36. package/dist/js/components/sortable.js +1 -1
  37. package/dist/js/components/sortable.min.js +1 -1
  38. package/dist/js/components/tooltip.js +19 -19
  39. package/dist/js/components/tooltip.min.js +1 -1
  40. package/dist/js/components/upload.js +1 -1
  41. package/dist/js/components/upload.min.js +1 -1
  42. package/dist/js/uikit-core.js +752 -262
  43. package/dist/js/uikit-core.min.js +1 -1
  44. package/dist/js/uikit-icons.js +1 -1
  45. package/dist/js/uikit-icons.min.js +1 -1
  46. package/dist/js/uikit.js +629 -376
  47. package/dist/js/uikit.min.js +1 -1
  48. package/package.json +1 -1
  49. package/src/js/api/component.js +2 -3
  50. package/src/js/api/observables.js +2 -4
  51. package/src/js/api/options.js +6 -3
  52. package/src/js/api/props.js +1 -4
  53. package/src/js/api/state.js +7 -8
  54. package/src/js/components/index.js +1 -0
  55. package/src/js/components/internal/lightbox-animations.js +7 -26
  56. package/src/js/components/internal/slideshow-animations.js +15 -62
  57. package/src/js/components/lightbox-panel.js +121 -96
  58. package/src/js/components/lightbox.js +5 -8
  59. package/src/js/components/marquee.js +123 -0
  60. package/src/js/components/slider.js +2 -2
  61. package/src/js/components/tooltip.js +4 -2
  62. package/src/js/core/accordion.js +78 -29
  63. package/src/js/core/drop.js +5 -4
  64. package/src/js/core/dropnav.js +3 -3
  65. package/src/js/core/grid.js +5 -19
  66. package/src/js/core/height-match.js +1 -2
  67. package/src/js/core/margin.js +3 -0
  68. package/src/js/core/overflow-fade.js +5 -5
  69. package/src/js/core/sticky.js +1 -1
  70. package/src/js/core/switcher.js +24 -44
  71. package/src/js/core/video.js +172 -15
  72. package/src/js/mixin/connect.js +55 -0
  73. package/src/js/mixin/internal/slideshow-animations.js +5 -13
  74. package/src/js/mixin/internal/slideshow-transitioner.js +2 -2
  75. package/src/js/mixin/modal.js +4 -3
  76. package/src/js/mixin/parallax.js +1 -4
  77. package/src/js/mixin/position.js +1 -1
  78. package/src/js/mixin/scroll-driven.js +57 -0
  79. package/src/js/mixin/slider-nav.js +1 -1
  80. package/src/js/mixin/slider-parallax.js +9 -38
  81. package/src/js/mixin/togglable.js +13 -14
  82. package/src/js/util/attr.js +7 -7
  83. package/src/js/util/class.js +1 -1
  84. package/src/js/util/dom.js +3 -4
  85. package/src/js/util/lang.js +1 -1
  86. package/src/js/util/player.js +4 -4
  87. package/src/js/util/style.js +10 -15
  88. package/src/js/util/viewport.js +22 -25
  89. package/src/less/components/_import.less +6 -1
  90. package/src/less/components/base.less +1 -1
  91. package/src/less/components/button.less +1 -1
  92. package/src/less/components/dropcap.less +71 -0
  93. package/src/less/components/floating-shadow.less +66 -0
  94. package/src/less/components/form.less +5 -5
  95. package/src/less/components/grid.less +57 -64
  96. package/src/less/components/logo.less +94 -0
  97. package/src/less/components/margin.less +152 -124
  98. package/src/less/components/marquee.less +133 -0
  99. package/src/less/components/nav.less +1 -1
  100. package/src/less/components/padding.less +9 -9
  101. package/src/less/components/text.less +6 -0
  102. package/src/less/components/utility.less +0 -163
  103. package/src/less/theme/_import.less +5 -1
  104. package/src/less/theme/dropcap.less +29 -0
  105. package/src/less/theme/floating-shadow.less +20 -0
  106. package/src/less/theme/logo.less +29 -0
  107. package/src/less/theme/marquee.less +14 -0
  108. package/src/less/theme/utility.less +0 -32
  109. package/src/scss/components/_import.scss +6 -1
  110. package/src/scss/components/base.scss +1 -1
  111. package/src/scss/components/button.scss +1 -1
  112. package/src/scss/components/dropcap.scss +63 -0
  113. package/src/scss/components/floating-shadow.scss +63 -0
  114. package/src/scss/components/form.scss +5 -5
  115. package/src/scss/components/grid.scss +57 -64
  116. package/src/scss/components/logo.scss +75 -0
  117. package/src/scss/components/margin.scss +152 -124
  118. package/src/scss/components/marquee.scss +136 -0
  119. package/src/scss/components/nav.scss +1 -1
  120. package/src/scss/components/padding.scss +9 -9
  121. package/src/scss/components/text.scss +6 -0
  122. package/src/scss/components/utility.scss +0 -129
  123. package/src/scss/mixins-theme.scss +41 -32
  124. package/src/scss/mixins.scss +38 -29
  125. package/src/scss/variables-theme.scss +14 -14
  126. package/src/scss/variables.scss +14 -14
  127. package/tests/accordion.html +77 -10
  128. package/tests/alert.html +1 -1
  129. package/tests/align.html +5 -5
  130. package/tests/animation.html +4 -4
  131. package/tests/article.html +7 -7
  132. package/tests/background.html +2 -2
  133. package/tests/badge.html +1 -1
  134. package/tests/base.html +2 -2
  135. package/tests/button.html +1 -1
  136. package/tests/card.html +15 -15
  137. package/tests/close.html +2 -2
  138. package/tests/comment.html +9 -9
  139. package/tests/container.html +2 -2
  140. package/tests/countdown.html +21 -21
  141. package/tests/cover.html +3 -3
  142. package/tests/description-list.html +1 -1
  143. package/tests/divider.html +3 -3
  144. package/tests/dotnav.html +1 -1
  145. package/tests/drop.html +7 -7
  146. package/tests/dropbar.html +5 -5
  147. package/tests/dropcap.html +26 -0
  148. package/tests/dropdown.html +1 -1
  149. package/tests/dropnav.html +18 -18
  150. package/tests/filter.html +3 -3
  151. package/tests/floating-shadow.html +44 -0
  152. package/tests/form.html +14 -14
  153. package/tests/grid.html +41 -47
  154. package/tests/heading.html +2 -2
  155. package/tests/height-viewport.html +4 -4
  156. package/tests/height.html +5 -5
  157. package/tests/icon.html +8 -8
  158. package/tests/image.html +6 -6
  159. package/tests/index.html +13 -13
  160. package/tests/js/index.js +1 -1
  161. package/tests/leader.html +5 -5
  162. package/tests/lightbox.html +6 -6
  163. package/tests/link.html +1 -1
  164. package/tests/list.html +4 -4
  165. package/tests/logo.html +84 -0
  166. package/tests/margin.html +7 -7
  167. package/tests/marker.html +3 -3
  168. package/tests/marquee.html +617 -0
  169. package/tests/modal.html +3 -3
  170. package/tests/nav.html +5 -5
  171. package/tests/navbar.html +27 -27
  172. package/tests/notification.html +2 -2
  173. package/tests/offcanvas.html +12 -12
  174. package/tests/overlay.html +3 -3
  175. package/tests/padding.html +1 -1
  176. package/tests/pagination.html +3 -3
  177. package/tests/parallax.html +1 -1
  178. package/tests/position.html +6 -6
  179. package/tests/scrollspy.html +12 -12
  180. package/tests/search.html +5 -5
  181. package/tests/section.html +17 -17
  182. package/tests/slidenav.html +3 -3
  183. package/tests/slider.html +5 -5
  184. package/tests/slideshow.html +33 -3
  185. package/tests/sortable.html +19 -19
  186. package/tests/sticky-navbar.html +4 -4
  187. package/tests/sticky-parallax.html +3 -3
  188. package/tests/sticky.html +3 -3
  189. package/tests/svg.html +3 -2
  190. package/tests/switcher.html +6 -6
  191. package/tests/tab.html +4 -4
  192. package/tests/text.html +3 -3
  193. package/tests/tile.html +4 -4
  194. package/tests/toggle.html +1 -1
  195. package/tests/tooltip.html +3 -3
  196. package/tests/totop.html +2 -2
  197. package/tests/transition.html +1 -1
  198. package/tests/upload.html +5 -5
  199. package/tests/utility.html +16 -116
  200. package/tests/video.html +224 -24
  201. package/tests/visibility.html +4 -4
  202. package/tests/width.html +12 -12
package/tests/grid.html CHANGED
@@ -33,33 +33,33 @@
33
33
 
34
34
  <h1>Grid</h1>
35
35
 
36
- <div class="uk-child-width-1-2" uk-grid>
36
+ <div class="uk-grid uk-child-width-1-2">
37
37
  <div><div class="uk-panel">1-2</div></div>
38
38
  <div><div class="uk-panel">1-2</div></div>
39
39
  </div>
40
40
 
41
- <div class="uk-child-width-1-2@m uk-grid-match" uk-grid>
41
+ <div class="uk-grid uk-child-width-1-2@m uk-grid-match">
42
42
  <div><div class="uk-panel">1-2-M</div></div>
43
43
  <div>
44
- <div class="uk-child-width-1-2@l" uk-grid>
44
+ <div class="uk-grid uk-child-width-1-2@l">
45
45
  <div><div class="uk-panel">1-2-L</div></div>
46
46
  <div><div class="uk-panel">1-2-L</div></div>
47
47
  </div>
48
48
  </div>
49
49
  </div>
50
50
 
51
- <div class="uk-child-width-1-4@m uk-grid-match" uk-grid>
51
+ <div class="uk-grid uk-child-width-1-4@m uk-grid-match">
52
52
  <div><div class="uk-panel">1-4-M<br>…<br>…</div></div>
53
53
  <div><div class="uk-panel">1-4-M</div></div>
54
54
  <div class="uk-width-1-2@m">
55
- <div class="uk-child-width-1-2@l uk-grid-match" uk-grid>
55
+ <div class="uk-grid uk-child-width-1-2@l uk-grid-match">
56
56
  <div><div class="uk-panel">1-2-L<br>…</div></div>
57
57
  <div><div class="uk-panel">1-2-L</div></div>
58
58
  </div>
59
59
  </div>
60
60
  </div>
61
61
 
62
- <div class="uk-child-width-1-2@m uk-grid-match" uk-grid>
62
+ <div class="uk-grid uk-child-width-1-2@m uk-grid-match">
63
63
  <div><div class="uk-panel">1-2-M</div></div>
64
64
  <div>
65
65
  <div class="uk-panel">1-2-M</div>
@@ -67,7 +67,7 @@
67
67
  </div>
68
68
  </div>
69
69
 
70
- <div uk-grid>
70
+ <div class="uk-grid">
71
71
  <div class="uk-width-1-2@m"><div class="uk-panel">1-2-M</div></div>
72
72
  <div class="uk-width-1-4@m"><div class="uk-panel">1-4-M</div></div>
73
73
  <div class="uk-width-1-4@m"><div class="uk-panel">1-4-M</div></div>
@@ -76,7 +76,7 @@
76
76
  <div class="uk-width-3-5@m"><div class="uk-panel">3-5-M</div></div>
77
77
  </div>
78
78
 
79
- <div uk-grid>
79
+ <div class="uk-grid">
80
80
  <div class="uk-width-auto@m"><div class="uk-panel">Auto-M</div></div>
81
81
  <div class="uk-width-1-3@m"><div class="uk-panel">1-3-M</div></div>
82
82
  <div class="uk-width-expand@m"><div class="uk-panel">Expand-M</div></div>
@@ -135,33 +135,33 @@
135
135
 
136
136
  <h2>Small</h2>
137
137
 
138
- <div class="uk-grid-small uk-child-width-1-2" uk-grid>
138
+ <div class="uk-grid uk-grid-small uk-child-width-1-2">
139
139
  <div><div class="uk-panel">1-2</div></div>
140
140
  <div><div class="uk-panel">1-2</div></div>
141
141
  </div>
142
142
 
143
- <div class="uk-grid-small uk-child-width-1-2@m uk-grid-match" uk-grid>
143
+ <div class="uk-grid uk-grid-small uk-child-width-1-2@m uk-grid-match">
144
144
  <div><div class="uk-panel">1-2-M</div></div>
145
145
  <div>
146
- <div class="uk-grid-small uk-child-width-1-2@l" uk-grid>
146
+ <div class="uk-grid uk-grid-small uk-child-width-1-2@l">
147
147
  <div><div class="uk-panel">1-2-L</div></div>
148
148
  <div><div class="uk-panel">1-2-L</div></div>
149
149
  </div>
150
150
  </div>
151
151
  </div>
152
152
 
153
- <div class="uk-grid-small uk-child-width-1-4@m uk-grid-match" uk-grid>
153
+ <div class="uk-grid uk-grid-small uk-child-width-1-4@m uk-grid-match">
154
154
  <div><div class="uk-panel">1-4-M<br>…<br>…</div></div>
155
155
  <div><div class="uk-panel">1-4-M</div></div>
156
156
  <div class="uk-width-1-2@m">
157
- <div class="uk-grid-small uk-child-width-1-2@l uk-grid-match" uk-grid>
157
+ <div class="uk-grid uk-grid-small uk-child-width-1-2@l uk-grid-match">
158
158
  <div><div class="uk-panel">1-2-L<br>…</div></div>
159
159
  <div><div class="uk-panel">1-2-L</div></div>
160
160
  </div>
161
161
  </div>
162
162
  </div>
163
163
 
164
- <div class="uk-grid-small uk-child-width-1-2@m uk-grid-match" uk-grid>
164
+ <div class="uk-grid uk-grid-small uk-child-width-1-2@m uk-grid-match">
165
165
  <div><div class="uk-panel">1-2-M</div></div>
166
166
  <div>
167
167
  <div class="uk-panel">1-2-M</div>
@@ -169,7 +169,7 @@
169
169
  </div>
170
170
  </div>
171
171
 
172
- <div class="uk-grid-small" uk-grid>
172
+ <div class="uk-grid uk-grid-small">
173
173
  <div class="uk-width-1-2@m"><div class="uk-panel">1-2-M</div></div>
174
174
  <div class="uk-width-1-4@m"><div class="uk-panel">1-4-M</div></div>
175
175
  <div class="uk-width-1-4@m"><div class="uk-panel">1-4-M</div></div>
@@ -178,7 +178,7 @@
178
178
  <div class="uk-width-3-5@m"><div class="uk-panel">3-5-M</div></div>
179
179
  </div>
180
180
 
181
- <div class="uk-grid-small" uk-grid>
181
+ <div class="uk-grid uk-grid-small">
182
182
  <div class="uk-width-auto@m"><div class="uk-panel">Auto-M</div></div>
183
183
  <div class="uk-width-1-3@m"><div class="uk-panel">1-3-M</div></div>
184
184
  <div class="uk-width-expand@m"><div class="uk-panel">Expand-M</div></div>
@@ -237,33 +237,33 @@
237
237
 
238
238
  <h2>Medium</h2>
239
239
 
240
- <div class="uk-grid-medium uk-child-width-1-2" uk-grid>
240
+ <div class="uk-grid uk-grid-medium uk-child-width-1-2">
241
241
  <div><div class="uk-panel">1-2</div></div>
242
242
  <div><div class="uk-panel">1-2</div></div>
243
243
  </div>
244
244
 
245
- <div class="uk-grid-medium uk-child-width-1-2@m uk-grid-match" uk-grid>
245
+ <div class="uk-grid uk-grid-medium uk-child-width-1-2@m uk-grid-match">
246
246
  <div><div class="uk-panel">1-2-M</div></div>
247
247
  <div>
248
- <div class="uk-grid-medium uk-child-width-1-2@l" uk-grid>
248
+ <div class="uk-grid uk-grid-medium uk-child-width-1-2@l">
249
249
  <div><div class="uk-panel">1-2-L</div></div>
250
250
  <div><div class="uk-panel">1-2-L</div></div>
251
251
  </div>
252
252
  </div>
253
253
  </div>
254
254
 
255
- <div class="uk-grid-medium uk-child-width-1-4@m uk-grid-match" uk-grid>
255
+ <div class="uk-grid uk-grid-medium uk-child-width-1-4@m uk-grid-match">
256
256
  <div><div class="uk-panel">1-4-M<br>…<br>…</div></div>
257
257
  <div><div class="uk-panel">1-4-M</div></div>
258
258
  <div class="uk-width-1-2@m">
259
- <div class="uk-grid-medium uk-child-width-1-2@l uk-grid-match" uk-grid>
259
+ <div class="uk-grid uk-grid-medium uk-child-width-1-2@l uk-grid-match">
260
260
  <div><div class="uk-panel">1-2-L<br>…</div></div>
261
261
  <div><div class="uk-panel">1-2-L</div></div>
262
262
  </div>
263
263
  </div>
264
264
  </div>
265
265
 
266
- <div class="uk-grid-medium uk-child-width-1-2@m uk-grid-match" uk-grid>
266
+ <div class="uk-grid uk-grid-medium uk-child-width-1-2@m uk-grid-match">
267
267
  <div><div class="uk-panel">1-2-M</div></div>
268
268
  <div>
269
269
  <div class="uk-panel">1-2-M</div>
@@ -271,7 +271,7 @@
271
271
  </div>
272
272
  </div>
273
273
 
274
- <div class="uk-grid-medium" uk-grid>
274
+ <div class="uk-grid uk-grid-medium">
275
275
  <div class="uk-width-1-2@m"><div class="uk-panel">1-2-M</div></div>
276
276
  <div class="uk-width-1-4@m"><div class="uk-panel">1-4-M</div></div>
277
277
  <div class="uk-width-1-4@m"><div class="uk-panel">1-4-M</div></div>
@@ -280,7 +280,7 @@
280
280
  <div class="uk-width-3-5@m"><div class="uk-panel">3-5-M</div></div>
281
281
  </div>
282
282
 
283
- <div class="uk-grid-medium" uk-grid>
283
+ <div class="uk-grid uk-grid-medium">
284
284
  <div class="uk-width-auto@m"><div class="uk-panel">Auto-M</div></div>
285
285
  <div class="uk-width-1-3@m"><div class="uk-panel">1-3-M</div></div>
286
286
  <div class="uk-width-expand@m"><div class="uk-panel">Expand-M</div></div>
@@ -339,33 +339,33 @@
339
339
 
340
340
  <h2>Large</h2>
341
341
 
342
- <div class="uk-grid-large uk-child-width-1-2" uk-grid>
342
+ <div class="uk-grid uk-grid-large uk-child-width-1-2">
343
343
  <div><div class="uk-panel">1-2</div></div>
344
344
  <div><div class="uk-panel">1-2</div></div>
345
345
  </div>
346
346
 
347
- <div class="uk-grid-large uk-child-width-1-2@m uk-grid-match" uk-grid>
347
+ <div class="uk-grid uk-grid-large uk-child-width-1-2@m uk-grid-match">
348
348
  <div><div class="uk-panel">1-2-M</div></div>
349
349
  <div>
350
- <div class="uk-grid-large uk-child-width-1-2@l" uk-grid>
350
+ <div class="uk-grid uk-grid-large uk-child-width-1-2@l">
351
351
  <div><div class="uk-panel">1-2-L</div></div>
352
352
  <div><div class="uk-panel">1-2-L</div></div>
353
353
  </div>
354
354
  </div>
355
355
  </div>
356
356
 
357
- <div class="uk-grid-large uk-child-width-1-4@m uk-grid-match" uk-grid>
357
+ <div class="uk-grid uk-grid-large uk-child-width-1-4@m uk-grid-match">
358
358
  <div><div class="uk-panel">1-4-M<br>…<br>…</div></div>
359
359
  <div><div class="uk-panel">1-4-M</div></div>
360
360
  <div class="uk-width-1-2@m">
361
- <div class="uk-grid-large uk-child-width-1-2@l uk-grid-match" uk-grid>
361
+ <div class="uk-grid uk-grid-large uk-child-width-1-2@l uk-grid-match">
362
362
  <div><div class="uk-panel">1-2-L<br>…</div></div>
363
363
  <div><div class="uk-panel">1-2-L</div></div>
364
364
  </div>
365
365
  </div>
366
366
  </div>
367
367
 
368
- <div class="uk-grid-large uk-child-width-1-2@m uk-grid-match" uk-grid>
368
+ <div class="uk-grid uk-grid-large uk-child-width-1-2@m uk-grid-match">
369
369
  <div><div class="uk-panel">1-2-M</div></div>
370
370
  <div>
371
371
  <div class="uk-panel">1-2-M</div>
@@ -373,7 +373,7 @@
373
373
  </div>
374
374
  </div>
375
375
 
376
- <div class="uk-grid-large" uk-grid>
376
+ <div class="uk-grid uk-grid-large">
377
377
  <div class="uk-width-1-2@m"><div class="uk-panel">1-2-M</div></div>
378
378
  <div class="uk-width-1-4@m"><div class="uk-panel">1-4-M</div></div>
379
379
  <div class="uk-width-1-4@m"><div class="uk-panel">1-4-M</div></div>
@@ -382,7 +382,7 @@
382
382
  <div class="uk-width-3-5@m"><div class="uk-panel">3-5-M</div></div>
383
383
  </div>
384
384
 
385
- <div class="uk-grid-large" uk-grid>
385
+ <div class="uk-grid uk-grid-large">
386
386
  <div class="uk-width-auto@m"><div class="uk-panel">Auto-M</div></div>
387
387
  <div class="uk-width-1-3@m"><div class="uk-panel">1-3-M</div></div>
388
388
  <div class="uk-width-expand@m"><div class="uk-panel">Expand-M</div></div>
@@ -441,33 +441,33 @@
441
441
 
442
442
  <h2>Collapse</h2>
443
443
 
444
- <div class="uk-grid-collapse uk-child-width-1-2" uk-grid>
444
+ <div class="uk-grid uk-grid-collapse uk-child-width-1-2">
445
445
  <div><div class="uk-panel">1-2</div></div>
446
446
  <div><div class="uk-panel">1-2</div></div>
447
447
  </div>
448
448
 
449
- <div class="uk-grid-collapse uk-child-width-1-2@m uk-grid-match" uk-grid>
449
+ <div class="uk-grid uk-grid-collapse uk-child-width-1-2@m uk-grid-match">
450
450
  <div><div class="uk-panel">1-2-M</div></div>
451
451
  <div>
452
- <div class="uk-grid-collapse uk-child-width-1-2@l" uk-grid>
452
+ <div class="uk-grid uk-grid-collapse uk-child-width-1-2@l">
453
453
  <div><div class="uk-panel">1-2-L</div></div>
454
454
  <div><div class="uk-panel">1-2-L</div></div>
455
455
  </div>
456
456
  </div>
457
457
  </div>
458
458
 
459
- <div class="uk-grid-collapse uk-child-width-1-4@m uk-grid-match" uk-grid>
459
+ <div class="uk-grid uk-grid-collapse uk-child-width-1-4@m uk-grid-match">
460
460
  <div><div class="uk-panel">1-4-M<br>…<br>…</div></div>
461
461
  <div><div class="uk-panel">1-4-M</div></div>
462
462
  <div class="uk-width-1-2@m">
463
- <div class="uk-grid-collapse uk-child-width-1-2@l uk-grid-match" uk-grid>
463
+ <div class="uk-grid uk-grid-collapse uk-child-width-1-2@l uk-grid-match">
464
464
  <div><div class="uk-panel">1-2-L<br>…</div></div>
465
465
  <div><div class="uk-panel">1-2-L</div></div>
466
466
  </div>
467
467
  </div>
468
468
  </div>
469
469
 
470
- <div class="uk-grid-collapse uk-child-width-1-2@m uk-grid-match" uk-grid>
470
+ <div class="uk-grid uk-grid-collapse uk-child-width-1-2@m uk-grid-match">
471
471
  <div><div class="uk-panel">1-2-M</div></div>
472
472
  <div>
473
473
  <div class="uk-panel">1-2-M</div>
@@ -475,7 +475,7 @@
475
475
  </div>
476
476
  </div>
477
477
 
478
- <div class="uk-grid-collapse" uk-grid>
478
+ <div class="uk-grid uk-grid-collapse">
479
479
  <div class="uk-width-1-2@m"><div class="uk-panel">1-2-M</div></div>
480
480
  <div class="uk-width-1-4@m"><div class="uk-panel">1-4-M</div></div>
481
481
  <div class="uk-width-1-4@m"><div class="uk-panel">1-4-M</div></div>
@@ -484,7 +484,7 @@
484
484
  <div class="uk-width-3-5@m"><div class="uk-panel">3-5-M</div></div>
485
485
  </div>
486
486
 
487
- <div class="uk-grid-collapse" uk-grid>
487
+ <div class="uk-grid uk-grid-collapse">
488
488
  <div class="uk-width-auto@m"><div class="uk-panel">Auto-M</div></div>
489
489
  <div class="uk-width-1-3@m"><div class="uk-panel">1-3-M</div></div>
490
490
  <div class="uk-width-expand@m"><div class="uk-panel">Expand-M</div></div>
@@ -494,7 +494,7 @@
494
494
 
495
495
  <h3>Small / Large</h3>
496
496
 
497
- <div class="uk-grid-column-small uk-grid-row-large uk-child-width-1-4@m" uk-grid>
497
+ <div class="uk-grid uk-grid-column-small uk-grid-row-large uk-child-width-1-4@m">
498
498
  <div><div class="uk-panel">1-4-M</div></div>
499
499
  <div><div class="uk-panel">1-4-M</div></div>
500
500
  <div><div class="uk-panel">1-4-M</div></div>
@@ -627,12 +627,6 @@
627
627
  </tr>
628
628
  </thead>
629
629
  <tbody>
630
- <tr>
631
- <td><code>margin</code></td>
632
- <td>String</td>
633
- <td>uk-grid-margin</td>
634
- <td>This class is added to items that break into the next row, typically to create margin to the previous row.</td>
635
- </tr>
636
630
  <tr>
637
631
  <td><code>first-column</code></td>
638
632
  <td>String</td>
package/tests/heading.html CHANGED
@@ -55,7 +55,7 @@
55
55
 
56
56
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
57
57
 
58
- <div class="uk-grid-large uk-child-width-1-2@m uk-margin-large" uk-grid>
58
+ <div class="uk-grid uk-grid-large uk-child-width-1-2@m uk-margin-large">
59
59
  <div>
60
60
 
61
61
  <div class="uk-heading-divider uk-heading-3xlarge">Hea<span class="uk-hidden"><br>More</span></div>
@@ -226,7 +226,7 @@
226
226
  </div>
227
227
  </div>
228
228
 
229
- <div class="uk-grid-large uk-child-width-1-2@m uk-margin-large" uk-grid>
229
+ <div class="uk-grid uk-grid-large uk-child-width-1-2@m uk-margin-large">
230
230
  <div>
231
231
 
232
232
  <div class="uk-heading-line uk-heading-3xlarge"><span>Hea<span class="uk-hidden"><br>More</span></span></div>
package/tests/height-viewport.html CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  <h1>Height Viewport</h1>
16
16
 
17
- <div class="uk-child-width-1-6@m uk-light" uk-grid>
17
+ <div class="uk-grid uk-child-width-1-6@m uk-light">
18
18
  <div>
19
19
 
20
20
  <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center uk-height-viewport">
@@ -77,7 +77,7 @@
77
77
  </div>
78
78
  </div>
79
79
 
80
- <div class="uk-child-width-1-6@m uk-light" uk-grid>
80
+ <div class="uk-grid uk-child-width-1-6@m uk-light">
81
81
  <div>
82
82
 
83
83
  <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center uk-height-viewport">
@@ -140,7 +140,7 @@
140
140
  </div>
141
141
  </div>
142
142
 
143
- <div class="uk-child-width-1-6@m uk-light" uk-grid style="height: 600px; overflow: auto;">
143
+ <div class="uk-grid uk-child-width-1-6@m uk-light" style="height: 600px; overflow: auto;">
144
144
  <div>
145
145
 
146
146
  <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center uk-height-viewport">
@@ -232,7 +232,7 @@
232
232
  <td><code>offset-bottom</code></td>
233
233
  <td>Boolean, Number, Pixel, CSS selector</td>
234
234
  <td>false</td>
235
- <td>Subtracts the element's immediately following sibling's height (true), the given percentage (Number), Pixel (px) value from its own height or the given element's height.</td>
235
+ <td>Subtracts either the next sibling's height (`true`), a percentage value, a pixel value, or the specified element's height from the computed height.</td>
236
236
  </tr>
237
237
  <tr>
238
238
  <td><code>min</code></td>
package/tests/height.html CHANGED
@@ -38,7 +38,7 @@
38
38
 
39
39
  <h3>Each Row</h3>
40
40
 
41
- <div class="uk-child-width-1-2@m" uk-grid uk-height-match="target: > div > .uk-panel">
41
+ <div class="uk-grid uk-child-width-1-2@m" uk-height-match="target: > div > .uk-panel">
42
42
  <div><div class="uk-panel">1-2-M<br>…<br>…</div></div>
43
43
  <div><div class="uk-panel">1-2-M</div></div>
44
44
  <div><div class="uk-panel">1-2-M<br>…</div></div>
@@ -50,7 +50,7 @@
50
50
 
51
51
  <h3>All Rows</h3>
52
52
 
53
- <div class="uk-child-width-1-2@m" uk-grid uk-height-match="target: > div > .uk-panel; row: false">
53
+ <div class="uk-grid uk-child-width-1-2@m" uk-height-match="target: > div > .uk-panel; row: false">
54
54
  <div><div class="uk-panel">1-2-M<br>…<br>…</div></div>
55
55
  <div><div class="uk-panel">1-2-M</div></div>
56
56
  <div><div class="uk-panel">1-2-M<br>…</div></div>
@@ -62,7 +62,7 @@
62
62
 
63
63
  <h3>Hidden Panels</h3>
64
64
 
65
- <div class="uk-child-width-1-2@m" uk-grid uk-height-match="target: > div > .uk-panel; row: false">
65
+ <div class="uk-grid uk-child-width-1-2@m" uk-height-match="target: > div > .uk-panel; row: false">
66
66
  <div><div class="uk-panel" style="display: none;">1-2-M<br>…<br>…</div></div>
67
67
  <div><div class="uk-panel">1-2-M<br>…</div></div>
68
68
  </div>
@@ -86,13 +86,13 @@
86
86
  <td><code>target</code></td>
87
87
  <td>CSS selector</td>
88
88
  <td>&gt; *</td>
89
- <td>Elements that should match. By default, the children will match.</td>
89
+ <td>Elements to match. Defaults to the element's children.</td>
90
90
  </tr>
91
91
  <tr>
92
92
  <td><code>row</code></td>
93
93
  <td>Boolean</td>
94
94
  <td>true</td>
95
- <td>By default only items in the same row will be matched. For example, once grid columns extend to a width of 100%, their heights will no longer be matched. This makes sense, for example, if they stack vertically in narrower viewports.</td>
95
+ <td>By default, only items in the same row are matched. When grid columns expand to 100% width, their heights are no longer matched, which is useful when they stack vertically in narrower viewports.</td>
96
96
  </tr>
97
97
  </tbody>
98
98
  </table>
package/tests/icon.html CHANGED
@@ -14,12 +14,12 @@
14
14
 
15
15
  <h1>Icon</h1>
16
16
 
17
- <div uk-grid>
17
+ <div class="uk-grid">
18
18
  <div class="uk-width-expand@m">
19
19
 
20
20
  <h2>List</h2>
21
21
 
22
- <div class="uk-grid-small uk-child-width-1-2@s uk-child-width-1-4@m" uk-grid>
22
+ <div class="uk-grid uk-grid-small uk-child-width-1-2@s uk-child-width-1-4@m">
23
23
  <div>
24
24
 
25
25
  <ul class="uk-list">
@@ -229,7 +229,7 @@
229
229
 
230
230
  <h2>Link</h2>
231
231
 
232
- <ul class="uk-grid-small uk-flex-middle" uk-grid>
232
+ <ul class="uk-grid uk-grid-small uk-flex-middle">
233
233
 
234
234
  <!-- App -->
235
235
  <li><a class="uk-icon-link" href="#" uk-icon="icon: home"></a></li>
@@ -407,7 +407,7 @@
407
407
 
408
408
  <h2>Button</h2>
409
409
 
410
- <ul class="uk-grid-small uk-flex-middle" uk-grid>
410
+ <ul class="uk-grid uk-grid-small uk-flex-middle">
411
411
 
412
412
  <!-- App -->
413
413
  <li><a class="uk-icon-button" href="#" uk-icon="icon: home"></a></li>
@@ -585,7 +585,7 @@
585
585
 
586
586
  <h2>Ratio</h2>
587
587
 
588
- <ul class="uk-grid-small uk-flex-middle" uk-grid>
588
+ <ul class="uk-grid uk-grid-small uk-flex-middle">
589
589
  <!-- App -->
590
590
  <li><span uk-icon="ratio: 2; icon: home"></span></li>
591
591
  <li><span uk-icon="ratio: 2; icon: sign-in"></span></li>
@@ -762,13 +762,13 @@
762
762
 
763
763
  <h2>Overlay</h2>
764
764
 
765
- <div class="uk-child-width-1-2@m" uk-grid>
765
+ <div class="uk-grid uk-child-width-1-2@m">
766
766
  <div>
767
767
 
768
768
  <a href class="uk-inline uk-dark">
769
769
  <img src="images/light.jpg" width="1800" height="1200" alt="">
770
770
  <div class="uk-position-center">
771
- <ul class="uk-grid-small uk-flex-middle" uk-grid>
771
+ <ul class="uk-grid uk-grid-small uk-flex-middle">
772
772
  <li><span class="uk-icon-overlay" href="#" uk-icon="ratio: 3; icon: play-circle"></span></li>
773
773
  <li><span class="uk-icon-overlay" href="#" uk-icon="ratio: 3; icon: youtube"></span></li>
774
774
  </ul>
@@ -781,7 +781,7 @@
781
781
  <a href class="uk-inline uk-light">
782
782
  <img src="images/dark.jpg" width="1800" height="1200" alt="">
783
783
  <div class="uk-position-center">
784
- <ul class="uk-grid-small uk-flex-middle" uk-grid>
784
+ <ul class="uk-grid uk-grid-small uk-flex-middle">
785
785
  <li><span class="uk-icon-overlay" href="#" uk-icon="ratio: 3; icon: play-circle"></span></li>
786
786
  <li><span class="uk-icon-overlay" href="#" uk-icon="ratio: 3; icon: youtube"></span></li>
787
787
  </ul>
package/tests/image.html CHANGED
@@ -20,7 +20,7 @@
20
20
 
21
21
  <h2>Loading Lazy Attribute</h2>
22
22
 
23
- <div class="uk-child-width-1-2@m" uk-grid>
23
+ <div class="uk-grid uk-child-width-1-2@m">
24
24
  <div>
25
25
  <img src="https://images.unsplash.com/photo-1476820865390-c52aeebb9891?fit=crop&w=900&h=600&q=80" width="900" height="600" alt="" loading="lazy">
26
26
  <p class="uk-margin-small-top">Image</p>
@@ -40,7 +40,7 @@
40
40
  </div>
41
41
  </div>
42
42
 
43
- <div class="uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid>
43
+ <div class="uk-grid uk-child-width-1-2@s uk-child-width-1-3@m">
44
44
  <div>
45
45
  <img src="https://images.unsplash.com/photo-1517842536804-bf6629e2c291?fit=crop&w=373&h=249&q=80"
46
46
  srcset="https://images.unsplash.com/photo-1517842536804-bf6629e2c291?fit=crop&w=373&h=249&q=80 373w,
@@ -280,7 +280,7 @@
280
280
 
281
281
  <h2>uk-img with Image element (Deprecated)</h2>
282
282
 
283
- <div class="uk-child-width-1-2@m" uk-grid>
283
+ <div class="uk-grid uk-child-width-1-2@m">
284
284
  <div>
285
285
  <img data-src="https://images.unsplash.com/photo-1522201949034-507737bce479?fit=crop&w=900&h=600&q=80" width="900" height="600" alt="" uk-img>
286
286
  <p class="uk-margin-small-top">Image</p>
@@ -300,7 +300,7 @@
300
300
  </div>
301
301
  </div>
302
302
 
303
- <div class="uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid>
303
+ <div class="uk-grid uk-child-width-1-2@s uk-child-width-1-3@m">
304
304
  <div>
305
305
  <img data-src="https://images.unsplash.com/photo-1523359247812-29dde5ac53a0?fit=crop&w=373&h=249&q=80"
306
306
  data-srcset="https://images.unsplash.com/photo-1523359247812-29dde5ac53a0?fit=crop&w=373&h=249&q=80 373w,
@@ -492,7 +492,7 @@
492
492
  </div>
493
493
  </div>
494
494
 
495
- <div class="uk-child-width-1-2@m" uk-grid>
495
+ <div class="uk-grid uk-child-width-1-2@m">
496
496
  <div>
497
497
 
498
498
  <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="ratio: 3:2; autoplay: false">
@@ -612,7 +612,7 @@
612
612
  <td><code>sources</code></td>
613
613
  <td>String</td>
614
614
  <td></td>
615
- <td>The image's sources. This option is used for background images only. The sources attributes be passed in `key: value;` format for a single source. For multiple sources in JSON format.</td>
615
+ <td>The image sources. For background images only. Pass a single source in `key: value;` format, or multiple sources as JSON.</td>
616
616
  </tr>
617
617
  <tr>
618
618
  <td><code>loading</code></td>