uikit 3.25.20-dev.e4f47fc → 3.25.20

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 (201) hide show
  1. package/CHANGELOG.md +2 -33
  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 +917 -1045
  7. package/dist/css/uikit-core-rtl.min.css +1 -1
  8. package/dist/css/uikit-core.css +917 -1045
  9. package/dist/css/uikit-core.min.css +1 -1
  10. package/dist/css/uikit-rtl.css +936 -1064
  11. package/dist/css/uikit-rtl.min.css +1 -1
  12. package/dist/css/uikit.css +936 -1064
  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 +132 -133
  19. package/dist/js/components/lightbox-panel.min.js +1 -1
  20. package/dist/js/components/lightbox.js +133 -134
  21. package/dist/js/components/lightbox.min.js +1 -1
  22. package/dist/js/components/notification.js +1 -1
  23. package/dist/js/components/notification.min.js +1 -1
  24. package/dist/js/components/parallax.js +12 -8
  25. package/dist/js/components/parallax.min.js +1 -1
  26. package/dist/js/components/slider-parallax.js +12 -8
  27. package/dist/js/components/slider-parallax.min.js +1 -1
  28. package/dist/js/components/slider.js +25 -41
  29. package/dist/js/components/slider.min.js +1 -1
  30. package/dist/js/components/slideshow-parallax.js +12 -8
  31. package/dist/js/components/slideshow-parallax.min.js +1 -1
  32. package/dist/js/components/slideshow.js +102 -71
  33. package/dist/js/components/slideshow.min.js +1 -1
  34. package/dist/js/components/sortable.js +1 -1
  35. package/dist/js/components/sortable.min.js +1 -1
  36. package/dist/js/components/tooltip.js +19 -19
  37. package/dist/js/components/tooltip.min.js +1 -1
  38. package/dist/js/components/upload.js +1 -1
  39. package/dist/js/components/upload.min.js +1 -1
  40. package/dist/js/uikit-core.js +262 -752
  41. package/dist/js/uikit-core.min.js +1 -1
  42. package/dist/js/uikit-icons.js +1 -1
  43. package/dist/js/uikit-icons.min.js +1 -1
  44. package/dist/js/uikit.js +374 -627
  45. package/dist/js/uikit.min.js +1 -1
  46. package/package.json +1 -1
  47. package/src/js/api/component.js +3 -2
  48. package/src/js/api/observables.js +4 -2
  49. package/src/js/api/options.js +3 -6
  50. package/src/js/api/props.js +4 -1
  51. package/src/js/api/state.js +8 -7
  52. package/src/js/components/index.js +0 -1
  53. package/src/js/components/internal/lightbox-animations.js +26 -7
  54. package/src/js/components/internal/slideshow-animations.js +62 -15
  55. package/src/js/components/lightbox-panel.js +96 -121
  56. package/src/js/components/lightbox.js +8 -5
  57. package/src/js/components/tooltip.js +2 -4
  58. package/src/js/core/accordion.js +29 -78
  59. package/src/js/core/drop.js +4 -5
  60. package/src/js/core/dropnav.js +3 -3
  61. package/src/js/core/grid.js +19 -5
  62. package/src/js/core/height-match.js +2 -1
  63. package/src/js/core/margin.js +0 -3
  64. package/src/js/core/overflow-fade.js +5 -5
  65. package/src/js/core/sticky.js +1 -1
  66. package/src/js/core/switcher.js +44 -24
  67. package/src/js/core/video.js +15 -172
  68. package/src/js/mixin/internal/slideshow-animations.js +13 -5
  69. package/src/js/mixin/internal/slideshow-transitioner.js +2 -2
  70. package/src/js/mixin/modal.js +3 -4
  71. package/src/js/mixin/parallax.js +4 -1
  72. package/src/js/mixin/position.js +1 -1
  73. package/src/js/mixin/slider-nav.js +1 -1
  74. package/src/js/mixin/slider-parallax.js +38 -9
  75. package/src/js/mixin/togglable.js +14 -13
  76. package/src/js/util/attr.js +7 -7
  77. package/src/js/util/class.js +1 -1
  78. package/src/js/util/dom.js +4 -3
  79. package/src/js/util/lang.js +1 -1
  80. package/src/js/util/player.js +4 -4
  81. package/src/js/util/style.js +15 -10
  82. package/src/js/util/viewport.js +25 -22
  83. package/src/less/components/_import.less +1 -6
  84. package/src/less/components/base.less +1 -1
  85. package/src/less/components/button.less +1 -1
  86. package/src/less/components/form.less +5 -5
  87. package/src/less/components/grid.less +65 -58
  88. package/src/less/components/margin.less +124 -155
  89. package/src/less/components/nav.less +1 -1
  90. package/src/less/components/padding.less +9 -9
  91. package/src/less/components/text.less +0 -6
  92. package/src/less/components/utility.less +163 -0
  93. package/src/less/theme/_import.less +1 -5
  94. package/src/less/theme/utility.less +32 -0
  95. package/src/scss/components/_import.scss +1 -6
  96. package/src/scss/components/base.scss +1 -1
  97. package/src/scss/components/button.scss +1 -1
  98. package/src/scss/components/form.scss +5 -5
  99. package/src/scss/components/grid.scss +64 -57
  100. package/src/scss/components/margin.scss +124 -155
  101. package/src/scss/components/nav.scss +1 -1
  102. package/src/scss/components/padding.scss +9 -9
  103. package/src/scss/components/text.scss +0 -6
  104. package/src/scss/components/utility.scss +129 -0
  105. package/src/scss/mixins-theme.scss +33 -42
  106. package/src/scss/mixins.scss +30 -39
  107. package/src/scss/variables-theme.scss +14 -14
  108. package/src/scss/variables.scss +14 -14
  109. package/tests/accordion.html +10 -77
  110. package/tests/alert.html +1 -1
  111. package/tests/align.html +5 -5
  112. package/tests/animation.html +4 -4
  113. package/tests/article.html +7 -7
  114. package/tests/background.html +2 -2
  115. package/tests/badge.html +1 -1
  116. package/tests/base.html +3 -3
  117. package/tests/button.html +1 -1
  118. package/tests/card.html +15 -15
  119. package/tests/close.html +2 -2
  120. package/tests/comment.html +9 -9
  121. package/tests/container.html +2 -2
  122. package/tests/countdown.html +21 -21
  123. package/tests/cover.html +6 -6
  124. package/tests/description-list.html +1 -1
  125. package/tests/divider.html +3 -3
  126. package/tests/dotnav.html +1 -1
  127. package/tests/drop.html +7 -7
  128. package/tests/dropbar.html +5 -5
  129. package/tests/dropdown.html +1 -1
  130. package/tests/dropnav.html +18 -18
  131. package/tests/filter.html +3 -3
  132. package/tests/form.html +14 -14
  133. package/tests/grid.html +47 -41
  134. package/tests/heading.html +2 -2
  135. package/tests/height-viewport.html +4 -4
  136. package/tests/height.html +5 -5
  137. package/tests/icon.html +8 -8
  138. package/tests/image.html +6 -6
  139. package/tests/index.html +13 -13
  140. package/tests/js/index.js +1 -1
  141. package/tests/leader.html +5 -5
  142. package/tests/lightbox.html +14 -14
  143. package/tests/link.html +1 -1
  144. package/tests/list.html +4 -4
  145. package/tests/margin.html +7 -7
  146. package/tests/marker.html +3 -3
  147. package/tests/modal.html +4 -4
  148. package/tests/nav.html +5 -5
  149. package/tests/navbar.html +27 -27
  150. package/tests/notification.html +2 -2
  151. package/tests/offcanvas.html +12 -12
  152. package/tests/overlay.html +3 -3
  153. package/tests/padding.html +1 -1
  154. package/tests/pagination.html +3 -3
  155. package/tests/parallax.html +1 -1
  156. package/tests/position.html +6 -6
  157. package/tests/scrollspy.html +12 -12
  158. package/tests/search.html +5 -5
  159. package/tests/section.html +17 -17
  160. package/tests/slidenav.html +3 -3
  161. package/tests/slider.html +5 -5
  162. package/tests/slideshow.html +4 -34
  163. package/tests/sortable.html +15 -15
  164. package/tests/sticky-navbar.html +4 -4
  165. package/tests/sticky-parallax.html +3 -3
  166. package/tests/sticky.html +3 -3
  167. package/tests/svg.html +2 -3
  168. package/tests/switcher.html +6 -6
  169. package/tests/tab.html +4 -4
  170. package/tests/text.html +3 -3
  171. package/tests/tile.html +4 -4
  172. package/tests/toggle.html +1 -1
  173. package/tests/tooltip.html +3 -3
  174. package/tests/totop.html +2 -2
  175. package/tests/transition.html +1 -1
  176. package/tests/upload.html +5 -5
  177. package/tests/utility.html +116 -16
  178. package/tests/video.html +27 -227
  179. package/tests/visibility.html +4 -4
  180. package/tests/width.html +12 -12
  181. package/dist/js/components/marquee.js +0 -179
  182. package/dist/js/components/marquee.min.js +0 -1
  183. package/src/js/components/marquee.js +0 -123
  184. package/src/js/mixin/connect.js +0 -55
  185. package/src/js/mixin/scroll-driven.js +0 -57
  186. package/src/less/components/dropcap.less +0 -71
  187. package/src/less/components/floating-shadow.less +0 -66
  188. package/src/less/components/logo.less +0 -94
  189. package/src/less/components/marquee.less +0 -133
  190. package/src/less/theme/dropcap.less +0 -29
  191. package/src/less/theme/floating-shadow.less +0 -20
  192. package/src/less/theme/logo.less +0 -29
  193. package/src/less/theme/marquee.less +0 -14
  194. package/src/scss/components/dropcap.scss +0 -63
  195. package/src/scss/components/floating-shadow.scss +0 -63
  196. package/src/scss/components/logo.scss +0 -75
  197. package/src/scss/components/marquee.scss +0 -136
  198. package/tests/dropcap.html +0 -26
  199. package/tests/floating-shadow.html +0 -44
  200. package/tests/logo.html +0 -84
  201. package/tests/marquee.html +0 -617
package/tests/tab.html CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  <h1>Tab</h1>
16
16
 
17
- <div class="uk-grid uk-child-width-1-2@m">
17
+ <div class="uk-child-width-1-2@m" uk-grid>
18
18
  <div>
19
19
 
20
20
  <h2>Top</h2>
@@ -111,12 +111,12 @@
111
111
  </div>
112
112
  </div>
113
113
 
114
- <div class="uk-grid uk-child-width-1-2@m">
114
+ <div class="uk-child-width-1-2@m" uk-grid>
115
115
  <div>
116
116
 
117
117
  <h2>Left/Right</h2>
118
118
 
119
- <div class="uk-grid uk-child-width-auto">
119
+ <div class="uk-child-width-auto" uk-grid>
120
120
  <div>
121
121
 
122
122
  <ul class="uk-tab-left" uk-tab>
@@ -218,7 +218,7 @@
218
218
  <td><code>connect</code></td>
219
219
  <td>CSS selector</td>
220
220
  <td>false</td>
221
- <td>Related items container. By default, the next element with the `uk-switcher` class is used.</td>
221
+ <td>Related items container. By default, next element with class 'uk-switcher'.</td>
222
222
  </tr>
223
223
  <tr>
224
224
  <td><code>toggle</code></td>
package/tests/text.html CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  <h1>Text</h1>
16
16
 
17
- <div class="uk-grid">
17
+ <div uk-grid>
18
18
  <div class="uk-width-2-3@m">
19
19
 
20
20
  <h2 class="uk-h1">Lead and Meta</h2>
@@ -74,7 +74,7 @@
74
74
 
75
75
  <h2>Text Overflow</h2>
76
76
 
77
- <div class="uk-grid uk-child-width-1-3@m">
77
+ <div class="uk-child-width-1-3@m" uk-grid>
78
78
  <div>
79
79
 
80
80
  <h3 class="uk-h4">Truncate</h3>
@@ -114,7 +114,7 @@
114
114
 
115
115
  <h2>Alignment</h2>
116
116
 
117
- <div class="uk-grid uk-child-width-1-2@m uk-child-width-1-4@l">
117
+ <div class="uk-child-width-1-2@m uk-child-width-1-4@l" uk-grid>
118
118
  <div class="uk-text-center uk-text-left@m">
119
119
 
120
120
  <h2 class="uk-h3">center left@m</h2>
package/tests/tile.html CHANGED
@@ -11,7 +11,7 @@
11
11
  <body>
12
12
 
13
13
  <div class="uk-section">
14
- <div class="uk-grid uk-child-width-1-2@s uk-child-width-1-4@l uk-grid-collapse uk-grid-match">
14
+ <div class="uk-child-width-1-2@s uk-child-width-1-4@l uk-grid-collapse uk-grid-match" uk-grid>
15
15
  <div>
16
16
 
17
17
  <div class="uk-tile uk-tile-default uk-tile-hover">
@@ -64,7 +64,7 @@
64
64
  </div>
65
65
 
66
66
  <div class="uk-section">
67
- <div class="uk-grid uk-child-width-1-2@s uk-child-width-1-4@l uk-grid-collapse uk-grid-match">
67
+ <div class="uk-child-width-1-2@s uk-child-width-1-4@l uk-grid-collapse uk-grid-match" uk-grid>
68
68
  <div>
69
69
 
70
70
  <div class="uk-tile uk-tile-default uk-tile-small">
@@ -117,7 +117,7 @@
117
117
  </div>
118
118
 
119
119
  <div class="uk-section">
120
- <div class="uk-grid uk-child-width-1-2@s uk-child-width-1-4@l uk-grid-collapse uk-grid-match">
120
+ <div class="uk-child-width-1-2@s uk-child-width-1-4@l uk-grid-collapse uk-grid-match" uk-grid>
121
121
  <div>
122
122
 
123
123
  <div class="uk-tile uk-tile-default uk-tile-large">
@@ -170,7 +170,7 @@
170
170
  </div>
171
171
 
172
172
  <div class="uk-section">
173
- <div class="uk-grid uk-child-width-1-2@s uk-child-width-1-4@l uk-grid-collapse uk-grid-match">
173
+ <div class="uk-child-width-1-2@s uk-child-width-1-4@l uk-grid-collapse uk-grid-match" uk-grid>
174
174
  <div>
175
175
 
176
176
  <div class="uk-tile uk-tile-default uk-tile-xlarge">
package/tests/toggle.html CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  <h1>Toggle</h1>
16
16
 
17
- <div class="uk-grid uk-child-width-1-5@m">
17
+ <div class="uk-child-width-1-5@m" uk-grid>
18
18
  <div>
19
19
 
20
20
  <h3>One item</h3>
package/tests/tooltip.html CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
  <div class="uk-tooltip uk-tooltip-top-center uk-display-inline-block uk-margin-remove uk-position-relative">Tooltip</div>
18
18
 
19
- <div class="uk-grid uk-child-width-1-2@m">
19
+ <div class="uk-child-width-1-2@m" uk-grid>
20
20
  <div>
21
21
 
22
22
  <h2>Position</h2>
@@ -89,13 +89,13 @@
89
89
  <tr>
90
90
  <td><code>animation</code></td>
91
91
  <td>String</td>
92
- <td>uk-animation-scale-up</td>
92
+ <td>false</td>
93
93
  <td>Space-separated names of animations. Comma-separated for animation out.</td>
94
94
  </tr>
95
95
  <tr>
96
96
  <td><code>duration</code></td>
97
97
  <td>Number</td>
98
- <td>100</td>
98
+ <td>200</td>
99
99
  <td>The animation duration.</td>
100
100
  </tr>
101
101
  <tr>
package/tests/totop.html CHANGED
@@ -18,7 +18,7 @@
18
18
  <a href="#" uk-totop></a>
19
19
  </p>
20
20
 
21
- <h2>JavaScript Options</h2>
21
+ <h2>Javascript Options</h2>
22
22
 
23
23
  <div class="uk-overflow-auto">
24
24
  <table class="uk-table uk-table-striped">
@@ -35,7 +35,7 @@
35
35
  <td><code>i18n</code></td>
36
36
  <td>Object</td>
37
37
  <td>null</td>
38
- <td>Override the default translations.</td>
38
+ <td>Override default translation texts.</td>
39
39
  </tr>
40
40
  </tbody>
41
41
  </table>
package/tests/transition.html CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  <h1>Transition</h1>
16
16
 
17
- <div class="uk-grid uk-grid-small uk-child-width-1-3@s uk-child-width-1-6@m">
17
+ <div class="uk-grid-small uk-child-width-1-3@s uk-child-width-1-6@m" uk-grid>
18
18
  <div class="uk-text-center">
19
19
  <div class="uk-inline-clip uk-inverse-light uk-transition-toggle" tabindex="0">
20
20
  <img src="images/photo.jpg" width="1800" height="1200" alt="">
package/tests/upload.html CHANGED
@@ -182,7 +182,7 @@
182
182
  <td><code>url</code></td>
183
183
  <td>String</td>
184
184
  <td></td>
185
- <td>The request URL.</td>
185
+ <td>The request url.</td>
186
186
  </tr>
187
187
  <tr>
188
188
  <td><code>multiple</code></td>
@@ -200,7 +200,7 @@
200
200
  <td><code>method</code></td>
201
201
  <td>String</td>
202
202
  <td>POST</td>
203
- <td>The HTTP request method.</td>
203
+ <td>The request type.</td>
204
204
  </tr>
205
205
  <tr>
206
206
  <td><code>params</code></td>
@@ -242,13 +242,13 @@
242
242
  <td><code>i18n</code></td>
243
243
  <td>Object</td>
244
244
  <td>null</td>
245
- <td>Override the default translations.</td>
245
+ <td>Override default translation texts.</td>
246
246
  </tr>
247
247
  <tr>
248
248
  <td><code>cls-dragover</code></td>
249
249
  <td>String</td>
250
250
  <td>uk-dragover</td>
251
- <td>CSS class applied while a file is dragged over the upload area.</td>
251
+ <td>File name filter.</td>
252
252
  </tr>
253
253
  <tr>
254
254
  <td><code>abort</code></td>
@@ -314,7 +314,7 @@
314
314
  <td><code>fail</code></td>
315
315
  <td>Function</td>
316
316
  <td></td>
317
- <td>The fail callback. Called when the file name or MIME type is invalid.</td>
317
+ <td>The fail callback. If name or MIME type are invalid.</td>
318
318
  </tr>
319
319
  </tbody>
320
320
  </table>
package/tests/utility.html CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  <h1>Utility</h1>
16
16
 
17
- <div class="uk-grid uk-child-width-1-2@m">
17
+ <div class="uk-child-width-1-2@m" uk-grid>
18
18
  <div>
19
19
 
20
20
  <div class="uk-panel">
@@ -113,42 +113,42 @@
113
113
 
114
114
  <h2>Pre scrollable</h2>
115
115
 
116
- <pre class="uk-overflow-auto uk-height-medium uk-resize"><code>&lt;div class="uk-grid"&gt;
116
+ <pre class="uk-overflow-auto uk-height-medium uk-resize"><code>&lt;div uk-grid&gt;
117
117
  &lt;div class="uk-width-1-2"&gt;…&lt;/div&gt;&lt;div class="uk-width-1-2"&gt;…&lt;/div&gt;&lt;div class="uk-width-1-2"&gt;…&lt;/div&gt;
118
118
  &lt;div class="uk-width-1-2"&gt;…&lt;/div&gt;
119
119
  &lt;/div&gt;
120
120
 
121
- &lt;div class="uk-grid"&gt;
121
+ &lt;div uk-grid&gt;
122
122
  &lt;div class="uk-width-1-2"&gt;…&lt;/div&gt;
123
123
  &lt;div class="uk-width-1-2"&gt;…&lt;/div&gt;
124
124
  &lt;/div&gt;
125
125
 
126
- &lt;div class="uk-grid"&gt;
126
+ &lt;div uk-grid&gt;
127
127
  &lt;div class="uk-width-1-2"&gt;…&lt;/div&gt;
128
128
  &lt;div class="uk-width-1-2"&gt;…&lt;/div&gt;
129
129
  &lt;/div&gt;
130
130
 
131
- &lt;div class="uk-grid"&gt;
131
+ &lt;div uk-grid&gt;
132
132
  &lt;div class="uk-width-1-2"&gt;…&lt;/div&gt;
133
133
  &lt;div class="uk-width-1-2"&gt;…&lt;/div&gt;
134
134
  &lt;/div&gt;
135
135
 
136
- &lt;div class="uk-grid"&gt;
136
+ &lt;div uk-grid&gt;
137
137
  &lt;div class="uk-width-1-2"&gt;…&lt;/div&gt;
138
138
  &lt;div class="uk-width-1-2"&gt;…&lt;/div&gt;
139
139
  &lt;/div&gt;
140
140
 
141
- &lt;div class="uk-grid"&gt;
141
+ &lt;div uk-grid&gt;
142
142
  &lt;div class="uk-width-1-2"&gt;…&lt;/div&gt;
143
143
  &lt;div class="uk-width-1-2"&gt;…&lt;/div&gt;
144
144
  &lt;/div&gt;
145
145
 
146
- &lt;div class="uk-grid"&gt;
146
+ &lt;div uk-grid&gt;
147
147
  &lt;div class="uk-width-1-2"&gt;…&lt;/div&gt;
148
148
  &lt;div class="uk-width-1-2"&gt;…&lt;/div&gt;
149
149
  &lt;/div&gt;
150
150
 
151
- &lt;div class="uk-grid"&gt;
151
+ &lt;div uk-grid&gt;
152
152
  &lt;div class="uk-width-1-2"&gt;…&lt;/div&gt;
153
153
  &lt;div class="uk-width-1-2"&gt;…&lt;/div&gt;
154
154
  &lt;/div&gt;</code></pre>
@@ -158,7 +158,7 @@
158
158
 
159
159
  <h2>Overflow Auto JS</h2>
160
160
 
161
- <div class="uk-grid uk-child-width-1-2@m">
161
+ <div class="uk-child-width-1-2@m" uk-grid>
162
162
  <div>
163
163
 
164
164
  <div class="uk-height-medium">
@@ -167,7 +167,7 @@
167
167
  <p>Some content before the overflow auto container.</p>
168
168
 
169
169
  <div uk-overflow-auto="selContainer: .uk-height-medium; selContent: .js-wrapper">
170
- <div class="uk-grid uk-grid-small">
170
+ <div class="uk-grid-small" uk-grid>
171
171
  <div class="uk-width-1-2"><img src="images/light.jpg" width="1800" height="1200" alt=""></div>
172
172
  <div class="uk-width-1-2"><img src="images/dark.jpg" width="1800" height="1200" alt=""></div>
173
173
  </div>
@@ -187,7 +187,7 @@
187
187
  <p>Some content before the overflow auto container.</p>
188
188
 
189
189
  <div uk-overflow-auto="selContainer: .uk-height-medium; selContent: .js-wrapper">
190
- <div class="uk-grid uk-grid-small">
190
+ <div class="uk-grid-small" uk-grid>
191
191
  <div class="uk-width-1-2"><img src="images/light.jpg" width="1800" height="1200" alt=""></div>
192
192
  <div class="uk-width-1-2"><img src="images/dark.jpg" width="1800" height="1200" alt=""></div>
193
193
  <div class="uk-width-1-2"><img src="images/photo.jpg" width="1800" height="1200" alt=""></div>
@@ -232,7 +232,7 @@
232
232
 
233
233
  <h2>Overflow Fade</h2>
234
234
 
235
- <div class="uk-grid uk-child-width-1-2@m">
235
+ <div class="uk-child-width-1-2@m" uk-grid>
236
236
  <div>
237
237
 
238
238
  <div class="uk-margin" uk-overflow-fade>
@@ -390,7 +390,7 @@
390
390
 
391
391
  <h2>Responsive Objects</h2>
392
392
 
393
- <div class="uk-grid uk-child-width-1-3@s">
393
+ <div class="uk-child-width-1-3@s" uk-grid>
394
394
  <div>
395
395
  <p>JS Responsive Width (Iframe)</p>
396
396
  <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?rel=0" width="1920" height="1080" allowfullscreen uk-responsive uk-video="autoplay: false"></iframe>
@@ -403,7 +403,7 @@
403
403
 
404
404
  <h2>Object Fit and Position</h2>
405
405
 
406
- <div class="uk-grid uk-child-width-1-3@s">
406
+ <div class="uk-child-width-1-3@s" uk-grid>
407
407
  <div>
408
408
  <p>Object Fit Cover</p>
409
409
  <img class="uk-object-cover" src="images/photo.jpg" width="1000" height="1000" alt="" style="aspect-ratio: 1 / 1;">
@@ -420,7 +420,7 @@
420
420
 
421
421
  <h2>Box-shadows</h2>
422
422
 
423
- <div class="uk-grid uk-child-width-1-5@m uk-grid-large">
423
+ <div class="uk-child-width-1-5@m uk-grid-large" uk-grid>
424
424
  <div>
425
425
 
426
426
  <div class="uk-inline uk-box-shadow-hover-small">
@@ -538,6 +538,106 @@
538
538
  </div>
539
539
  </div>
540
540
 
541
+ <h2>Box-shadow Bottom</h2>
542
+
543
+ <div class="uk-child-width-1-5@m uk-grid-large" uk-grid>
544
+ <div class="uk-width-1-6@m">
545
+
546
+ <div class="uk-box-shadow-bottom">
547
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
548
+ </div>
549
+
550
+ </div>
551
+ <div class="uk-width-1-3@m">
552
+
553
+ <div class="uk-box-shadow-bottom">
554
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
555
+ </div>
556
+
557
+ </div>
558
+ <div class="uk-width-1-2@m">
559
+
560
+ <div class="uk-box-shadow-bottom">
561
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
562
+ </div>
563
+
564
+ </div>
565
+ </div>
566
+
567
+ <h2>Drop Cap</h2>
568
+
569
+ <p class="uk-text-lead uk-dropcap">Dorem 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
570
+
571
+ <div class="uk-dropcap">
572
+ <p>Torem 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. 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.</p>
573
+ </div>
574
+
575
+ <h1>Logo</h1>
576
+
577
+ <p>
578
+ <a class="uk-logo" href="#">Text Logo</a>
579
+ </p>
580
+
581
+ <div class="uk-child-width-auto uk-grid-small" uk-grid>
582
+ <div>
583
+ <p>Image<br>-</p>
584
+ <a class="uk-logo" href="#" aria-label="Back to Home">
585
+ <img src="images/photo.jpg" width="150" height="100" alt="">
586
+ </a>
587
+ </div>
588
+ <div>
589
+ <p>Picture<br>-</p>
590
+ <a class="uk-logo" href="#" aria-label="Back to Home">
591
+ <picture>
592
+ <img src="images/photo.jpg" width="150" height="100" alt="">
593
+ </picture>
594
+ </a>
595
+ </div>
596
+ <div>
597
+ <p>Image<br>Inverse Image</p>
598
+ <a class="uk-logo" href="#" aria-label="Back to Home">
599
+ <img src="images/photo.jpg" width="150" height="100" alt="">
600
+ <img class="uk-logo-inverse" src="images/dark.jpg" width="150" height="100" alt="">
601
+ </a>
602
+ </div>
603
+ <div>
604
+ <p>Picture<br>Inverse Picture</p>
605
+ <a class="uk-logo" href="#" aria-label="Back to Home">
606
+ <picture>
607
+ <img src="images/photo.jpg" width="150" height="100" alt="">
608
+ </picture>
609
+ <picture>
610
+ <img class="uk-logo-inverse" src="images/dark.jpg" width="150" height="100" alt="">
611
+ </picture>
612
+ </a>
613
+ </div>
614
+ <div>
615
+ <p>Picture<br>Inverse SVG</p>
616
+ <a class="uk-logo" href="#" aria-label="Back to Home">
617
+ <picture>
618
+ <img src="images/photo.jpg" width="150" height="100" alt="">
619
+ </picture>
620
+ <img class="uk-logo-inverse" src="images/icons.svg#trash" alt="" uk-svg>
621
+ </a>
622
+ </div>
623
+ <div>
624
+ <p>SVG<br>Inverse Picture</p>
625
+ <a class="uk-logo" href="#" aria-label="Back to Home">
626
+ <img src="images/icons.svg#table" alt="" uk-svg>
627
+ <picture>
628
+ <img class="uk-logo-inverse" src="images/dark.jpg" width="150" height="100" alt="">
629
+ </picture>
630
+ </a>
631
+ </div>
632
+ <div>
633
+ <p>SVG<br>Inverse SVG</p>
634
+ <a class="uk-logo" href="#" aria-label="Back to Home">
635
+ <img src="images/icons.svg#table" alt="" uk-svg>
636
+ <img class="uk-logo-inverse" src="images/icons.svg#trash" alt="" uk-svg>
637
+ </a>
638
+ </div>
639
+ </div>
640
+
541
641
  </div>
542
642
 
543
643
  </body>