uikit 3.25.17-dev.80dfe87 → 3.25.17-dev.8c70e44

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 (200) hide show
  1. package/CHANGELOG.md +33 -0
  2. package/build/prefix.js +1 -1
  3. package/build/publishDev.js +1 -1
  4. package/build/release.js +2 -2
  5. package/build/scope.js +1 -1
  6. package/build/scss.js +1 -1
  7. package/dist/css/uikit-core-rtl.css +892 -802
  8. package/dist/css/uikit-core-rtl.min.css +1 -1
  9. package/dist/css/uikit-core.css +892 -802
  10. package/dist/css/uikit-core.min.css +1 -1
  11. package/dist/css/uikit-rtl.css +893 -803
  12. package/dist/css/uikit-rtl.min.css +1 -1
  13. package/dist/css/uikit.css +893 -803
  14. package/dist/css/uikit.min.css +1 -1
  15. package/dist/js/components/countdown.js +1 -1
  16. package/dist/js/components/countdown.min.js +1 -1
  17. package/dist/js/components/filter.js +1 -1
  18. package/dist/js/components/filter.min.js +1 -1
  19. package/dist/js/components/lightbox-panel.js +133 -132
  20. package/dist/js/components/lightbox-panel.min.js +1 -1
  21. package/dist/js/components/lightbox.js +134 -133
  22. package/dist/js/components/lightbox.min.js +1 -1
  23. package/dist/js/components/marquee.js +179 -0
  24. package/dist/js/components/marquee.min.js +1 -0
  25. package/dist/js/components/notification.js +1 -1
  26. package/dist/js/components/notification.min.js +1 -1
  27. package/dist/js/components/parallax.js +8 -12
  28. package/dist/js/components/parallax.min.js +1 -1
  29. package/dist/js/components/slider-parallax.js +8 -12
  30. package/dist/js/components/slider-parallax.min.js +1 -1
  31. package/dist/js/components/slider.js +41 -25
  32. package/dist/js/components/slider.min.js +1 -1
  33. package/dist/js/components/slideshow-parallax.js +8 -12
  34. package/dist/js/components/slideshow-parallax.min.js +1 -1
  35. package/dist/js/components/slideshow.js +71 -102
  36. package/dist/js/components/slideshow.min.js +1 -1
  37. package/dist/js/components/sortable.js +1 -1
  38. package/dist/js/components/sortable.min.js +1 -1
  39. package/dist/js/components/tooltip.js +19 -19
  40. package/dist/js/components/tooltip.min.js +1 -1
  41. package/dist/js/components/upload.js +1 -1
  42. package/dist/js/components/upload.min.js +1 -1
  43. package/dist/js/uikit-core.js +754 -262
  44. package/dist/js/uikit-core.min.js +1 -1
  45. package/dist/js/uikit-icons.js +1 -1
  46. package/dist/js/uikit-icons.min.js +1 -1
  47. package/dist/js/uikit.js +629 -374
  48. package/dist/js/uikit.min.js +1 -1
  49. package/package.json +2 -2
  50. package/src/js/api/component.js +2 -3
  51. package/src/js/api/observables.js +2 -4
  52. package/src/js/api/options.js +6 -3
  53. package/src/js/api/props.js +1 -4
  54. package/src/js/api/state.js +7 -8
  55. package/src/js/components/index.js +1 -0
  56. package/src/js/components/internal/lightbox-animations.js +7 -26
  57. package/src/js/components/internal/slideshow-animations.js +15 -62
  58. package/src/js/components/lightbox-panel.js +121 -96
  59. package/src/js/components/lightbox.js +5 -8
  60. package/src/js/components/marquee.js +123 -0
  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 +57 -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 +65 -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 +81 -81
  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/utility.less +0 -157
  102. package/src/less/theme/_import.less +5 -1
  103. package/src/less/theme/dropcap.less +29 -0
  104. package/src/less/theme/floating-shadow.less +20 -0
  105. package/src/less/theme/logo.less +29 -0
  106. package/src/less/theme/marquee.less +14 -0
  107. package/src/less/theme/utility.less +0 -32
  108. package/src/scss/components/_import.scss +6 -1
  109. package/src/scss/components/base.scss +1 -1
  110. package/src/scss/components/button.scss +1 -1
  111. package/src/scss/components/dropcap.scss +63 -0
  112. package/src/scss/components/floating-shadow.scss +62 -0
  113. package/src/scss/components/form.scss +5 -5
  114. package/src/scss/components/grid.scss +57 -64
  115. package/src/scss/components/logo.scss +75 -0
  116. package/src/scss/components/margin.scss +81 -81
  117. package/src/scss/components/marquee.scss +136 -0
  118. package/src/scss/components/nav.scss +1 -1
  119. package/src/scss/components/padding.scss +9 -9
  120. package/src/scss/components/utility.scss +0 -128
  121. package/src/scss/mixins-theme.scss +41 -32
  122. package/src/scss/mixins.scss +38 -29
  123. package/src/scss/variables-theme.scss +14 -9
  124. package/src/scss/variables.scss +14 -9
  125. package/tests/accordion.html +77 -10
  126. package/tests/alert.html +1 -1
  127. package/tests/align.html +5 -5
  128. package/tests/animation.html +4 -4
  129. package/tests/article.html +7 -7
  130. package/tests/background.html +2 -2
  131. package/tests/badge.html +1 -1
  132. package/tests/base.html +2 -2
  133. package/tests/button.html +1 -1
  134. package/tests/card.html +15 -15
  135. package/tests/close.html +2 -2
  136. package/tests/comment.html +9 -9
  137. package/tests/container.html +2 -2
  138. package/tests/countdown.html +21 -21
  139. package/tests/cover.html +3 -3
  140. package/tests/description-list.html +1 -1
  141. package/tests/divider.html +3 -3
  142. package/tests/dotnav.html +1 -1
  143. package/tests/drop.html +7 -7
  144. package/tests/dropbar.html +5 -5
  145. package/tests/dropcap.html +26 -0
  146. package/tests/dropdown.html +1 -1
  147. package/tests/dropnav.html +18 -18
  148. package/tests/filter.html +3 -3
  149. package/tests/floating-shadow.html +44 -0
  150. package/tests/form.html +14 -14
  151. package/tests/grid.html +41 -47
  152. package/tests/heading.html +2 -2
  153. package/tests/height-viewport.html +4 -4
  154. package/tests/height.html +5 -5
  155. package/tests/icon.html +8 -8
  156. package/tests/image.html +6 -6
  157. package/tests/index.html +13 -13
  158. package/tests/js/index.js +1 -1
  159. package/tests/leader.html +5 -5
  160. package/tests/lightbox.html +6 -6
  161. package/tests/link.html +1 -1
  162. package/tests/list.html +4 -4
  163. package/tests/logo.html +84 -0
  164. package/tests/margin.html +7 -7
  165. package/tests/marker.html +3 -3
  166. package/tests/marquee.html +617 -0
  167. package/tests/modal.html +3 -3
  168. package/tests/nav.html +5 -5
  169. package/tests/navbar.html +27 -27
  170. package/tests/notification.html +2 -2
  171. package/tests/offcanvas.html +12 -12
  172. package/tests/overlay.html +3 -3
  173. package/tests/padding.html +1 -1
  174. package/tests/pagination.html +3 -3
  175. package/tests/parallax.html +1 -1
  176. package/tests/position.html +6 -6
  177. package/tests/scrollspy.html +12 -12
  178. package/tests/search.html +5 -5
  179. package/tests/section.html +17 -17
  180. package/tests/slidenav.html +3 -3
  181. package/tests/slider.html +5 -5
  182. package/tests/slideshow.html +3 -3
  183. package/tests/sortable.html +15 -15
  184. package/tests/sticky-navbar.html +4 -4
  185. package/tests/sticky-parallax.html +3 -3
  186. package/tests/sticky.html +3 -3
  187. package/tests/svg.html +3 -2
  188. package/tests/switcher.html +6 -6
  189. package/tests/tab.html +4 -4
  190. package/tests/text.html +3 -3
  191. package/tests/tile.html +4 -4
  192. package/tests/toggle.html +1 -1
  193. package/tests/tooltip.html +3 -3
  194. package/tests/totop.html +2 -2
  195. package/tests/transition.html +1 -1
  196. package/tests/upload.html +5 -5
  197. package/tests/utility.html +16 -116
  198. package/tests/video.html +224 -24
  199. package/tests/visibility.html +4 -4
  200. package/tests/width.html +12 -12
package/tests/form.html CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  <h1>Form</h1>
16
16
 
17
- <div uk-grid>
17
+ <div class="uk-grid">
18
18
  <div class="uk-width-2-3@s">
19
19
 
20
20
  <h2>Horizontal</h2>
@@ -67,7 +67,7 @@
67
67
  <div class="uk-form-controls uk-form-controls-text">
68
68
  <label><input class="uk-radio" type="radio" name="radio1"> Option 01</label><br>
69
69
  <label><input class="uk-radio" type="radio" name="radio1"> Option 02</label>
70
- <div class="uk-margin uk-grid-small uk-child-width-auto" uk-grid>
70
+ <div class="uk-grid uk-margin uk-grid-small uk-child-width-auto">
71
71
  <label><input class="uk-radio" type="radio" name="radio2"> A</label>
72
72
  <label><input class="uk-radio" type="radio" name="radio2"> B</label>
73
73
  <label><input class="uk-radio" type="radio" name="radio2"> C</label>
@@ -81,7 +81,7 @@
81
81
  <div class="uk-form-controls uk-form-controls-text">
82
82
  <label><input class="uk-checkbox" type="checkbox"> Option 01</label><br>
83
83
  <label><input class="uk-checkbox" type="checkbox"> Option 02</label>
84
- <div class="uk-margin uk-grid-small uk-child-width-auto" uk-grid>
84
+ <div class="uk-grid uk-margin uk-grid-small uk-child-width-auto">
85
85
  <label><input class="uk-checkbox" type="checkbox"> A</label>
86
86
  <label><input class="uk-checkbox" type="checkbox"> B</label>
87
87
  <label><input class="uk-checkbox" type="checkbox"> C</label>
@@ -214,7 +214,7 @@
214
214
 
215
215
  <h2>Icon</h2>
216
216
 
217
- <form class="uk-form-stacked uk-child-width-auto@m" uk-grid>
217
+ <form class="uk-grid uk-form-stacked uk-child-width-auto@m">
218
218
  <div>
219
219
 
220
220
  <div class="uk-margin">
@@ -300,7 +300,7 @@
300
300
 
301
301
  <h2>Radio, Checkbox and Select</h2>
302
302
 
303
- <form class="uk-form-stacked uk-child-width-1-3@m" uk-grid>
303
+ <form class="uk-grid uk-form-stacked uk-child-width-1-3@m">
304
304
  <div>
305
305
 
306
306
  <span class="uk-form-label">Radio</span>
@@ -309,7 +309,7 @@
309
309
  <label><input class="uk-radio" type="radio" name="radio1"> Unchecked</label><br>
310
310
  <label><input class="uk-radio" type="radio" name="radio2" disabled> Disabled</label><br>
311
311
  <label><input class="uk-radio" type="radio" name="radio2" disabled checked> Disabled Checked</label>
312
- <div class="uk-margin uk-grid-small uk-child-width-auto" uk-grid>
312
+ <div class="uk-grid uk-margin uk-grid-small uk-child-width-auto">
313
313
  <label><input class="uk-radio" type="radio" name="radio3" checked> A</label>
314
314
  <label><input class="uk-radio" type="radio" name="radio3"> B</label>
315
315
  <label><input class="uk-radio" type="radio" name="radio4" disabled> C</label>
@@ -325,7 +325,7 @@
325
325
  <label><input class="uk-checkbox" type="checkbox"> Unchecked</label><br>
326
326
  <label><input class="uk-checkbox" type="checkbox" disabled> Disabled</label><br>
327
327
  <label><input class="uk-checkbox" type="checkbox" disabled checked> Disabled Checked</label><br>
328
- <div class="uk-margin uk-grid-small uk-child-width-auto" uk-grid>
328
+ <div class="uk-grid uk-margin uk-grid-small uk-child-width-auto">
329
329
  <label><input class="uk-checkbox" type="checkbox" checked> A</label>
330
330
  <label><input class="uk-checkbox" type="checkbox"> B</label>
331
331
  <label><input class="uk-checkbox" type="checkbox" disabled> C</label>
@@ -341,7 +341,7 @@
341
341
  <label><input class="uk-checkbox" type="checkbox"> Unchecked</label><br>
342
342
  <label><input class="uk-checkbox" type="checkbox" disabled> Disabled</label><br>
343
343
  <label><input class="uk-checkbox js-indeterminate" type="checkbox" disabled> Disabled Indeterminate</label>
344
- <div class="uk-margin uk-grid-small uk-child-width-auto" uk-grid>
344
+ <div class="uk-grid uk-margin uk-grid-small uk-child-width-auto">
345
345
  <label><input class="uk-checkbox js-indeterminate" type="checkbox"> A</label>
346
346
  <label><input class="uk-checkbox" type="checkbox"> B</label>
347
347
  <label><input class="uk-checkbox" type="checkbox" disabled> C</label>
@@ -356,7 +356,7 @@
356
356
 
357
357
  <h2>Custom Controls</h2>
358
358
 
359
- <form class="uk-form-stacked uk-child-width-1-2@m" uk-grid>
359
+ <form class="uk-grid uk-form-stacked uk-child-width-1-2@m">
360
360
  <div>
361
361
 
362
362
  <h3>File</h3>
@@ -470,7 +470,7 @@
470
470
 
471
471
  <div class="uk-margin">
472
472
  <span class="uk-form-label">States and styles</span>
473
- <div class="uk-margin-small uk-grid-small uk-child-width-1-2" uk-grid>
473
+ <div class="uk-grid uk-margin-small uk-grid-small uk-child-width-1-2">
474
474
  <div>
475
475
  <input class="uk-input" type="text" placeholder=":disabled" aria-label="disabled" disabled>
476
476
  </div>
@@ -478,7 +478,7 @@
478
478
  <input class="uk-input" type="text" placeholder=":disabled" aria-label="disabled" value="Some text..." disabled>
479
479
  </div>
480
480
  </div>
481
- <div class="uk-margin-small uk-grid-small" uk-grid>
481
+ <div class="uk-grid uk-margin-small uk-grid-small">
482
482
  <div class="uk-width-expand">
483
483
  <input class="uk-input" type="text" placeholder=":focus" aria-label="focus" autofocus required>
484
484
  </div>
@@ -527,7 +527,7 @@
527
527
  <span class="uk-form-label">Radio</span>
528
528
  <label><input class="uk-radio" type="radio" name="radio1"> Option 01</label><br>
529
529
  <label><input class="uk-radio" type="radio" name="radio1"> Option 02</label>
530
- <div class="uk-margin uk-grid-small uk-child-width-auto" uk-grid>
530
+ <div class="uk-grid uk-margin uk-grid-small uk-child-width-auto">
531
531
  <label><input class="uk-radio" type="radio" name="radio2"> A</label>
532
532
  <label><input class="uk-radio" type="radio" name="radio2"> B</label>
533
533
  <label><input class="uk-radio" type="radio" name="radio2"> C</label>
@@ -539,7 +539,7 @@
539
539
  <span class="uk-form-label">Checkbox</span>
540
540
  <label><input class="uk-checkbox" type="checkbox"> Option 01</label><br>
541
541
  <label><input class="uk-checkbox" type="checkbox"> Option 02</label>
542
- <div class="uk-margin uk-grid-small uk-child-width-auto" uk-grid>
542
+ <div class="uk-grid uk-margin uk-grid-small uk-child-width-auto">
543
543
  <label><input class="uk-checkbox" type="checkbox"> A</label>
544
544
  <label><input class="uk-checkbox" type="checkbox"> B</label>
545
545
  <label><input class="uk-checkbox" type="checkbox"> C</label>
@@ -663,7 +663,7 @@
663
663
  <td><code>target</code></td>
664
664
  <td>CSS selector, Boolean</td>
665
665
  <td>false</td>
666
- <td>Value display target.</td>
666
+ <td>Target element where the current value is displayed.</td>
667
667
  </tr>
668
668
  </tbody>
669
669
  </table>
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>