uikit 3.11.2-dev.fb043abc2 → 3.12.0

package/src/scss/components/slider.scss

@@ -93,7 +93,6 @@ $slider-container-margin-right:                      -25px !default;
  * 1. Let items take content dimensions (0 0 auto)
  *    `max-width` needed to keep image responsiveness and prevent content overflow
  * 3. Create position context
- * 4. Disable horizontal panning gestures in IE11 and Edge
  */
 
 .uk-slider-items > * {
@@ -102,8 +101,6 @@ $slider-container-margin-right:                      -25px !default;
     max-width: 100%;
     /* 3 */
     position: relative;
-    /* 4 */
-    touch-action: pan-y;
 }
 
 

package/src/scss/components/slideshow.scss

@@ -58,7 +58,6 @@
  * 2. Take the full width
  * 3. Clip child elements, e.g. for `uk-cover`
  * 4. Optimize animation
- * 5. Disable horizontal panning gestures in IE11 and Edge
  */
 
 .uk-slideshow-items > * {
@@ -73,8 +72,6 @@
     overflow: hidden;
     /* 4 */
     will-change: transform, opacity;
-    /* 5 */
-    touch-action: pan-y;
 }
 
 /*

package/src/scss/components/text.scss

@@ -125,29 +125,22 @@ $text-background-color:                          $global-primary-background !def
  ========================================================================== */
 
 /*
- * 1. The background clips to the foreground text. Works in Chrome, Firefox, Safari, Edge and Opera
- *    Default color is set to transparent
- * 2. Container fits the text
- * 3. Fallback color for IE11
+ * 1. The background clips to the foreground text. Works in all browsers.
+ * 2. Default color is set to transparent.
+ * 3. Container fits the text
+ * 4. Style
  */
 
 .uk-text-background {
     /* 1 */
     -webkit-background-clip: text;
     /* 2 */
-    display: inline-block;
+    color: transparent !important;
     /* 3 */
-    color: $text-background-color !important;
-}
-
-@supports (-webkit-background-clip: text) {
-
-    .uk-text-background {
-        background-color: $text-background-color;
-        color: transparent !important;
-        @if(mixin-exists(hook-text-background)) {@include hook-text-background();}
-    }
-
+    display: inline-block;
+    /* 4 */
+    background-color: $text-background-color;
+    @if(mixin-exists(hook-text-background)) {@include hook-text-background();}
 }
 
 
@@ -233,26 +226,17 @@ $text-background-color:                          $global-primary-background !def
 th.uk-text-truncate,
 td.uk-text-truncate { max-width: 0; }
 
-
 /*
- * 1. Wrap long words onto the next line and break them if they are too long to fit
- * 2. Legacy `word-wrap` as fallback for `overflow-wrap`
- * 3. Fix `overflow-wrap` which doesn't work with table cells in Chrome, Opera, IE11 and Edge
- *    Must use `break-all` to support IE11 and Edge
- * Note: Not using `hyphens: auto;` because it hyphenates text even if not needed
+ * Wrap long words onto the next line and break them if they are too long to fit.
+ * 1. Make it work with table cells in all browsers.
+ * Note: Not using `hyphens: auto` because it hyphenates text even if not needed.
  */
 
-.uk-text-break {
-    /* 1 */
-    overflow-wrap: break-word;
-    /* 2 */
-    word-wrap: break-word;
-}
-
-/* 3 */
-th.uk-text-break,
-td.uk-text-break { word-break: break-all; }
+ .uk-text-break { overflow-wrap: break-word; }
 
+ /* 1 */
+ th.uk-text-break,
+ td.uk-text-break { word-break: break-word; }
 
 
 // Hooks

package/src/scss/components/utility.scss

@@ -10,6 +10,7 @@
 //                  `uk-inline-*`
 //                  `uk-responsive-*`
 //                  `uk-preserve-width`
+//                  `uk-object-*`
 //                  `uk-border-*`
 //                  `uk-box-shadow-*`
 //                  `uk-box-shadow-bottom`
@@ -251,6 +252,30 @@ $dragover-box-shadow:                            0 0 20px rgba(100,100,100,0.3)
 [data-uk-responsive] { max-width: 100%; }
 
 
+/* Object
+ ========================================================================== */
+
+.uk-object-cover { object-fit: cover; }
+.uk-object-contain { object-fit: contain; }
+.uk-object-fill { object-fit: fill; }
+.uk-object-none { object-fit: none; }
+.uk-object-scale-down { object-fit: scale-down; }
+
+/* 
+ * Position
+ */
+
+.uk-object-top-left { object-position: 0 0; }
+.uk-object-top-center { object-position: 50% 0; }
+.uk-object-top-right { object-position: 100% 0; }
+.uk-object-center-left { object-position: 0 50%; }
+.uk-object-center-center { object-position: 50% 50%; }
+.uk-object-center-right { object-position: 100% 50%; }
+.uk-object-bottom-left { object-position: 0 100%; }
+.uk-object-bottom-center { object-position: 50% 100%; }
+.uk-object-bottom-right { object-position: 100% 100%; }
+
+
 /* Border
  ========================================================================== */
 

package/src/scss/mixins-theme.scss

@@ -814,9 +814,9 @@
 @mixin hook-dropdown-misc(){}
 @mixin hook-flex-misc(){}
 @mixin hook-form-range(){}
-@mixin hook-form-range-thumb(){ border: $form-range-thumb-border-width solid $form-range-thumb-border; }
 @mixin hook-form-range-track(){ border-radius: $form-range-track-border-radius; }
 @mixin hook-form-range-track-focus(){}
+@mixin hook-form-range-thumb(){ border: $form-range-thumb-border-width solid $form-range-thumb-border; }
 @mixin hook-form-range-misc(){}
 @mixin hook-form(){
     border: $form-border-width solid $form-border;

package/src/scss/mixins.scss

@@ -589,9 +589,9 @@
 @mixin hook-dropdown-misc(){}
 @mixin hook-flex-misc(){}
 @mixin hook-form-range(){}
-@mixin hook-form-range-thumb(){}
 @mixin hook-form-range-track(){}
 @mixin hook-form-range-track-focus(){}
+@mixin hook-form-range-thumb(){}
 @mixin hook-form-range-misc(){}
 @mixin hook-form(){}
 @mixin hook-form-single-line(){}

package/src/scss/variables-theme.scss

@@ -381,13 +381,13 @@ $dropdown-nav-divider-border-width: $global-border-width !default;
 $dropdown-nav-divider-border: $global-border !default;
 $dropdown-nav-sublist-item-color: $global-muted-color !default;
 $dropdown-nav-sublist-item-hover-color: $global-color !default;
+$form-range-track-height: 3px !default;
+$form-range-track-background: darken($global-muted-background, 5%) !default;
+$form-range-track-focus-background: darken($form-range-track-background, 5%) !default;
 $form-range-thumb-height: 15px !default;
 $form-range-thumb-width: $form-range-thumb-height !default;
 $form-range-thumb-border-radius: 500px !default;
 $form-range-thumb-background: $global-background !default;
-$form-range-track-height: 3px !default;
-$form-range-track-background: darken($global-muted-background, 5%) !default;
-$form-range-track-focus-background: darken($form-range-track-background, 5%) !default;
 $form-height: $global-control-height !default;
 $form-border-width: $global-border-width !default;
 $form-line-height: $form-height - (2* $form-border-width) !default;
@@ -449,16 +449,16 @@ $internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%
 $inverse-global-muted-background: rgba($global-inverse-color, 0.1) !default;
 $inverse-form-background: $inverse-global-muted-background !default;
 $inverse-form-color: $inverse-global-color !default;
-$inverse-form-focus-background: fadein($inverse-form-background, 5%) !default;
+$inverse-form-focus-background: fade-in($inverse-form-background, 0.05) !default;
 $inverse-form-focus-color: $inverse-global-color !default;
 $inverse-form-placeholder-color: $inverse-global-muted-color !default;
 $inverse-form-select-icon-color: $inverse-global-color !default;
 $inverse-form-datalist-icon-color: $inverse-global-color !default;
 $inverse-form-radio-background: $inverse-global-muted-background !default;
-$inverse-form-radio-focus-background: fadein($inverse-form-radio-background, 5%) !default;
+$inverse-form-radio-focus-background: fade-in($inverse-form-radio-background, 0.05) !default;
 $inverse-form-radio-checked-background: $inverse-global-primary-background !default;
 $inverse-form-radio-checked-icon-color: $inverse-global-inverse-color !default;
-$inverse-form-radio-checked-focus-background: fadein($inverse-global-primary-background, 10%) !default;
+$inverse-form-radio-checked-focus-background: fade-in($inverse-global-primary-background, 0.1) !default;
 $inverse-form-icon-color: $inverse-global-muted-color !default;
 $inverse-form-icon-hover-color: $inverse-global-color !default;
 $grid-gutter-horizontal: $global-gutter !default;
@@ -543,9 +543,9 @@ $inverse-icon-link-hover-color: $inverse-global-color !default;
 $inverse-icon-link-active-color: $inverse-global-color !default;
 $inverse-icon-button-background: $inverse-global-muted-background !default;
 $inverse-icon-button-color: $inverse-global-muted-color !default;
-$inverse-icon-button-hover-background: fadein($inverse-icon-button-background, 5%) !default;
+$inverse-icon-button-hover-background: fade-in($inverse-icon-button-background, 0.05) !default;
 $inverse-icon-button-hover-color: $inverse-global-color !default;
-$inverse-icon-button-active-background: fadein($inverse-icon-button-background, 10%) !default;
+$inverse-icon-button-active-background: fade-in($inverse-icon-button-background, 0.1) !default;
 $inverse-icon-button-active-color: $inverse-global-color !default;
 $iconnav-margin-horizontal: $global-small-margin !default;
 $iconnav-margin-vertical: $iconnav-margin-horizontal !default;
@@ -855,7 +855,7 @@ $inverse-search-color: $inverse-global-color !default;
 $inverse-search-placeholder-color: $inverse-global-muted-color !default;
 $inverse-search-icon-color: $inverse-global-muted-color !default;
 $inverse-search-default-background: transparent !default;
-$inverse-search-default-focus-background: fadein($inverse-search-default-background, 5%) !default;
+$inverse-search-default-focus-background: fade-in($inverse-search-default-background, 0.05) !default;
 $inverse-search-navbar-background: transparent !default;
 $inverse-search-large-background: transparent !default;
 $inverse-search-toggle-color: $inverse-global-muted-color !default;

package/src/scss/variables.scss

@@ -380,13 +380,13 @@ $dropdown-nav-divider-border-width: $global-border-width !default;
 $dropdown-nav-divider-border: $global-border !default;
 $dropdown-nav-sublist-item-color: $global-muted-color !default;
 $dropdown-nav-sublist-item-hover-color: $global-color !default;
+$form-range-track-height: 3px !default;
+$form-range-track-background: darken($global-muted-background, 5%) !default;
+$form-range-track-focus-background: darken($form-range-track-background, 5%) !default;
 $form-range-thumb-height: 15px !default;
 $form-range-thumb-width: $form-range-thumb-height !default;
 $form-range-thumb-border-radius: 500px !default;
 $form-range-thumb-background: $global-color !default;
-$form-range-track-height: 3px !default;
-$form-range-track-background: darken($global-muted-background, 5%) !default;
-$form-range-track-focus-background: darken($form-range-track-background, 5%) !default;
 $form-height: $global-control-height !default;
 $form-line-height: $form-height !default;
 $form-padding-horizontal: 10px !default;
@@ -447,16 +447,16 @@ $internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%
 $inverse-global-muted-background: rgba($global-inverse-color, 0.1) !default;
 $inverse-form-background: $inverse-global-muted-background !default;
 $inverse-form-color: $inverse-global-color !default;
-$inverse-form-focus-background: fadein($inverse-form-background, 5%) !default;
+$inverse-form-focus-background: fade-in($inverse-form-background, 0.05) !default;
 $inverse-form-focus-color: $inverse-global-color !default;
 $inverse-form-placeholder-color: $inverse-global-muted-color !default;
 $inverse-form-select-icon-color: $inverse-global-color !default;
 $inverse-form-datalist-icon-color: $inverse-global-color !default;
 $inverse-form-radio-background: $inverse-global-muted-background !default;
-$inverse-form-radio-focus-background: fadein($inverse-form-radio-background, 5%) !default;
+$inverse-form-radio-focus-background: fade-in($inverse-form-radio-background, 0.05) !default;
 $inverse-form-radio-checked-background: $inverse-global-primary-background !default;
 $inverse-form-radio-checked-icon-color: $inverse-global-inverse-color !default;
-$inverse-form-radio-checked-focus-background: fadein($inverse-global-primary-background, 10%) !default;
+$inverse-form-radio-checked-focus-background: fade-in($inverse-global-primary-background, 0.1) !default;
 $inverse-form-icon-color: $inverse-global-muted-color !default;
 $inverse-form-icon-hover-color: $inverse-global-color !default;
 $grid-gutter-horizontal: $global-gutter !default;
@@ -541,9 +541,9 @@ $inverse-icon-link-hover-color: $inverse-global-color !default;
 $inverse-icon-link-active-color: $inverse-global-color !default;
 $inverse-icon-button-background: $inverse-global-muted-background !default;
 $inverse-icon-button-color: $inverse-global-muted-color !default;
-$inverse-icon-button-hover-background: fadein($inverse-icon-button-background, 5%) !default;
+$inverse-icon-button-hover-background: fade-in($inverse-icon-button-background, 0.05) !default;
 $inverse-icon-button-hover-color: $inverse-global-color !default;
-$inverse-icon-button-active-background: fadein($inverse-icon-button-background, 10%) !default;
+$inverse-icon-button-active-background: fade-in($inverse-icon-button-background, 0.1) !default;
 $inverse-icon-button-active-color: $inverse-global-color !default;
 $iconnav-margin-horizontal: $global-small-margin !default;
 $iconnav-margin-vertical: $iconnav-margin-horizontal !default;
@@ -853,7 +853,7 @@ $inverse-search-color: $inverse-global-color !default;
 $inverse-search-placeholder-color: $inverse-global-muted-color !default;
 $inverse-search-icon-color: $inverse-global-muted-color !default;
 $inverse-search-default-background: $inverse-global-muted-background !default;
-$inverse-search-default-focus-background: fadein($inverse-search-default-background, 5%) !default;
+$inverse-search-default-focus-background: fade-in($inverse-search-default-background, 0.05) !default;
 $inverse-search-navbar-background: transparent !default;
 $inverse-search-large-background: transparent !default;
 $inverse-search-toggle-color: $inverse-global-muted-color !default;

package/tests/align.html

@@ -17,7 +17,7 @@
             <div class="uk-child-width-1-2@s" uk-grid>
                 <div>
 
-                    <img class="uk-align-right uk-margin-remove-adjacent" src="images/photo.jpg" width="250" alt="">
+                    <img class="uk-align-right uk-margin-remove-adjacent" src="images/photo.jpg" width="250" height="167" alt="">
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 
@@ -26,7 +26,7 @@
                 </div>
                 <div>
 
-                    <img class="uk-align-left uk-margin-remove-adjacent" src="images/photo.jpg" width="250" alt="">
+                    <img class="uk-align-left uk-margin-remove-adjacent" src="images/photo.jpg" width="250" height="167" alt="">
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 
@@ -40,7 +40,7 @@
             <div class="uk-child-width-1-2@s" uk-grid>
                 <div>
 
-                    <img class="uk-align-center uk-align-right@s uk-margin-remove-adjacent" src="images/photo.jpg" width="250" alt="">
+                    <img class="uk-align-center uk-align-right@s uk-margin-remove-adjacent" src="images/photo.jpg" width="250" height="167" alt="">
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 
@@ -49,7 +49,7 @@
                 </div>
                 <div>
 
-                    <img class="uk-align-center uk-align-left@s uk-margin-remove-adjacent" src="images/photo.jpg" width="250" alt="">
+                    <img class="uk-align-center uk-align-left@s uk-margin-remove-adjacent" src="images/photo.jpg" width="250" height="167" alt="">
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 
@@ -63,7 +63,7 @@
             <div class="uk-child-width-1-2@s" uk-grid>
                 <div>
 
-                    <img class="uk-align-center uk-align-right@m uk-margin-remove-adjacent" src="images/photo.jpg" width="250" alt="">
+                    <img class="uk-align-center uk-align-right@m uk-margin-remove-adjacent" src="images/photo.jpg" width="250" height="167" alt="">
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 
@@ -72,7 +72,7 @@
                 </div>
                 <div>
 
-                    <img class="uk-align-center uk-align-left@m uk-margin-remove-adjacent" src="images/photo.jpg" width="250" alt="">
+                    <img class="uk-align-center uk-align-left@m uk-margin-remove-adjacent" src="images/photo.jpg" width="250" height="167" alt="">
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 
@@ -86,7 +86,7 @@
             <div class="uk-child-width-1-2@s" uk-grid>
                 <div>
 
-                    <img class="uk-align-center uk-align-right@l uk-margin-remove-adjacent" src="images/photo.jpg" width="250" alt="">
+                    <img class="uk-align-center uk-align-right@l uk-margin-remove-adjacent" src="images/photo.jpg" width="250" height="167" alt="">
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 
@@ -95,7 +95,7 @@
                 </div>
                 <div>
 
-                    <img class="uk-align-center uk-align-left@l uk-margin-remove-adjacent" src="images/photo.jpg" width="250" alt="">
+                    <img class="uk-align-center uk-align-left@l uk-margin-remove-adjacent" src="images/photo.jpg" width="250" height="167" alt="">
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 
@@ -109,7 +109,7 @@
             <div class="uk-child-width-1-2@s" uk-grid>
                 <div>
 
-                    <img class="uk-align-center uk-align-right@xl uk-margin-remove-adjacent" src="images/photo.jpg" width="250" alt="">
+                    <img class="uk-align-center uk-align-right@xl uk-margin-remove-adjacent" src="images/photo.jpg" width="250" height="167" alt="">
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 
@@ -118,7 +118,7 @@
                 </div>
                 <div>
 
-                    <img class="uk-align-center uk-align-left@xl uk-margin-remove-adjacent" src="images/photo.jpg" width="250" alt="">
+                    <img class="uk-align-center uk-align-left@xl uk-margin-remove-adjacent" src="images/photo.jpg" width="250" height="167" alt="">
 
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 

package/tests/animation.html

@@ -220,14 +220,14 @@
                 <div>
 
                     <div class="uk-overflow-hidden">
-                        <img class="uk-animation-kenburns uk-transform-origin-center-right" src="images/dark.jpg" alt="">
+                        <img class="uk-animation-kenburns uk-transform-origin-center-right" src="images/dark.jpg" width="1800" height="1200" alt="">
                     </div>
 
                 </div>
                 <div>
 
                     <div class="uk-overflow-hidden">
-                        <img class="uk-animation-kenburns uk-animation-reverse uk-transform-origin-top-center" src="images/dark.jpg" alt="">
+                        <img class="uk-animation-kenburns uk-animation-reverse uk-transform-origin-top-center" src="images/dark.jpg" width="1800" height="1200" alt="">
                     </div>
 
                 </div>

package/tests/article.html

@@ -60,7 +60,7 @@
 
                 <article class="uk-article">
 
-                    <img class="uk-margin-medium-bottom" src="images/photo.jpg" alt="">
+                    <img class="uk-margin-medium-bottom" src="images/photo.jpg" width="1800" height="1200" alt="">
 
                     <h1 class="uk-article-title"><a class="uk-link-reset" href="">Heading</a></h1>
 
@@ -83,7 +83,7 @@
 
                 <article class="uk-article">
 
-                    <img class="uk-margin-medium-bottom" src="images/dark.jpg" alt="">
+                    <img class="uk-margin-medium-bottom" src="images/dark.jpg" width="1800" height="1200" alt="">
 
                     <h1 class="uk-article-title"><a class="uk-link-reset" href="">Heading</a></h1>
 

package/tests/base.html

@@ -137,7 +137,7 @@
                     <h3>Figure</h3>
 
                     <figure>
-                        <img src="images/photo.jpg" alt="">
+                        <img src="images/photo.jpg" width="1800" height="1200" alt="">
                         <figcaption>Figcaption content</figcaption>
                     </figure>
 
@@ -203,7 +203,7 @@
                     <div class="uk-grid-small uk-child-width-1-4" uk-grid>
                         <figure>
 
-                            <img width="1800" height="1200" src="images/photo.jpg" alt="">
+                            <img src="images/photo.jpg" width="1800" height="1200" alt="">
                             <figcaption>Image</figcaption>
 
                         </figure>
@@ -225,7 +225,7 @@
                         </figure>
                         <figure>
 
-                            <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4"></video>
+                            <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="1920" height="1080"></video>
                             <figcaption>Video</figcaption>
 
                         </figure>

package/tests/card.html

@@ -224,7 +224,7 @@
 
                     <div class="uk-card uk-card-default">
                         <div class="uk-card-media-top">
-                            <img src="images/photo.jpg" alt="">
+                            <img src="images/photo.jpg" width="1800" height="1200" alt="">
                         </div>
                         <div class="uk-card-body">
                             <h3 class="uk-card-title">Media Top</h3>
@@ -241,7 +241,7 @@
                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                         </div>
                         <div class="uk-card-media-bottom">
-                            <img src="images/photo.jpg" alt="">
+                            <img src="images/photo.jpg" width="1800" height="1200" alt="">
                         </div>
                     </div>
 
@@ -303,7 +303,7 @@
 
                     <div class="uk-card uk-card-default">
                         <div class="uk-card-media-top">
-                            <img src="images/light.jpg" alt="">
+                            <img src="images/light.jpg" width="1800" height="1200" alt="">
                         </div>
                         <div class="uk-card-body">
                             <h3 class="uk-card-title">Title</h3>
@@ -328,7 +328,7 @@
                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                         </div>
                         <div class="uk-card-media-bottom">
-                            <img src="images/dark.jpg" alt="">
+                            <img src="images/dark.jpg" width="1800" height="1200" alt="">
                         </div>
                     </div>
 
@@ -339,7 +339,7 @@
                         <div class="uk-card-header">
                             <div class="uk-grid-small uk-flex-middle" uk-grid>
                                 <div class="uk-width-auto">
-                                    <img class="uk-border-circle" src="images/avatar.jpg" width="50" alt="">
+                                    <img class="uk-border-circle" src="images/avatar.jpg" width="50" height="50" alt="">
                                 </div>
                                 <div  class="uk-width-expand">
                                     <h3 class="uk-card-title uk-margin-remove-bottom">Title</h3>
@@ -348,7 +348,7 @@
                             </div>
                         </div>
                         <div class="uk-card-media">
-                            <img src="images/light.jpg" alt="">
+                            <img src="images/light.jpg" width="1800" height="1200" alt="">
                         </div>
                         <div class="uk-card-body">
                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
@@ -437,7 +437,7 @@
 
                     <div class="uk-card uk-card-secondary">
                         <div class="uk-card-media-top">
-                            <img src="images/dark.jpg" alt="">
+                            <img src="images/dark.jpg" width="1800" height="1200" alt="">
                         </div>
                         <div class="uk-card-body">
                             <ul class="uk-nav uk-nav-default">
@@ -457,7 +457,7 @@
                             </ul>
                         </div>
                         <div class="uk-card-media-bottom">
-                            <img src="images/dark.jpg" alt="">
+                            <img src="images/dark.jpg" width="1800" height="1200" alt="">
                         </div>
                     </div>
 
@@ -486,7 +486,7 @@
 
                     <div class="uk-card uk-card-default uk-card-small">
                         <div class="uk-card-media-top">
-                            <img src="images/light.jpg" alt="">
+                            <img src="images/light.jpg" width="1800" height="1200" alt="">
                         </div>
                         <div class="uk-card-body">
                             <h3 class="uk-card-title">Title</h3>
@@ -562,7 +562,7 @@
 
                     <div class="uk-card uk-card-default uk-card-large">
                         <div class="uk-card-media-top">
-                            <img src="images/light.jpg" alt="">
+                            <img src="images/light.jpg" width="1800" height="1200" alt="">
                         </div>
                         <div class="uk-card-body">
                             <h3 class="uk-card-title">Title</h3>

package/tests/column.html

@@ -22,7 +22,7 @@
 
                 <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>
 
-                <img src="images/photo.jpg" alt="">
+                <img src="images/photo.jpg" width="1800" height="1200" alt="">
 
                 <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>
 
@@ -38,7 +38,7 @@
 
                 <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>
 
-                <img src="images/photo.jpg" alt="">
+                <img src="images/photo.jpg" width="1800" height="1200" alt="">
 
                 <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>
 
@@ -59,7 +59,7 @@
                     <footer>Someone famous in <cite><a href="">Source Title</a></cite></footer>
                 </blockquote>
 
-                <img src="images/photo.jpg" alt="">
+                <img src="images/photo.jpg" width="1800" height="1200" alt="">
 
                 <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>