uikit 3.11.1-dev.fbcf9eec9 → 3.11.2-dev.06fe7f1d0

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 (225) hide show
  1. package/.eslintrc.json +4 -49
  2. package/.prettierignore +14 -0
  3. package/.prettierrc.json +13 -0
  4. package/.webstorm.js +3 -3
  5. package/CHANGELOG.md +64 -17
  6. package/build/.eslintrc.json +1 -3
  7. package/build/build.js +26 -28
  8. package/build/icons.js +7 -11
  9. package/build/less.js +48 -36
  10. package/build/package.json +2 -2
  11. package/build/prefix.js +21 -18
  12. package/build/publishDev.js +6 -8
  13. package/build/release.js +20 -17
  14. package/build/scope.js +21 -11
  15. package/build/scss.js +72 -39
  16. package/build/util.js +71 -62
  17. package/build/wrapper/icons.js +0 -2
  18. package/dist/css/uikit-core-rtl.css +133 -201
  19. package/dist/css/uikit-core-rtl.min.css +1 -1
  20. package/dist/css/uikit-core.css +133 -201
  21. package/dist/css/uikit-core.min.css +1 -1
  22. package/dist/css/uikit-rtl.css +135 -207
  23. package/dist/css/uikit-rtl.min.css +1 -1
  24. package/dist/css/uikit.css +135 -207
  25. package/dist/css/uikit.min.css +1 -1
  26. package/dist/js/components/countdown.js +88 -133
  27. package/dist/js/components/countdown.min.js +1 -1
  28. package/dist/js/components/filter.js +408 -439
  29. package/dist/js/components/filter.min.js +1 -1
  30. package/dist/js/components/lightbox-panel.js +1091 -1319
  31. package/dist/js/components/lightbox-panel.min.js +1 -1
  32. package/dist/js/components/lightbox.js +1137 -1396
  33. package/dist/js/components/lightbox.min.js +1 -1
  34. package/dist/js/components/notification.js +94 -114
  35. package/dist/js/components/notification.min.js +1 -1
  36. package/dist/js/components/parallax.js +345 -363
  37. package/dist/js/components/parallax.min.js +1 -1
  38. package/dist/js/components/slider-parallax.js +343 -351
  39. package/dist/js/components/slider-parallax.min.js +1 -1
  40. package/dist/js/components/slider.js +749 -843
  41. package/dist/js/components/slider.min.js +1 -1
  42. package/dist/js/components/slideshow-parallax.js +343 -351
  43. package/dist/js/components/slideshow-parallax.min.js +1 -1
  44. package/dist/js/components/slideshow.js +628 -798
  45. package/dist/js/components/slideshow.min.js +1 -1
  46. package/dist/js/components/sortable.js +587 -621
  47. package/dist/js/components/sortable.min.js +1 -1
  48. package/dist/js/components/tooltip.js +324 -356
  49. package/dist/js/components/tooltip.min.js +1 -1
  50. package/dist/js/components/upload.js +156 -167
  51. package/dist/js/components/upload.min.js +1 -1
  52. package/dist/js/uikit-core.js +5327 -6494
  53. package/dist/js/uikit-core.min.js +1 -1
  54. package/dist/js/uikit-icons.js +7 -9
  55. package/dist/js/uikit-icons.min.js +1 -1
  56. package/dist/js/uikit.js +8035 -9623
  57. package/dist/js/uikit.min.js +1 -1
  58. package/jsconfig.json +1 -1
  59. package/package.json +64 -60
  60. package/src/js/api/boot.js +25 -32
  61. package/src/js/api/component.js +15 -28
  62. package/src/js/api/global.js +6 -12
  63. package/src/js/api/hooks.js +14 -33
  64. package/src/js/api/instance.js +7 -15
  65. package/src/js/api/state.js +199 -187
  66. package/src/js/components/countdown.js +26 -52
  67. package/src/js/components/filter.js +70 -66
  68. package/src/js/components/index.js +13 -13
  69. package/src/js/components/internal/lightbox-animations.js +14 -25
  70. package/src/js/components/internal/slider-preload.js +9 -0
  71. package/src/js/components/internal/slider-transitioner.js +66 -45
  72. package/src/js/components/internal/slideshow-animations.js +46 -64
  73. package/src/js/components/lightbox-panel.js +107 -105
  74. package/src/js/components/lightbox.js +17 -39
  75. package/src/js/components/notification.js +49 -43
  76. package/src/js/components/parallax.js +21 -46
  77. package/src/js/components/slider-parallax.js +13 -23
  78. package/src/js/components/slider.js +117 -89
  79. package/src/js/components/slideshow-parallax.js +1 -1
  80. package/src/js/components/slideshow.js +15 -13
  81. package/src/js/components/sortable.js +126 -108
  82. package/src/js/components/tooltip.js +41 -31
  83. package/src/js/components/upload.js +53 -63
  84. package/src/js/core/accordion.js +58 -48
  85. package/src/js/core/alert.js +9 -17
  86. package/src/js/core/core.js +17 -69
  87. package/src/js/core/cover.js +15 -15
  88. package/src/js/core/drop.js +110 -94
  89. package/src/js/core/form-custom.js +22 -27
  90. package/src/js/core/gif.js +3 -7
  91. package/src/js/core/grid.js +57 -58
  92. package/src/js/core/height-match.js +16 -29
  93. package/src/js/core/height-viewport.js +31 -35
  94. package/src/js/core/icon.js +47 -52
  95. package/src/js/core/img.js +153 -143
  96. package/src/js/core/index.js +39 -39
  97. package/src/js/core/leader.js +9 -18
  98. package/src/js/core/margin.js +21 -37
  99. package/src/js/core/modal.js +49 -36
  100. package/src/js/core/nav.js +2 -4
  101. package/src/js/core/navbar.js +113 -85
  102. package/src/js/core/offcanvas.js +51 -54
  103. package/src/js/core/overflow-auto.js +13 -17
  104. package/src/js/core/responsive.js +14 -12
  105. package/src/js/core/scroll.js +10 -20
  106. package/src/js/core/scrollspy-nav.js +34 -31
  107. package/src/js/core/scrollspy.js +37 -54
  108. package/src/js/core/sticky.js +197 -132
  109. package/src/js/core/svg.js +68 -83
  110. package/src/js/core/switcher.js +56 -47
  111. package/src/js/core/tab.js +7 -10
  112. package/src/js/core/toggle.js +69 -68
  113. package/src/js/core/video.js +22 -21
  114. package/src/js/mixin/animate.js +19 -20
  115. package/src/js/mixin/class.js +2 -4
  116. package/src/js/mixin/container.js +7 -11
  117. package/src/js/mixin/internal/animate-fade.js +73 -30
  118. package/src/js/mixin/internal/animate-slide.js +58 -41
  119. package/src/js/mixin/internal/slideshow-animations.js +7 -14
  120. package/src/js/mixin/internal/slideshow-transitioner.js +10 -17
  121. package/src/js/mixin/lazyload.js +20 -0
  122. package/src/js/mixin/media.js +5 -10
  123. package/src/js/mixin/modal.js +89 -66
  124. package/src/js/mixin/parallax.js +173 -120
  125. package/src/js/mixin/position.js +26 -20
  126. package/src/js/mixin/slider-autoplay.js +12 -21
  127. package/src/js/mixin/slider-drag.js +64 -65
  128. package/src/js/mixin/slider-nav.js +26 -35
  129. package/src/js/mixin/slider-reactive.js +2 -8
  130. package/src/js/mixin/slider.js +47 -60
  131. package/src/js/mixin/slideshow.js +12 -22
  132. package/src/js/mixin/swipe.js +72 -0
  133. package/src/js/mixin/togglable.js +89 -63
  134. package/src/js/uikit-core.js +2 -4
  135. package/src/js/uikit.js +2 -4
  136. package/src/js/util/ajax.js +25 -40
  137. package/src/js/util/animation.js +77 -75
  138. package/src/js/util/attr.js +17 -21
  139. package/src/js/util/class.js +14 -52
  140. package/src/js/util/dimensions.js +78 -49
  141. package/src/js/util/dom.js +39 -66
  142. package/src/js/util/env.js +7 -12
  143. package/src/js/util/event.js +60 -59
  144. package/src/js/util/fastdom.js +3 -8
  145. package/src/js/util/filter.js +17 -34
  146. package/src/js/util/index.js +1 -1
  147. package/src/js/util/lang.js +82 -121
  148. package/src/js/util/mouse.js +19 -17
  149. package/src/js/util/observer.js +36 -0
  150. package/src/js/util/options.js +35 -49
  151. package/src/js/util/player.js +41 -36
  152. package/src/js/util/position.js +54 -46
  153. package/src/js/util/selector.js +43 -58
  154. package/src/js/util/style.js +39 -49
  155. package/src/js/util/viewport.js +81 -66
  156. package/src/less/components/base.less +10 -33
  157. package/src/less/components/flex.less +0 -9
  158. package/src/less/components/form-range.less +48 -95
  159. package/src/less/components/form.less +0 -1
  160. package/src/less/components/height.less +3 -0
  161. package/src/less/components/leader.less +0 -1
  162. package/src/less/components/lightbox.less +0 -1
  163. package/src/less/components/modal.less +3 -7
  164. package/src/less/components/navbar.less +0 -7
  165. package/src/less/components/progress.less +14 -36
  166. package/src/less/components/slider.less +0 -3
  167. package/src/less/components/slideshow.less +0 -3
  168. package/src/less/components/text.less +16 -32
  169. package/src/less/components/utility.less +25 -0
  170. package/src/scss/components/base.scss +10 -33
  171. package/src/scss/components/flex.scss +0 -9
  172. package/src/scss/components/form-range.scss +48 -95
  173. package/src/scss/components/form.scss +3 -4
  174. package/src/scss/components/height.scss +3 -0
  175. package/src/scss/components/icon.scss +2 -2
  176. package/src/scss/components/leader.scss +0 -1
  177. package/src/scss/components/lightbox.scss +0 -1
  178. package/src/scss/components/modal.scss +3 -7
  179. package/src/scss/components/navbar.scss +0 -7
  180. package/src/scss/components/progress.scss +14 -36
  181. package/src/scss/components/search.scss +1 -1
  182. package/src/scss/components/slider.scss +0 -3
  183. package/src/scss/components/slideshow.scss +0 -3
  184. package/src/scss/components/text.scss +16 -32
  185. package/src/scss/components/utility.scss +25 -0
  186. package/src/scss/mixins-theme.scss +1 -1
  187. package/src/scss/mixins.scss +1 -1
  188. package/src/scss/variables-theme.scss +9 -9
  189. package/src/scss/variables.scss +9 -9
  190. package/tests/align.html +10 -10
  191. package/tests/animation.html +2 -2
  192. package/tests/article.html +2 -2
  193. package/tests/base.html +3 -3
  194. package/tests/card.html +10 -10
  195. package/tests/column.html +3 -3
  196. package/tests/comment.html +9 -9
  197. package/tests/dotnav.html +3 -3
  198. package/tests/image.html +296 -64
  199. package/tests/images/image-type.avif +0 -0
  200. package/tests/images/image-type.jpeg +0 -0
  201. package/tests/images/image-type.webp +0 -0
  202. package/tests/index.html +8 -8
  203. package/tests/js/index.js +114 -85
  204. package/tests/lightbox.html +10 -10
  205. package/tests/marker.html +2 -2
  206. package/tests/modal.html +8 -9
  207. package/tests/navbar.html +2 -2
  208. package/tests/overlay.html +7 -7
  209. package/tests/parallax.html +16 -7
  210. package/tests/position.html +12 -12
  211. package/tests/slidenav.html +12 -12
  212. package/tests/slider.html +20 -20
  213. package/tests/sortable.html +1 -1
  214. package/tests/sticky-parallax.html +87 -99
  215. package/tests/sticky.html +56 -24
  216. package/tests/svg.html +6 -6
  217. package/tests/table.html +11 -11
  218. package/tests/thumbnav.html +12 -12
  219. package/tests/transition.html +30 -30
  220. package/tests/utility.html +50 -33
  221. package/tests/video.html +1 -1
  222. package/tests/width.html +1 -1
  223. package/src/js/mixin/flex-bug.js +0 -56
  224. package/src/js/util/promise.js +0 -191
  225. package/tests/images/animated.gif +0 -0
package/tests/column.html CHANGED
@@ -22,7 +22,7 @@
22
22
 
23
23
  <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>
24
24
 
25
- <img src="images/photo.jpg" alt="">
25
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
26
26
 
27
27
  <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>
28
28
 
@@ -38,7 +38,7 @@
38
38
 
39
39
  <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>
40
40
 
41
- <img src="images/photo.jpg" alt="">
41
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
42
42
 
43
43
  <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>
44
44
 
@@ -59,7 +59,7 @@
59
59
  <footer>Someone famous in <cite><a href="">Source Title</a></cite></footer>
60
60
  </blockquote>
61
61
 
62
- <img src="images/photo.jpg" alt="">
62
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
63
63
 
64
64
  <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>
65
65
 
package/tests/comment.html CHANGED
@@ -22,7 +22,7 @@
22
22
  <header class="uk-comment-header">
23
23
  <div class="uk-grid-medium uk-flex-middle" uk-grid>
24
24
  <div class="uk-width-auto">
25
- <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" alt="">
25
+ <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" height="50" alt="">
26
26
  </div>
27
27
  <div class="uk-width-expand">
28
28
  <h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Author</a></h4>
@@ -43,7 +43,7 @@
43
43
  <header class="uk-comment-header uk-position-relative">
44
44
  <div class="uk-grid-medium uk-flex-middle" uk-grid>
45
45
  <div class="uk-width-auto">
46
- <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" alt="">
46
+ <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" height="50" alt="">
47
47
  </div>
48
48
  <div class="uk-width-expand">
49
49
  <h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Author</a></h4>
@@ -62,7 +62,7 @@
62
62
  <header class="uk-comment-header uk-position-relative">
63
63
  <div class="uk-grid-medium uk-flex-middle" uk-grid>
64
64
  <div class="uk-width-auto">
65
- <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" alt="">
65
+ <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" height="50" alt="">
66
66
  </div>
67
67
  <div class="uk-width-expand">
68
68
  <h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Author</a></h4>
@@ -81,7 +81,7 @@
81
81
  <header class="uk-comment-header uk-position-relative">
82
82
  <div class="uk-grid-medium uk-flex-middle" uk-grid>
83
83
  <div class="uk-width-auto">
84
- <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" alt="">
84
+ <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" height="50" alt="">
85
85
  </div>
86
86
  <div class="uk-width-expand">
87
87
  <h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Author</a></h4>
@@ -100,7 +100,7 @@
100
100
  <header class="uk-comment-header uk-position-relative">
101
101
  <div class="uk-grid-medium uk-flex-middle" uk-grid>
102
102
  <div class="uk-width-auto">
103
- <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" alt="">
103
+ <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" height="50" alt="">
104
104
  </div>
105
105
  <div class="uk-width-expand">
106
106
  <h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Author</a></h4>
@@ -123,7 +123,7 @@
123
123
  <header class="uk-comment-header uk-position-relative">
124
124
  <div class="uk-grid-medium uk-flex-middle" uk-grid>
125
125
  <div class="uk-width-auto">
126
- <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" alt="">
126
+ <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" height="50" alt="">
127
127
  </div>
128
128
  <div class="uk-width-expand">
129
129
  <h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Author</a></h4>
@@ -145,7 +145,7 @@
145
145
  <header class="uk-comment-header uk-position-relative">
146
146
  <div class="uk-grid-medium uk-flex-middle" uk-grid>
147
147
  <div class="uk-width-auto">
148
- <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" alt="">
148
+ <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" height="50" alt="">
149
149
  </div>
150
150
  <div class="uk-width-expand">
151
151
  <h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Author</a></h4>
@@ -164,7 +164,7 @@
164
164
  <header class="uk-comment-header uk-position-relative">
165
165
  <div class="uk-grid-medium uk-flex-middle" uk-grid>
166
166
  <div class="uk-width-auto">
167
- <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" alt="">
167
+ <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" height="50" alt="">
168
168
  </div>
169
169
  <div class="uk-width-expand">
170
170
  <h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Author</a></h4>
@@ -183,7 +183,7 @@
183
183
  <header class="uk-comment-header uk-position-relative">
184
184
  <div class="uk-grid-medium uk-flex-middle" uk-grid>
185
185
  <div class="uk-width-auto">
186
- <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" alt="">
186
+ <img class="uk-comment-avatar" src="images/avatar.jpg" width="50" height="50" alt="">
187
187
  </div>
188
188
  <div class="uk-width-expand">
189
189
  <h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Author</a></h4>
package/tests/dotnav.html CHANGED
@@ -42,7 +42,7 @@
42
42
  <div>
43
43
 
44
44
  <div class="uk-inline uk-light">
45
- <img src="images/photo.jpg" alt="">
45
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
46
46
  <div class="uk-position-small uk-position-bottom-center">
47
47
  <ul class="uk-dotnav">
48
48
  <li class="uk-active"><a href="#">Item 1</a></li>
@@ -69,7 +69,7 @@
69
69
  <div>
70
70
 
71
71
  <div class="uk-inline uk-light">
72
- <img src="images/dark.jpg" alt="">
72
+ <img src="images/dark.jpg" width="1800" height="1200" alt="">
73
73
  <div class="uk-position-small uk-position-bottom-center">
74
74
  <ul class="uk-dotnav">
75
75
  <li class="uk-active"><a href="#">Item 1</a></li>
@@ -96,7 +96,7 @@
96
96
  <div>
97
97
 
98
98
  <div class="uk-inline uk-dark">
99
- <img src="images/light.jpg" alt="">
99
+ <img src="images/light.jpg" width="1800" height="1200" alt="">
100
100
  <div class="uk-position-small uk-position-bottom-center">
101
101
  <ul class="uk-dotnav">
102
102
  <li class="uk-active"><a href="#">Item 1</a></li>
package/tests/image.html CHANGED
@@ -14,21 +14,292 @@
14
14
 
15
15
  <h1>Image</h1>
16
16
 
17
- <p><button class="uk-button uk-button-default" onclick="sessionStorage.clear()">Clear Session Storage</button></p>
17
+ <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light" data-src="https://images.unsplash.com/photo-1495321308589-43affb814eee?fit=crop&w=1200&h=450&q=80" uk-img="loading: eager">
18
+ <h1>Background Image Loading Eager</h1>
19
+ </div>
20
+
21
+ <h2>Loading Lazy Attribute</h2>
18
22
 
19
23
  <div class="uk-child-width-1-2@m" uk-grid>
20
24
  <div>
21
- <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>
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
+ <p class="uk-margin-small-top">Image</p>
27
+ </div>
28
+ <div>
29
+ <picture>
30
+ <source srcset="https://images.unsplash.com/photo-1487958449943-2429e8be8625?fit=crop&w=580&h=386&q=80 580w,
31
+ https://images.unsplash.com/photo-1487958449943-2429e8be8625?fit=crop&w=900&h=600&q=80 900w"
32
+ media="(min-width: 1200px)">
33
+ <img src="https://images.unsplash.com/photo-1435575653489-b0873ec954e2?fit=crop&w=900&h=600&q=80"
34
+ srcset="https://images.unsplash.com/photo-1435575653489-b0873ec954e2?fit=crop&w=580&h=386&q=80 580w,
35
+ https://images.unsplash.com/photo-1435575653489-b0873ec954e2?fit=crop&w=900&h=600&q=80 900w"
36
+ sizes="(min-width: 960px) 580px, 100vw"
37
+ width="900" height="600" alt="" loading="lazy">
38
+ </picture>
39
+ <p class="uk-margin-small-top">Picture with Srcset</p>
40
+ </div>
41
+ </div>
42
+
43
+ <div class="uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid>
44
+ <div>
45
+ <img src="https://images.unsplash.com/photo-1517842536804-bf6629e2c291?fit=crop&w=373&h=249&q=80"
46
+ srcset="https://images.unsplash.com/photo-1517842536804-bf6629e2c291?fit=crop&w=373&h=249&q=80 373w,
47
+ https://images.unsplash.com/photo-1517842536804-bf6629e2c291?fit=crop&w=746&h=498&q=80 746w"
48
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
49
+ width="746" height="498" alt="" loading="lazy">
50
+ </div>
51
+ <div>
52
+ <img src="https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?fit=crop&w=373&h=249&q=80"
53
+ srcset="https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?fit=crop&w=373&h=249&q=80 373w,
54
+ https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?fit=crop&w=746&h=498&q=80 746w"
55
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
56
+ width="746" height="498" alt="" loading="lazy">
57
+ </div>
58
+ <div>
59
+ <img src="https://images.unsplash.com/photo-1645042770830-b698d978c49a?fit=crop&w=373&h=249&q=80"
60
+ srcset="https://images.unsplash.com/photo-1645042770830-b698d978c49a?fit=crop&w=373&h=249&q=80 373w,
61
+ https://images.unsplash.com/photo-1645042770830-b698d978c49a?fit=crop&w=746&h=498&q=80 746w"
62
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
63
+ width="746" height="498" alt="" loading="lazy">
64
+ </div>
65
+ <div>
66
+ <img src="https://images.unsplash.com/photo-1645022576935-fc012945f8e7?fit=crop&w=373&h=249&q=80"
67
+ srcset="https://images.unsplash.com/photo-1645022576935-fc012945f8e7?fit=crop&w=373&h=249&q=80 373w,
68
+ https://images.unsplash.com/photo-1645022576935-fc012945f8e7?fit=crop&w=746&h=498&q=80 746w"
69
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
70
+ width="746" height="498" alt="" loading="lazy">
71
+ </div>
72
+ <div>
73
+ <img src="https://images.unsplash.com/photo-1562315434-3e2de605346e?fit=crop&w=373&h=249&q=80"
74
+ srcset="https://images.unsplash.com/photo-1562315434-3e2de605346e?fit=crop&w=373&h=249&q=80 373w,
75
+ https://images.unsplash.com/photo-1562315434-3e2de605346e?fit=crop&w=746&h=498&q=80 746w"
76
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
77
+ width="746" height="498" alt="" loading="lazy">
78
+ </div>
79
+ <div>
80
+ <img src="https://images.unsplash.com/photo-1644489263914-eef937e00343?fit=crop&w=373&h=249&q=80"
81
+ srcset="https://images.unsplash.com/photo-1644489263914-eef937e00343?fit=crop&w=373&h=249&q=80 373w,
82
+ https://images.unsplash.com/photo-1644489263914-eef937e00343?fit=crop&w=746&h=498&q=80 746w"
83
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
84
+ width="746" height="498" alt="" loading="lazy">
85
+ </div>
86
+ <div>
87
+ <img src="https://images.unsplash.com/photo-1644990978896-c86bd2e5fd2e?fit=crop&w=373&h=249&q=80"
88
+ srcset="https://images.unsplash.com/photo-1644990978896-c86bd2e5fd2e?fit=crop&w=373&h=249&q=80 373w,
89
+ https://images.unsplash.com/photo-1644990978896-c86bd2e5fd2e?fit=crop&w=746&h=498&q=80 746w"
90
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
91
+ width="746" height="498" alt="" loading="lazy">
92
+ </div>
93
+ <div>
94
+ <img src="https://images.unsplash.com/photo-1642628658566-1db49cadf78c?fit=crop&w=373&h=249&q=80"
95
+ srcset="https://images.unsplash.com/photo-1642628658566-1db49cadf78c?fit=crop&w=373&h=249&q=80 373w,
96
+ https://images.unsplash.com/photo-1642628658566-1db49cadf78c?fit=crop&w=746&h=498&q=80 746w"
97
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
98
+ width="746" height="498" alt="" loading="lazy">
99
+ </div>
100
+ <div>
101
+ <img src="https://images.unsplash.com/photo-1508138119323-5452bd81d53d?fit=crop&w=373&h=249&q=80"
102
+ srcset="https://images.unsplash.com/photo-1508138119323-5452bd81d53d?fit=crop&w=373&h=249&q=80 373w,
103
+ https://images.unsplash.com/photo-1508138119323-5452bd81d53d?fit=crop&w=746&h=498&q=80 746w"
104
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
105
+ width="746" height="498" alt="" loading="lazy">
106
+ </div>
107
+ <div>
108
+ <img src="https://images.unsplash.com/photo-1643610493325-89876f661588?fit=crop&w=373&h=249&q=80"
109
+ srcset="https://images.unsplash.com/photo-1643610493325-89876f661588?fit=crop&w=373&h=249&q=80 373w,
110
+ https://images.unsplash.com/photo-1643610493325-89876f661588?fit=crop&w=746&h=498&q=80 746w"
111
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
112
+ width="746" height="498" alt="" loading="lazy">
113
+ </div>
114
+ <div>
115
+ <img src="https://images.unsplash.com/photo-1638518716535-955899d18a19?fit=crop&w=373&h=249&q=80"
116
+ srcset="https://images.unsplash.com/photo-1638518716535-955899d18a19?fit=crop&w=373&h=249&q=80 373w,
117
+ https://images.unsplash.com/photo-1638518716535-955899d18a19?fit=crop&w=746&h=498&q=80 746w"
118
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
119
+ width="746" height="498" alt="" loading="lazy">
120
+ </div>
121
+ <div>
122
+ <img src="https://images.unsplash.com/photo-1566221522142-ebbf26f78096?fit=crop&w=373&h=249&q=80"
123
+ srcset="https://images.unsplash.com/photo-1566221522142-ebbf26f78096?fit=crop&w=373&h=249&q=80 373w,
124
+ https://images.unsplash.com/photo-1566221522142-ebbf26f78096?fit=crop&w=746&h=498&q=80 746w"
125
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
126
+ width="746" height="498" alt="" loading="lazy">
127
+ </div>
128
+ <div>
129
+ <img src="https://images.unsplash.com/photo-1643967894891-cbaa3714584a?fit=crop&w=373&h=249&q=80"
130
+ srcset="https://images.unsplash.com/photo-1643967894891-cbaa3714584a?fit=crop&w=373&h=249&q=80 373w,
131
+ https://images.unsplash.com/photo-1643967894891-cbaa3714584a?fit=crop&w=746&h=498&q=80 746w"
132
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
133
+ width="746" height="498" alt="" loading="lazy">
134
+ </div>
135
+ <div>
136
+ <img src="https://images.unsplash.com/photo-1535191059345-c16453b851b2?fit=crop&w=373&h=249&q=80"
137
+ srcset="https://images.unsplash.com/photo-1535191059345-c16453b851b2?fit=crop&w=373&h=249&q=80 373w,
138
+ https://images.unsplash.com/photo-1535191059345-c16453b851b2?fit=crop&w=746&h=498&q=80 746w"
139
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
140
+ width="746" height="498" alt="" loading="lazy">
141
+ </div>
142
+ <div>
143
+ <img src="https://images.unsplash.com/photo-1629757509637-7c99379d6d26?fit=crop&w=373&h=249&q=80"
144
+ srcset="https://images.unsplash.com/photo-1629757509637-7c99379d6d26?fit=crop&w=373&h=249&q=80 373w,
145
+ https://images.unsplash.com/photo-1629757509637-7c99379d6d26?fit=crop&w=746&h=498&q=80 746w"
146
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
147
+ width="746" height="498" alt="" loading="lazy">
148
+ </div>
149
+ <div>
150
+ <img src="https://images.unsplash.com/photo-1645572608840-8f32e4bcb084?fit=crop&w=373&h=249&q=80"
151
+ srcset="https://images.unsplash.com/photo-1645572608840-8f32e4bcb084?fit=crop&w=373&h=249&q=80 373w,
152
+ https://images.unsplash.com/photo-1645572608840-8f32e4bcb084?fit=crop&w=746&h=498&q=80 746w"
153
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
154
+ width="746" height="498" alt="" loading="lazy">
155
+ </div>
156
+ <div>
157
+ <img src="https://images.unsplash.com/photo-1645403816136-fc4b964a3776?fit=crop&w=373&h=249&q=80"
158
+ srcset="https://images.unsplash.com/photo-1645403816136-fc4b964a3776?fit=crop&w=373&h=249&q=80 373w,
159
+ https://images.unsplash.com/photo-1645403816136-fc4b964a3776?fit=crop&w=746&h=498&q=80 746w"
160
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
161
+ width="746" height="498" alt="" loading="lazy">
162
+ </div>
163
+ <div>
164
+ <img src="https://images.unsplash.com/photo-1645363709954-b63ddfcd30e3?fit=crop&w=373&h=249&q=80"
165
+ srcset="https://images.unsplash.com/photo-1645363709954-b63ddfcd30e3?fit=crop&w=373&h=249&q=80 373w,
166
+ https://images.unsplash.com/photo-1645363709954-b63ddfcd30e3?fit=crop&w=746&h=498&q=80 746w"
167
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
168
+ width="746" height="498" alt="" loading="lazy">
169
+ </div>
170
+ <div>
171
+ <img src="https://images.unsplash.com/photo-1645363441277-b2be67dcdca0?fit=crop&w=373&h=249&q=80"
172
+ srcset="https://images.unsplash.com/photo-1645363441277-b2be67dcdca0?fit=crop&w=373&h=249&q=80 373w,
173
+ https://images.unsplash.com/photo-1645363441277-b2be67dcdca0?fit=crop&w=746&h=498&q=80 746w"
174
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
175
+ width="746" height="498" alt="" loading="lazy">
176
+ </div>
177
+ <div>
178
+ <img src="https://images.unsplash.com/photo-1645352809168-be1d1ef6d31c?fit=crop&w=373&h=249&q=80"
179
+ srcset="https://images.unsplash.com/photo-1645352809168-be1d1ef6d31c?fit=crop&w=373&h=249&q=80 373w,
180
+ https://images.unsplash.com/photo-1645352809168-be1d1ef6d31c?fit=crop&w=746&h=498&q=80 746w"
181
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
182
+ width="746" height="498" alt="" loading="lazy">
183
+ </div>
184
+ <div>
185
+ <img src="https://images.unsplash.com/photo-1643231164357-11790926b995?fit=crop&w=373&h=249&q=80"
186
+ srcset="https://images.unsplash.com/photo-1643231164357-11790926b995?fit=crop&w=373&h=249&q=80 373w,
187
+ https://images.unsplash.com/photo-1643231164357-11790926b995?fit=crop&w=746&h=498&q=80 746w"
188
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
189
+ width="746" height="498" alt="" loading="lazy">
190
+ </div>
191
+ <div>
192
+ <img src="https://images.unsplash.com/photo-1642702550383-3436f1b3d6ca?fit=crop&w=373&h=249&q=80"
193
+ srcset="https://images.unsplash.com/photo-1642702550383-3436f1b3d6ca?fit=crop&w=373&h=249&q=80 373w,
194
+ https://images.unsplash.com/photo-1642702550383-3436f1b3d6ca?fit=crop&w=746&h=498&q=80 746w"
195
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
196
+ width="746" height="498" alt="" loading="lazy">
197
+ </div>
198
+ <div>
199
+ <img src="https://images.unsplash.com/photo-1642773156765-6f5e392dec03?fit=crop&w=373&h=249&q=80"
200
+ srcset="https://images.unsplash.com/photo-1642773156765-6f5e392dec03?fit=crop&w=373&h=249&q=80 373w,
201
+ https://images.unsplash.com/photo-1642773156765-6f5e392dec03?fit=crop&w=746&h=498&q=80 746w"
202
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
203
+ width="746" height="498" alt="" loading="lazy">
204
+ </div>
205
+ <div>
206
+ <img src="https://images.unsplash.com/photo-1645570072967-82ceaea33b81?fit=crop&w=373&h=249&q=80"
207
+ srcset="https://images.unsplash.com/photo-1645570072967-82ceaea33b81?fit=crop&w=373&h=249&q=80 373w,
208
+ https://images.unsplash.com/photo-1645570072967-82ceaea33b81?fit=crop&w=746&h=498&q=80 746w"
209
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
210
+ width="746" height="498" alt="" loading="lazy">
22
211
  </div>
23
212
  <div>
24
- <img data-src="https://images.unsplash.com/photo-1503481766315-7a586b20f66d?fit=crop&w=900&h=600&q=80" width="900" height="600" alt="" uk-img>
213
+ <img src="https://images.unsplash.com/photo-1497636577773-f1231844b336?fit=crop&w=373&h=249&q=80"
214
+ srcset="https://images.unsplash.com/photo-1497636577773-f1231844b336?fit=crop&w=373&h=249&q=80 373w,
215
+ https://images.unsplash.com/photo-1497636577773-f1231844b336?fit=crop&w=746&h=498&q=80 746w"
216
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
217
+ width="746" height="498" alt="" loading="lazy">
218
+ </div>
219
+ <div>
220
+ <img src="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?fit=crop&w=373&h=249&q=80"
221
+ srcset="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?fit=crop&w=373&h=249&q=80 373w,
222
+ https://images.unsplash.com/photo-1517336714731-489689fd1ca8?fit=crop&w=746&h=498&q=80 746w"
223
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
224
+ width="746" height="498" alt="" loading="lazy">
225
+ </div>
226
+ <div>
227
+ <img src="https://images.unsplash.com/photo-1511300636408-a63a89df3482?fit=crop&w=373&h=249&q=80"
228
+ srcset="https://images.unsplash.com/photo-1511300636408-a63a89df3482?fit=crop&w=373&h=249&q=80 373w,
229
+ https://images.unsplash.com/photo-1511300636408-a63a89df3482?fit=crop&w=746&h=498&q=80 746w"
230
+ sizes="(min-width: 1200px) 373px, (min-width: 960px) 33vw, (min-width: 640px) 50vw, 100vw"
231
+ width="746" height="498" alt="" loading="lazy">
25
232
  </div>
26
233
  </div>
27
234
 
235
+ <h2>Background Image</h2>
236
+
28
237
  <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light" data-src="https://images.unsplash.com/photo-1490822180406-880c226c150b?fit=crop&w=1200&h=450&q=80" uk-img>
29
238
  <h1>Background Image</h1>
30
239
  </div>
31
240
 
241
+ <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle"
242
+ data-src="https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=1200&h=450&q=80"
243
+ data-srcset="https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=800&h=300&q=80 800w,
244
+ https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=1200&h=450&q=80 1200w,
245
+ https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=2400&h=900&q=80 2400w"
246
+ sizes="(min-width: 1200px) 1200px, 100vw" uk-img>
247
+ <h1>Background Image with Srcset</h1>
248
+ </div>
249
+
250
+ <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light"
251
+ sources="srcset: https://images.unsplash.com/photo-1487837647815-bbc1f30cd0d2?fit=crop&w=1200&h=450&q=80; media: (min-width: 1200px)"
252
+ data-src="https://images.unsplash.com/photo-1546349851-64285be8e9fa?fit=crop&w=1200&h=450&q=8"
253
+ uk-img>
254
+ <h1>Background Picture</h1>
255
+ </div>
256
+
257
+ <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light"
258
+ sources="srcset: https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=800&h=300&q=80 800w,
259
+ https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=1200&h=450&q=80 1200w,
260
+ https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=2400&h=900&q=80 2400w; media: (min-width: 1200px)"
261
+ data-src="https://images.unsplash.com/photo-1472803828399-39d4ac53c6e5?fit=crop&w=1200&h=450&q=80"
262
+ data-srcset="https://images.unsplash.com/photo-1472803828399-39d4ac53c6e5?fit=crop&w=800&h=300&q=80 800w,
263
+ https://images.unsplash.com/photo-1472803828399-39d4ac53c6e5?fit=crop&w=1200&h=450&q=80 1200w,
264
+ https://images.unsplash.com/photo-1472803828399-39d4ac53c6e5?fit=crop&w=2400&h=900&q=80 2400w"
265
+ sizes="(min-width: 1200px) 1200px, 100vw" uk-img>
266
+ <h1>Background Picture with Srcset</h1>
267
+ </div>
268
+
269
+ <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle"
270
+ sources="[{&quot;srcset&quot;: &quot;images/image-type.avif&quot;,
271
+ &quot;type&quot;: &quot;image\/avif&quot;
272
+ },
273
+ {&quot;srcset&quot;: &quot;images/image-type.webp&quot;,
274
+ &quot;type&quot;: &quot;image\/webp&quot;
275
+ }]"
276
+ data-src="images/image-type.jpg"
277
+ uk-img>
278
+ <h1>Background Picture with Multiple Sources</h1>
279
+ </div>
280
+
281
+ <h2>uk-img with Image element (Deprecated)</h2>
282
+
283
+ <div class="uk-child-width-1-2@m" uk-grid>
284
+ <div>
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
+ <p class="uk-margin-small-top">Image</p>
287
+ </div>
288
+ <div>
289
+ <picture>
290
+ <source data-srcset="https://images.unsplash.com/photo-1447933601403-0c6688de566e?fit=crop&w=580&h=386&q=80 580w,
291
+ https://images.unsplash.com/photo-1447933601403-0c6688de566e?fit=crop&w=900&h=600&q=80 900w"
292
+ media="(min-width: 1200px)">
293
+ <img data-src="https://images.unsplash.com/photo-1503481766315-7a586b20f66d?fit=crop&w=900&h=600&q=80"
294
+ data-srcset="https://images.unsplash.com/photo-1503481766315-7a586b20f66d?fit=crop&w=580&h=386&q=80 580w,
295
+ https://images.unsplash.com/photo-1503481766315-7a586b20f66d?fit=crop&w=900&h=600&q=80 900w"
296
+ sizes="(min-width: 960px) 580px, 100vw"
297
+ width="900" height="600" alt="" uk-img>
298
+ </picture>
299
+ <p class="uk-margin-small-top">Picture with Srcset</p>
300
+ </div>
301
+ </div>
302
+
32
303
  <div class="uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid>
33
304
  <div>
34
305
  <img data-src="https://images.unsplash.com/photo-1523359247812-29dde5ac53a0?fit=crop&w=373&h=249&q=80"
@@ -220,34 +491,7 @@
220
491
  width="746" height="498" alt="" uk-img>
221
492
  </div>
222
493
  </div>
223
-
224
- <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle"
225
- data-src="https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=1200&h=450&q=80"
226
- data-srcset="https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=800&h=300&q=80 800w,
227
- https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=1200&h=450&q=80 1200w,
228
- https://images.unsplash.com/photo-1485627941502-d2e6429a8af0?fit=crop&w=2400&h=900&q=80 2400w"
229
- sizes="(min-width: 1200px) 1200px, 100vw" uk-img>
230
- <h1>Background Image</h1>
231
- </div>
232
-
233
- <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light"
234
- data-src="https://images.unsplash.com/photo-1487837647815-bbc1f30cd0d2?fit=crop&w=1200&h=450&q=80"
235
- data-srcset="https://images.unsplash.com/photo-1487837647815-bbc1f30cd0d2?fit=crop&w=800&h=300&q=80 800w,
236
- https://images.unsplash.com/photo-1487837647815-bbc1f30cd0d2?fit=crop&w=1200&h=450&q=80 1200w,
237
- https://images.unsplash.com/photo-1487837647815-bbc1f30cd0d2?fit=crop&w=2400&h=900&q=80 2400w"
238
- sizes="(min-width: 1200px) 1200px, 100vw" uk-img>
239
- <h1>Background Image</h1>
240
- </div>
241
-
242
- <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light"
243
- data-src="https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=1200&h=450&q=80"
244
- data-srcset="https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=800&h=300&q=80 800w,
245
- https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=1200&h=450&q=80 1200w,
246
- https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=2400&h=900&q=80 2400w"
247
- sizes="(min-width: 1200px) 1200px, 100vw" uk-img>
248
- <h1>Background Image</h1>
249
- </div>
250
-
494
+
251
495
  <div class="uk-child-width-1-2@m" uk-grid>
252
496
  <div>
253
497
 
@@ -255,28 +499,28 @@
255
499
 
256
500
  <ul class="uk-slideshow-items">
257
501
  <li>
258
- <img data-src="images/photo.jpg" alt="" uk-cover data-width="1800" data-height="1200" uk-img="target: !.uk-slideshow-items > :last-child, !* +*">
502
+ <img data-src="images/photo.jpg" alt="" uk-cover uk-img="target: !.uk-slideshow-items > :last-child, !* +*">
259
503
  <div class="uk-position-center uk-position-small uk-text-center">
260
504
  <h2 uk-slideshow-parallax="x: 100,-100">Heading</h2>
261
505
  <p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
262
506
  </div>
263
507
  </li>
264
508
  <li>
265
- <img data-src="images/dark.jpg" alt="" uk-cover data-width="1800" data-height="1200" uk-img="target: !* -*, !* +*">
509
+ <img data-src="images/dark.jpg" alt="" uk-cover uk-img="target: !* -*, !* +*">
266
510
  <div class="uk-position-center uk-position-small uk-text-center">
267
511
  <h2 uk-slideshow-parallax="x: 100,-100">Heading</h2>
268
512
  <p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
269
513
  </div>
270
514
  </li>
271
515
  <li>
272
- <img data-src="images/light.jpg" alt="" uk-cover data-width="1800" data-height="1200" uk-img="target: !* -*, !* +*">
516
+ <img data-src="images/light.jpg" alt="" uk-cover uk-img="target: !* -*, !* +*">
273
517
  <div class="uk-position-center uk-position-small uk-text-center">
274
518
  <h2 uk-slideshow-parallax="y: -50,0,0; opacity: 1,1,0">Heading</h2>
275
519
  <p uk-slideshow-parallax="y: 50,0,0; opacity: 1,1,0">Lorem ipsum dolor sit amet.</p>
276
520
  </div>
277
521
  </li>
278
522
  <li>
279
- <img data-src="images/photo2.jpg" alt="" uk-cover data-width="1800" data-height="1200" uk-img="target: !* -*, !.uk-slideshow-items > :first-child">
523
+ <img data-src="images/photo2.jpg" alt="" uk-cover uk-img="target: !* -*, !.uk-slideshow-items > :first-child">
280
524
  <div class="uk-position-center uk-position-small uk-text-center">
281
525
  <h2 uk-slideshow-parallax="x: 200,0,0">Heading</h2>
282
526
  <p uk-slideshow-parallax="x: 0,0,-200">Lorem ipsum dolor sit amet.</p>
@@ -296,43 +540,43 @@
296
540
 
297
541
  <ul class="uk-slider-items uk-child-width-1-2@s uk-child-width-1-3@m">
298
542
  <li>
299
- <img data-src="images/slider1.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
543
+ <img data-src="images/slider1.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
300
544
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">1</h1></div>
301
545
  </li>
302
546
  <li>
303
- <img data-src="images/slider2.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
547
+ <img data-src="images/slider2.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
304
548
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">2</h1></div>
305
549
  </li>
306
550
  <li>
307
- <img data-src="images/slider3.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
551
+ <img data-src="images/slider3.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
308
552
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">3</h1></div>
309
553
  </li>
310
554
  <li>
311
- <img data-src="images/slider4.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
555
+ <img data-src="images/slider4.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
312
556
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">4</h1></div>
313
557
  </li>
314
558
  <li>
315
- <img data-src="images/slider5.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
559
+ <img data-src="images/slider5.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
316
560
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">5</h1></div>
317
561
  </li>
318
562
  <li>
319
- <img data-src="images/slider1.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
563
+ <img data-src="images/slider1.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
320
564
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">6</h1></div>
321
565
  </li>
322
566
  <li>
323
- <img data-src="images/slider2.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
567
+ <img data-src="images/slider2.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
324
568
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">7</h1></div>
325
569
  </li>
326
570
  <li>
327
- <img data-src="images/slider3.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
571
+ <img data-src="images/slider3.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
328
572
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">8</h1></div>
329
573
  </li>
330
574
  <li>
331
- <img data-src="images/slider4.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
575
+ <img data-src="images/slider4.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
332
576
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">9</h1></div>
333
577
  </li>
334
578
  <li>
335
- <img data-src="images/slider5.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
579
+ <img data-src="images/slider5.jpg" width="400" height="600" alt="" uk-img="target: !.uk-slider-items">
336
580
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">10</h1></div>
337
581
  </li>
338
582
  </ul>
@@ -365,28 +609,16 @@
365
609
  <td>The image's `src` attribute.</td>
366
610
  </tr>
367
611
  <tr>
368
- <td><code>dataSrcset</code></td>
369
- <td>String</td>
370
- <td>false</td>
371
- <td>The image's `srcset` attribute.</td>
372
- </tr>
373
- <tr>
374
- <td><code>sizes</code></td>
375
- <td>String</td>
376
- <td>false</td>
377
- <td>The image's `sizes` attribute.</td>
378
- </tr>
379
- <tr>
380
- <td><code>width</code></td>
612
+ <td><code>sources</code></td>
381
613
  <td>String</td>
382
- <td>false</td>
383
- <td>The image's `width` attribute. It will be used to determine the placeholder's width and the images position in the document.</td>
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>
384
616
  </tr>
385
617
  <tr>
386
- <td><code>height</code></td>
387
- <td>String</td>
388
- <td>false</td>
389
- <td>The image's `height` attribute. It will be used to determine the placeholder's height and the images position in the document.</td>
618
+ <td><code>loading</code></td>
619
+ <td>`lazy`|`eager`</td>
620
+ <td>`lazy`</td>
621
+ <td>Enable lazy/eager loading. Set to `eager` for images within the first visible viewport.</td>
390
622
  </tr>
391
623
  <tr>
392
624
  <td><code>offsetTop</code></td>
package/tests/images/image-type.avif ADDED
Binary file