uikit 3.16.27 → 3.17.1-dev.7c0766a6f

package/src/scss/mixins.scss

@@ -156,7 +156,8 @@
     .uk-heading-medium,
     .uk-heading-large,
     .uk-heading-xlarge,
-    .uk-heading-2xlarge {
+    .uk-heading-2xlarge,
+    .uk-heading-3xlarge {
         color: $inverse-base-heading-color;
         @if(mixin-exists(hook-inverse-base-heading)) {@include hook-inverse-base-heading();}
     }
@@ -732,6 +733,7 @@
 @mixin hook-heading-large(){}
 @mixin hook-heading-xlarge(){}
 @mixin hook-heading-2xlarge(){}
+@mixin hook-heading-3xlarge(){}
 @mixin hook-heading-primary(){}
 @mixin hook-heading-hero(){}
 @mixin hook-heading-divider(){}
@@ -743,6 +745,7 @@
 @mixin hook-inverse-heading-large(){}
 @mixin hook-inverse-heading-xlarge(){}
 @mixin hook-inverse-heading-2xlarge(){}
+@mixin hook-inverse-heading-3xlarge(){}
 @mixin hook-inverse-heading-primary(){}
 @mixin hook-inverse-heading-hero(){}
 @mixin hook-inverse-heading-divider(){}
@@ -770,6 +773,10 @@
         @if(mixin-exists(hook-inverse-heading-2xlarge)) {@include hook-inverse-heading-2xlarge();}
     }
 
+    .uk-heading-3xlarge {
+        @if(mixin-exists(hook-inverse-heading-3xlarge)) {@include hook-inverse-heading-3xlarge();}
+    }
+
     @if ($deprecated == true) { .uk-heading-primary { @if (mixin-exists(hook-inverse-heading-primary)) {@include hook-inverse-heading-primary();}}}
 
     @if ($deprecated == true) { .uk-heading-hero { @if (mixin-exists(hook-inverse-heading-hero)) {@include hook-inverse-heading-hero();}}}

package/src/scss/theme/heading.scss

@@ -21,6 +21,8 @@
 
 // @mixin hook-heading-2xlarge(){}
 
+// @mixin hook-heading-3xlarge(){}
+
 
 // Divider
 // ========================================================================
@@ -60,6 +62,8 @@
 
 // @mixin hook-inverse-heading-2xlarge(){}
 
+// @mixin hook-inverse-heading-3xlarge(){}
+
 // @mixin hook-inverse-heading-divider(){}
 
 // @mixin hook-inverse-heading-bullet(){}

package/src/scss/variables-theme.scss

@@ -515,12 +515,16 @@ $heading-xlarge-font-size-m: $heading-large-font-size-l !default;
 $heading-2xlarge-font-size: $heading-xlarge-font-size-m !default;
 $heading-xlarge-font-size-l: 8rem !default;
 $heading-2xlarge-font-size-m: $heading-xlarge-font-size-l !default;
+$heading-3xlarge-font-size: $heading-2xlarge-font-size-m !default;
 $heading-2xlarge-font-size-l: 11rem !default;
+$heading-3xlarge-font-size-m: $heading-2xlarge-font-size-l !default;
+$heading-3xlarge-font-size-l: 15rem !default;
 $heading-small-line-height: 1.2 !default;
 $heading-medium-line-height: 1.1 !default;
 $heading-large-line-height: 1.1 !default;
 $heading-xlarge-line-height: 1 !default;
 $heading-2xlarge-line-height: 1 !default;
+$heading-3xlarge-line-height: 1 !default;
 $heading-divider-padding-bottom: unquote('calc(5px + 0.1em)') !default;
 $heading-divider-border-width: unquote('calc(0.2px + 0.05em)') !default;
 $heading-divider-border: $global-border !default;
@@ -837,6 +841,7 @@ $navbar-dropdown-nav-divider-border: $global-border !default;
 $navbar-dropdown-nav-sublist-item-color: $global-muted-color !default;
 $navbar-dropdown-nav-sublist-item-hover-color: $global-color !default;
 $navbar-dropdown-nav-sublist-item-active-color: $global-emphasis-color !default;
+$navbar-dropbar-behind-color-mode: dark !default;
 $inverse-navbar-nav-item-color: $inverse-global-muted-color !default;
 $inverse-navbar-nav-item-hover-color: $inverse-global-color !default;
 $inverse-navbar-nav-item-onclick-color: $inverse-global-emphasis-color !default;
@@ -948,7 +953,9 @@ $section-large-padding-vertical-m: $global-xlarge-margin !default;
 $section-xlarge-padding-vertical: $global-xlarge-margin !default;
 $section-xlarge-padding-vertical-m: ($global-large-margin + $global-xlarge-margin) !default;
 $section-default-background: $global-background !default;
+$section-default-color-mode: dark !default;
 $section-muted-background: $global-muted-background !default;
+$section-muted-color-mode: dark !default;
 $section-primary-background: $global-primary-background !default;
 $section-primary-color-mode: light !default;
 $section-secondary-background: $global-secondary-background !default;

package/src/scss/variables.scss

@@ -513,12 +513,16 @@ $heading-xlarge-font-size-m: $heading-large-font-size-l !default;
 $heading-2xlarge-font-size: $heading-xlarge-font-size-m !default;
 $heading-xlarge-font-size-l: 8rem !default;
 $heading-2xlarge-font-size-m: $heading-xlarge-font-size-l !default;
+$heading-3xlarge-font-size: $heading-2xlarge-font-size-m !default;
 $heading-2xlarge-font-size-l: 11rem !default;
+$heading-3xlarge-font-size-m: $heading-2xlarge-font-size-l !default;
+$heading-3xlarge-font-size-l: 15rem !default;
 $heading-small-line-height: 1.2 !default;
 $heading-medium-line-height: 1.1 !default;
 $heading-large-line-height: 1.1 !default;
 $heading-xlarge-line-height: 1 !default;
 $heading-2xlarge-line-height: 1 !default;
+$heading-3xlarge-line-height: 1 !default;
 $heading-divider-padding-bottom: unquote('calc(5px + 0.1em)') !default;
 $heading-divider-border-width: unquote('calc(0.2px + 0.05em)') !default;
 $heading-divider-border: $global-border !default;
@@ -835,6 +839,7 @@ $navbar-dropdown-nav-divider-border: $global-border !default;
 $navbar-dropdown-nav-sublist-item-color: $global-muted-color !default;
 $navbar-dropdown-nav-sublist-item-hover-color: $global-color !default;
 $navbar-dropdown-nav-sublist-item-active-color: $global-emphasis-color !default;
+$navbar-dropbar-behind-color-mode: dark !default;
 $inverse-navbar-nav-item-color: $inverse-global-muted-color !default;
 $inverse-navbar-nav-item-hover-color: $inverse-global-color !default;
 $inverse-navbar-nav-item-onclick-color: $inverse-global-emphasis-color !default;
@@ -946,7 +951,9 @@ $section-large-padding-vertical-m: $global-xlarge-margin !default;
 $section-xlarge-padding-vertical: $global-xlarge-margin !default;
 $section-xlarge-padding-vertical-m: ($global-large-margin + $global-xlarge-margin) !default;
 $section-default-background: $global-background !default;
+$section-default-color-mode: dark !default;
 $section-muted-background: $global-muted-background !default;
+$section-muted-color-mode: dark !default;
 $section-primary-background: $global-primary-background !default;
 $section-primary-color-mode: light !default;
 $section-secondary-background: $global-secondary-background !default;

package/tests/cover.html

@@ -154,13 +154,13 @@
                         <tr>
                             <td><code>width</code></td>
                             <td>Number</td>
-                            <td>undefined</td>
+                            <td></td>
                             <td>The element's width.</td>
                         </tr>
                         <tr>
                             <td><code>height</code></td>
                             <td>Number</td>
-                            <td>undefined</td>
+                            <td></td>
                             <td>The element's height.</td>
                         </tr>
                     </tbody>

package/tests/drop.html

@@ -609,26 +609,26 @@
                         <tr>
                             <td><code>toggle</code></td>
                             <td>CSS Selector</td>
-                            <td>'- *'</td>
+                            <td>- *</td>
                             <td>CSS selector for the element to be used as toggle. By default, the preceding element.</td>
                         </tr>
                         <tr>
                             <td><code>pos</code></td>
                             <td>String</td>
-                            <td>'bottom-left'</td>
+                            <td>bottom-left</td>
                             <td>Drop position.</td>
                         </tr>
                         <tr>
                             <td><code>stretch</code></td>
-                            <td>false|true|'x'|'y'</td>
+                            <td>Boolean, String</td>
                             <td>false</td>
-                            <td>Stretch drop on both (true) or given axis.</td>
+                            <td>Stretch drop on both (true) or given axis (x,y).</td>
                         </tr>
                         <tr>
                             <td><code>mode</code></td>
-                            <td>hover | click</td>
+                            <td>String</td>
                             <td>click,hover</td>
-                            <td>Comma-separated list of drop trigger behavior modes.</td>
+                            <td>Comma-separated list of drop trigger behavior modes (hover, click).</td>
                         </tr>
                         <tr>
                             <td><code>delay-show</code></td>
@@ -711,7 +711,7 @@
                         <tr>
                             <td><code>animation</code></td>
                             <td>String</td>
-                            <td>'uk-animation-fade'</td>
+                            <td>uk-animation-fade</td>
                             <td>Space-separated names of animations. Comma-separated for animation out.</td>
                         </tr>
                         <tr>
@@ -726,6 +726,12 @@
                             <td>true</td>
                             <td>Allow background scrolling while drop is opened.</td>
                         </tr>
+                        <tr>
+                            <td><code>close-on-scroll</code></td>
+                            <td>Boolean</td>
+                            <td>false</td>
+                            <td>Close the drop on scrolling a parent scroll container.</td>
+                        </tr>
                         <tr>
                             <td><code>duration</code></td>
                             <td>Number</td>

package/tests/dropnav.html

@@ -710,9 +710,9 @@
                     <tbody>
                         <tr>
                             <td><code>align</code></td>
-                            <td>left|right|center</td>
+                            <td>String</td>
                             <td>left</td>
-                            <td>Drop alignment.</td>
+                            <td>Drop alignment (left, right, center).</td>
                         </tr>
                         <tr>
                             <td><code>boundary</code></td>
@@ -722,13 +722,13 @@
                         </tr>
                         <tr>
                             <td><code>dropbar</code></td>
-                            <td>Boolean | CSS selector</td>
+                            <td>Boolean, CSS selector</td>
                             <td>false</td>
                             <td>The dropbar selector. If true the dropbar will be inserted automatically.</td>
                         </tr>
                         <tr>
                             <td><code>dropbar-anchor</code></td>
-                            <td>Boolean | CSS selector</td>
+                            <td>Boolean, CSS selector</td>
                             <td>false</td>
                             <td>The dropbar anchor selector. If set, dropbar will be inserted after the anchor element.</td>
                         </tr>
@@ -746,15 +746,15 @@
                         </tr>
                         <tr>
                             <td><code>stretch</code></td>
-                            <td>false|true|'x'|'y'</td>
-                            <td>false</td>
-                            <td>Stretch drop on both (true) or given axis.</td>
+                            <td>Boolean, String</td>
+                            <td>true</td>
+                            <td>Stretch drop on both (true) or given axis (x,y).</td>
                         </tr>
                         <tr>
                             <td><code>mode</code></td>
-                            <td>hover | click</td>
+                            <td>String</td>
                             <td>click,hover</td>
-                            <td>Comma-separated list of drop trigger behavior modes.</td>
+                            <td>Comma-separated list of drop trigger behavior modes (hover, click).</td>
                         </tr>
                         <tr>
                             <td><code>delay-show</code></td>
@@ -795,7 +795,7 @@
                         <tr>
                             <td><code>animation</code></td>
                             <td>String</td>
-                            <td>'uk-animation-fade'</td>
+                            <td>uk-animation-fade</td>
                             <td>Space-separated names of animations. Comma-separated for animation out.</td>
                         </tr>
                         <tr>
@@ -804,6 +804,18 @@
                             <td>false</td>
                             <td>Use animation when closing the drop.</td>
                         </tr>
+                        <tr>
+                            <td><code>bg-scroll</code></td>
+                            <td>Boolean</td>
+                            <td>true</td>
+                            <td>Allow background scrolling while drop is opened.</td>
+                        </tr>
+                        <tr>
+                            <td><code>close-on-scroll</code></td>
+                            <td>Boolean</td>
+                            <td>false</td>
+                            <td>Closes the drop on scrolling a parent scroll container.</td>
+                        </tr>
                     </tbody>
                 </table>
             </div>

package/tests/filter.html

@@ -128,7 +128,7 @@
                     </div>
                 </div>
 
-                <ul class="js-filter uk-child-width-1-2 uk-child-width-1-4@m uk-light" uk-grid="masonry: true">
+                <ul class="js-filter uk-child-width-1-2 uk-child-width-1-4@m uk-light" uk-grid="masonry: next">
                     <li color="blue" size="large" date="2016-06-01"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">1</div></li>
                     <li color="red" size="small" date="2016-12-13"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">2</div></li>
                     <li color="blue" size="medium" date="2017-05-20"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">3</div></li>
@@ -223,7 +223,7 @@
                     </div>
                 </div>
 
-                <ul class="js-filter uk-child-width-1-2 uk-child-width-1-4@m uk-light" uk-grid="masonry: true; parallax: 200">
+                <ul class="js-filter uk-child-width-1-2 uk-child-width-1-4@m uk-light" uk-grid="masonry: next; parallax: 200">
                     <li color="blue" size="large" date="2016-06-01"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">1</div></li>
                     <li color="red" size="small" date="2016-12-13"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">2</div></li>
                     <li color="blue" size="medium" date="2017-05-20"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">3</div></li>
@@ -256,12 +256,12 @@
                         <tr>
                             <td><code>target</code></td>
                             <td>String</td>
-                            <td>''</td>
+                            <td></td>
                             <td>The targeted list on which to apply the filter to.</td>
                         </tr>
                         <tr>
                             <td><code>selActive</code></td>
-                            <td>String|Boolean</td>
+                            <td>String, Boolean</td>
                             <td>false</td>
                             <td>A selector for the initially active filter controls.</td>
                         </tr>
@@ -273,7 +273,7 @@
                         </tr>
                         <tr>
                             <td><code>duration</code></td>
-                            <td>String|Boolean</td>
+                            <td>String, Boolean</td>
                             <td>250</td>
                             <td>Animation duration in milliseconds.</td>
                         </tr>

package/tests/form.html

@@ -608,7 +608,7 @@
                     <tbody>
                         <tr>
                             <td><code>target</code></td>
-                            <td>CSS selector | Boolean</td>
+                            <td>CSS selector, Boolean</td>
                             <td>false</td>
                             <td>Value display target.</td>
                         </tr>

package/tests/grid-masonry.html

@@ -8,13 +8,15 @@
         <script src="js/test.js"></script>
         <style>
 
-            :nth-child(7n-6) > .uk-panel { height: 120px; background: rgba(0,0,0,0.1); }
-            :nth-child(7n-5) > .uk-panel { height: 180px; background: rgba(0,0,0,0.15); }
-            :nth-child(7n-4) > .uk-panel { height: 200px; background: rgba(0,0,0,0.2); }
-            :nth-child(7n-3) > .uk-panel { height: 170px; background: rgba(0,0,0,0.25); }
-            :nth-child(7n-2) > .uk-panel { height: 220px; background: rgba(0,0,0,0.3); }
-            :nth-child(7n-1) > .uk-panel { height: 160px; background: rgba(0,0,0,0.35); }
-            :nth-child(7n) > .uk-panel { height: 250px; background: rgba(0,0,0,0.35); }
+            :nth-child(9n-8) > .uk-panel { height: 140px; background: rgba(0,0,0,0.1); }
+            :nth-child(9n-7) > .uk-panel { height: 180px; background: rgba(0,0,0,0.1); }
+            :nth-child(9n-6) > .uk-panel { height: 220px; background: rgba(0,0,0,0.1); }
+            :nth-child(9n-5) > .uk-panel { height: 280px; background: rgba(0,0,0,0.15); }
+            :nth-child(9n-4) > .uk-panel { height: 140px; background: rgba(0,0,0,0.2); }
+            :nth-child(9n-3) > .uk-panel { height: 200px; background: rgba(0,0,0,0.25); }
+            :nth-child(9n-2) > .uk-panel { height: 250px; background: rgba(0,0,0,0.3); }
+            :nth-child(9n-1) > .uk-panel { height: 320px; background: rgba(0,0,0,0.35); }
+            :nth-child(9n) > .uk-panel { height: 160px; background: rgba(0,0,0,0.35); }
 
         </style>
     </head>
@@ -25,80 +27,54 @@
 
             <h1>Grid Masonry</h1>
 
-            <div class="uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-4@l" uk-grid="masonry: true">
-                <div><div class="uk-panel"></div></div>
-                <div><div class="uk-panel"></div></div>
-                <div><div class="uk-panel"></div></div>
-                <div><div class="uk-panel"></div></div>
-                <div><div class="uk-panel"></div></div>
-                <div><div class="uk-panel"></div></div>
-                <div><div class="uk-panel"></div></div>
-                <div><div class="uk-panel"></div></div>
-                <div><div class="uk-panel"></div></div>
-                <div><div class="uk-panel"></div></div>
-                <div><div class="uk-panel"></div></div>
-                <div><div class="uk-panel"></div></div>
+            <div class="uk-margin">
+                <select id="js-masonry-switcher" class="uk-select uk-form-width-small" aria-label="Masonry switcher">
+                    <option value="pack">Pack</option>
+                    <option value="next">Next</option>
+                </select>
             </div>
 
-            <h1>With Parallax</h1>
-
-            <div class="uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-4@l" uk-grid="masonry: true; parallax: 150">
-                <div><div class="uk-panel"></div></div>
-                <div><div class="uk-panel"></div></div>
-                <div><div class="uk-panel"></div></div>
-                <div><div class="uk-panel"></div></div>
-                <div><div class="uk-panel"></div></div>
-                <div><div class="uk-panel"></div></div>
-                <div><div class="uk-panel"></div></div>
-                <div><div class="uk-panel"></div></div>
-                <div><div class="uk-panel"></div></div>
-                <div><div class="uk-panel"></div></div>
-                <div><div class="uk-panel"></div></div>
-                <div><div class="uk-panel"></div></div>
+            <div class="uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-4@l uk-light js-grid-masonry" uk-grid masonry="pack">
+                <div><div class="uk-panel"><h1 class="uk-position-center">1</h1></div></div>
+                <div><div class="uk-panel"><h1 class="uk-position-center">2</h1></div></div>
+                <div><div class="uk-panel"><h1 class="uk-position-center">3</h1></div></div>
+                <div><div class="uk-panel"><h1 class="uk-position-center">4</h1></div></div>
+                <div><div class="uk-panel"><h1 class="uk-position-center">5</h1></div></div>
+                <div><div class="uk-panel"><h1 class="uk-position-center">6</h1></div></div>
+                <div><div class="uk-panel"><h1 class="uk-position-center">7</h1></div></div>
+                <div><div class="uk-panel"><h1 class="uk-position-center">8</h1></div></div>
+                <div><div class="uk-panel"><h1 class="uk-position-center">9</h1></div></div>
+                <div><div class="uk-panel"><h1 class="uk-position-center">10</h1></div></div>
+                <div><div class="uk-panel"><h1 class="uk-position-center">11</h1></div></div>
+                <div><div class="uk-panel"><h1 class="uk-position-center">12</h1></div></div>
             </div>
 
-            <h2>JavaScript Options</h2>
+            <h2>With Parallax</h2>
 
-            <div class="uk-overflow-auto">
-                <table class="uk-table uk-table-striped">
-                    <thead>
-                        <tr>
-                            <th>Option</th>
-                            <th>Value</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><code>margin</code></td>
-                            <td>String</td>
-                            <td>uk-grid-margin</td>
-                            <td>This class is added to items that break into the next row, typically to create margin to the previous row.</td>
-                        </tr>
-                        <tr>
-                            <td><code>first-column</code></td>
-                            <td>String</td>
-                            <td>uk-first-column</td>
-                            <td>This class is added to the first element in each row.</td>
-                        </tr>
-                        <tr>
-                            <td><code>masonry</code></td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                            <td>Enables masonry layout for this grid.</td>
-                        </tr>
-                        <tr>
-                            <td><code>parallax</code></td>
-                            <td>Number</td>
-                            <td>0</td>
-                            <td>Parallax translation value. The value must be a positive integer. Falsy disables the parallax effect (default).</td>
-                        </tr>
-                    </tbody>
-                </table>
+            <div class="uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-4@l uk-light js-grid-masonry" uk-grid="parallax: 150" masonry="pack">
+                <div><div class="uk-panel"><h1 class="uk-position-center">1</h1></div></div>
+                <div><div class="uk-panel"><h1 class="uk-position-center">2</h1></div></div>
+                <div><div class="uk-panel"><h1 class="uk-position-center">3</h1></div></div>
+                <div><div class="uk-panel"><h1 class="uk-position-center">4</h1></div></div>
+                <div><div class="uk-panel"><h1 class="uk-position-center">5</h1></div></div>
+                <div><div class="uk-panel"><h1 class="uk-position-center">6</h1></div></div>
+                <div><div class="uk-panel"><h1 class="uk-position-center">7</h1></div></div>
+                <div><div class="uk-panel"><h1 class="uk-position-center">8</h1></div></div>
+                <div><div class="uk-panel"><h1 class="uk-position-center">9</h1></div></div>
+                <div><div class="uk-panel"><h1 class="uk-position-center">10</h1></div></div>
+                <div><div class="uk-panel"><h1 class="uk-position-center">11</h1></div></div>
+                <div><div class="uk-panel"><h1 class="uk-position-center">12</h1></div></div>
             </div>
 
         </div>
 
+        <script>
+            const {attr, $$, on} = UIkit.util;
+            on('#js-masonry-switcher', 'change', e =>
+                attr($$('.js-grid-masonry'), 'masonry', e.target.value)
+            );
+
+        </script>
+
     </body>
 </html>

package/tests/grid-parallax.html

@@ -18,6 +18,16 @@
 
             .test { background: rgba(0,0,0,0.05); }
 
+            .js-grid-parallax :nth-child(9n-8) > .uk-panel { height: 240px; background: rgba(0,0,0,0.1); }
+            .js-grid-parallax :nth-child(9n-7) > .uk-panel { height: 380px; background: rgba(0,0,0,0.1); }
+            .js-grid-parallax :nth-child(9n-6) > .uk-panel { height: 400px; background: rgba(0,0,0,0.1); }
+            .js-grid-parallax :nth-child(9n-5) > .uk-panel { height: 480px; background: rgba(0,0,0,0.15); }
+            .js-grid-parallax :nth-child(9n-4) > .uk-panel { height: 260px; background: rgba(0,0,0,0.2); }
+            .js-grid-parallax :nth-child(9n-3) > .uk-panel { height: 400px; background: rgba(0,0,0,0.25); }
+            .js-grid-parallax :nth-child(9n-2) > .uk-panel { height: 450px; background: rgba(0,0,0,0.3); }
+            .js-grid-parallax :nth-child(9n-1) > .uk-panel { height: 520px; background: rgba(0,0,0,0.35); }
+            .js-grid-parallax :nth-child(9n) > .uk-panel { height: 280px; background: rgba(0,0,0,0.35); }
+
         </style>
     </head>
 
@@ -64,7 +74,7 @@
             <h2>Multi-row</h2>
 
             <div class="test">
-                <div class="uk-child-width-1-2@ uk-child-width-1-3@m uk-child-width-1-3@l" uk-grid="parallax: 200">
+                <div class="uk-child-width-1-2@ uk-child-width-1-3@m uk-child-width-1-3@l" uk-grid="parallax: 150">
                     <div><div class="uk-panel"></div></div>
                     <div><div class="uk-panel"></div></div>
                     <div><div class="uk-panel"></div></div>
@@ -82,48 +92,80 @@
                 </div>
             </div>
 
-            <h2>JavaScript Options</h2>
-
-            <div class="uk-overflow-auto">
-                <table class="uk-table uk-table-striped">
-                    <thead>
-                        <tr>
-                            <th>Option</th>
-                            <th>Value</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td><code>margin</code></td>
-                            <td>String</td>
-                            <td>uk-grid-margin</td>
-                            <td>This class is added to items that break into the next row, typically to create margin to the previous row.</td>
-                        </tr>
-                        <tr>
-                            <td><code>first-column</code></td>
-                            <td>String</td>
-                            <td>uk-first-column</td>
-                            <td>This class is added to the first element in each row.</td>
-                        </tr>
-                        <tr>
-                            <td><code>masonry</code></td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                            <td>Enables masonry layout for this grid.</td>
-                        </tr>
-                        <tr>
-                            <td><code>parallax</code></td>
-                            <td>Number</td>
-                            <td>0</td>
-                            <td>Parallax translation value. The value must be a positive integer. Falsy disables the parallax effect (default).</td>
-                        </tr>
-                    </tbody>
-                </table>
+            <h2>With Masonry</h2>
+
+            <div class="uk-margin uk-form-stacked">
+                <div class="uk-inline">
+                    <label class="uk-form-label" for="js-parallax-switcher">Parallax</label>
+                    <input id="js-parallax-switcher" class="uk-input uk-form-width-small" type="text" value="0">
+                </div>
+                <div class="uk-inline">
+                    <label class="uk-form-label" for="js-parallax-start-switcher">Start</label>
+                    <input id="js-parallax-start-switcher" class="uk-input uk-form-width-small" type="text" value="0">
+                </div>
+                <div class="uk-inline">
+                    <label class="uk-form-label" for="js-parallax-end-switcher">End</label>
+                    <input id="js-parallax-end-switcher" class="uk-input uk-form-width-small" type="text" value="0">
+                </div>
+                <div class="uk-inline">
+                    <label class="uk-form-label" for="js-parallax-justify-switcher">Justify</label>
+                    <select id="js-parallax-justify-switcher" class="uk-select uk-form-width-small">
+                        <option value="false">False</option>
+                        <option value="true" selected>True</option>
+                    </select>
+                </div>
+                <div class="uk-inline">
+                    <label class="uk-form-label" for="js-masonry-switcher">Masonry</label>
+                    <select id="js-masonry-switcher" class="uk-select uk-form-width-small">
+                        <option value="pack">Pack</option>
+                        <option value="next">Next</option>
+                    </select>
+                </div>
+            </div>
+
+            <div class="test" style="margin-bottom: 100vh">
+                <div class="uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-4@l uk-light js-grid-parallax" uk-grid parallax="0" parallax-justify="true" masonry="pack">
+                    <div><div class="uk-panel"><h1 class="uk-position-center">1</h1></div></div>
+                    <div><div class="uk-panel"><h1 class="uk-position-center">2</h1></div></div>
+                    <div><div class="uk-panel"><h1 class="uk-position-center">3</h1></div></div>
+                    <div><div class="uk-panel"><h1 class="uk-position-center">4</h1></div></div>
+                    <div><div class="uk-panel"><h1 class="uk-position-center">5</h1></div></div>
+                    <div><div class="uk-panel"><h1 class="uk-position-center">6</h1></div></div>
+                    <div><div class="uk-panel"><h1 class="uk-position-center">7</h1></div></div>
+                    <div><div class="uk-panel"><h1 class="uk-position-center">8</h1></div></div>
+                    <div><div class="uk-panel"><h1 class="uk-position-center">9</h1></div></div>
+                    <div><div class="uk-panel"><h1 class="uk-position-center">10</h1></div></div>
+                    <div><div class="uk-panel"><h1 class="uk-position-center">11</h1></div></div>
+                    <div><div class="uk-panel"><h1 class="uk-position-center">12</h1></div></div>
+                </div>
             </div>
 
         </div>
 
+        <script>
+            const {attr, $$, on} = UIkit.util;
+
+            on('#js-parallax-switcher', 'change', e =>
+                attr($$('.js-grid-parallax'), 'parallax', e.target.value)
+            );
+
+            on('#js-parallax-start-switcher', 'change', e =>
+                attr($$('.js-grid-parallax'), 'parallax-start', e.target.value)
+            );
+
+            on('#js-parallax-end-switcher', 'change', e =>
+                attr($$('.js-grid-parallax'), 'parallax-end', e.target.value)
+            );
+
+            on('#js-parallax-justify-switcher', 'change', e =>
+                attr($$('.js-grid-parallax'), 'parallax-justify', e.target.value)
+            );
+
+            on('#js-masonry-switcher', 'change', e =>
+                attr($$('.js-grid-parallax'), 'masonry', e.target.value)
+            );
+
+        </script>
+
     </body>
 </html>