RubyGems - jekyll-uikit - Versions diffs - 0.1.7 → 0.2.0 - Mend

jekyll-uikit 0.1.7 → 0.2.0

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 (640) hide show

data/assets/node_modules/uikit/tests/scroll.html DELETED

@@ -1,65 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-gb" dir="ltr">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <title>Scroll - UIkit tests</title>
-        <script src="../dist/js/uikit.js"></script>
-        <script src="js/test.js"></script>
-    </head>
-    <body>
-        <div class="uk-container">
-            <h1>Scroll</h1>
-            <a class="uk-button uk-button-default" href="#bottom" uk-scroll>Go Down!</a>
-            <a id="js-top-callback" class="uk-button uk-button-default" href="#bottom" uk-scroll>Go Down with callback!</a>
-            <div style="height: 2000px;"></div>
-            <a id="bottom" class="uk-button uk-button-default" href="#" uk-scroll>Go Up!</a>
-            <script>
-                UIkit.util.on('#js-top-callback', 'scrolled', function () {
-                    alert('Done.');
-                });
-            </script>
-            <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>duration</code></td>
-                            <td>Number</td>
-                            <td>1000</td>
-                            <td>The animation duration.</td>
-                        </tr>
-                        <tr>
-                            <td><code>offset</code></td>
-                            <td>Number</td>
-                            <td>0</td>
-                            <td>Offset added to scroll top.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    </body>
-</html>

data/assets/node_modules/uikit/tests/scrollspy.html DELETED

@@ -1,528 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-gb" dir="ltr">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <title>Scrollspy - UIkit tests</title>
-        <script src="../dist/js/uikit.js"></script>
-        <script src="js/test.js"></script>
-        <style>
-            .test-fixed {
-                position: fixed;
-                top: 20px;
-                right: 20px;
-                z-index: 1;
-            }
-        </style>
-    </head>
-    <body>
-        <div class="uk-card uk-card-default uk-card-body test-fixed">
-            <h3 class="uk-card-title">Scrollspy Nav</h3>
-            <ul class="uk-nav uk-nav-default" uk-scrollspy-nav="closest: li; scroll: true">
-                <li><a href="#animation-repeat">Single</a></li>
-                <li><a href="#animation-delay">Group</a></li>
-                <li><a href="#animation-fade">Fade</a></li>
-                <li><a href="#animation-scale-up">Scale Up</a></li>
-                <li><a href="#animation-scale-down">Scale Down</a></li>
-                <li><a href="#animation-slide-left">Slide Left</a></li>
-                <li><a href="#animation-slide-right">Slide Right</a></li>
-                <li><a href="#animation-slide-top">Slide Top</a></li>
-                <li><a href="#animation-slide-bottom">Slide Bottom</a></li>
-                <li><a href="#animation-different">Different Animations</a></li>
-                <li><a href="#adjacent1">Adjacent 1</a></li>
-                <li><a href="#adjacent2">Adjacent 2</a></li>
-            </ul>
-        </div>
-        <div class="uk-container">
-            <h1>ScrollSpy</h1>
-            <h2 id="animation-repeat">Single, Repeat, Delay</h2>
-            <div class="uk-child-width-1-4@m" uk-grid uk-height-match="target: > div > .uk-card">
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body" uk-scrollspy="cls: uk-animation-fade">
-                        <p>The element is animated only the first time it appears in the viewport.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body" uk-scrollspy="cls: uk-animation-slide-right; repeat: true">
-                        <p>The element is animated every time it appears in the viewport.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body" uk-scrollspy="cls: uk-animation-slide-right; delay: 1500; repeat: true">
-                        <p>The element is animated every time it appears in the viewport but delayed by 1.5s.</p>
-                    </div>
-                </div>
-            </div>
-            <h2 id="animation-delay">Group, Repeat, Delay</h2>
-            <div class="uk-child-width-1-4@m" uk-grid uk-scrollspy="cls: uk-animation-fade; target: > div > .uk-card; delay: 300; repeat: true">
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <p>The animation of this element is delayed by some milliseconds.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <p>The animation of this element is delayed by some milliseconds.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <p>The animation of this element is delayed by some milliseconds.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <p>The animation of this element is delayed by some milliseconds.</p>
-                    </div>
-                </div>
-            </div>
-            <h2 id="animation-fade">Group: Fade</h2>
-            <div class="uk-child-width-1-4@m uk-margin-xlarge-bottom" uk-grid uk-scrollspy="cls: uk-animation-fade; target: > div > .uk-card; delay: 300; repeat: true">
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Fade</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Fade</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Fade</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Fade</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-            </div>
-            <h2 id="animation-scale-up">Group: Scale Up</h2>
-            <div class="uk-child-width-1-4@m uk-margin-xlarge-bottom" uk-grid uk-scrollspy="cls: uk-animation-scale-up; target: > div > .uk-card; delay: 300; repeat: true">
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Scale Up</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Scale Up</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Scale Up</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Scale Up</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Scale Up</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Scale Up</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Scale Up</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Scale Up</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div><div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Scale Up</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Scale Up</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Scale Up</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Scale Up</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Scale Up</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Scale Up</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Scale Up</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Scale Up</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Scale Up</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Scale Up</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Scale Up</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Scale Up</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-            </div>
-            <h2 id="animation-scale-down">Group: Scale Down</h2>
-            <div class="uk-child-width-1-4@m uk-margin-xlarge-bottom" uk-grid uk-scrollspy="cls: uk-animation-scale-down; target: > div > .uk-card; delay: 300; repeat: true">
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Scale Down</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Scale Down</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Scale Down</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Scale Down</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-            </div>
-            <h2 id="animation-slide-left">Group: Left</h2>
-            <div class="uk-child-width-1-4@m uk-margin-xlarge-bottom" uk-grid uk-scrollspy="cls: uk-animation-slide-left; target: > div > .uk-card; delay: 300; repeat: true">
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Left</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Left</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Left</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Left</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-            </div>
-            <h2 id="animation-slide-right">Group: Right</h2>
-            <div class="uk-child-width-1-4@m uk-margin-xlarge-bottom" uk-grid uk-scrollspy="cls: uk-animation-slide-right; target: > div > .uk-card; delay: 300; repeat: true">
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Right</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Right</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Right</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Right</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-            </div>
-            <h2 id="animation-slide-top">Group: Top</h2>
-            <div class="uk-child-width-1-4@m uk-margin-xlarge-bottom" uk-grid uk-scrollspy="cls: uk-animation-slide-top; target: > div > .uk-card; delay: 300; repeat: true">
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Top</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Top</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Top</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Top</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-            </div>
-            <h2 id="animation-slide-bottom">Group: Bottom</h2>
-            <div class="uk-child-width-1-4@m uk-margin-xlarge-bottom" uk-grid uk-scrollspy="cls: uk-animation-slide-bottom; target: > div > .uk-card; delay: 300; repeat: true">
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Bottom</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Bottom</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Bottom</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Bottom</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-            </div>
-            <h2 id="animation-different">Different Animations</h2>
-            <div class="uk-child-width-1-4@m uk-margin-xlarge-bottom" uk-grid uk-scrollspy="cls: uk-animation-slide-bottom; target: > div > .uk-card; delay: 300; repeat: true">
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Bottom</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body" uk-scrollspy-class="uk-animation-slide-top">
-                        <h3 class="uk-card-title">Top</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body">
-                        <h3 class="uk-card-title">Bottom</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-                <div>
-                    <div class="uk-card uk-card-default uk-card-body" uk-scrollspy-class="uk-animation-slide-top">
-                        <h3 class="uk-card-title">Top</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                    </div>
-                </div>
-            </div>
-            <h2>Adjacent Sibling</h2>
-            <div id="adjacent1" class="uk-section uk-section-primary uk-text-center">
-                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-            </div>
-            <div id="adjacent2" class="uk-section uk-section-secondary uk-text-center">
-                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-            </div>
-            <h2>Javascript Options</h2>
-            <h3>Scrollspy</h3>
-            <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>cls</code></td>
-                            <td>String</td>
-                            <td>uk-scrollspy-inview</td>
-                            <td>Class to add when the element is in view. If two, comma separated classes are provided those will be toggled.</td>
-                        </tr>
-                        <tr>
-                            <td><code>hidden</code></td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                            <td>Hides the element while out of view.</td>
-                        </tr>
-                        <tr>
-                            <td><code>offset-top</code></td>
-                            <td>Number</td>
-                            <td>0</td>
-                            <td>Top offset before triggering in view.</td>
-                        </tr>
-                        <tr>
-                            <td><code>offset-left</code></td>
-                            <td>Number</td>
-                            <td>0</td>
-                            <td>Left offset before triggering in view.</td>
-                        </tr>
-                        <tr>
-                            <td><code>repeat</code></td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                            <td>Applies the 'cls' class every time the element is in view.</td>
-                        </tr>
-                        <tr>
-                            <td><code>delay</code></td>
-                            <td>Number</td>
-                            <td>0</td>
-                            <td>Delay time in ms.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-            <h3>Scrollspy Nav</h3>
-            <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>cls</code></td>
-                            <td>String</td>
-                            <td>uk-active</td>
-                            <td>Class to add to the active links.</td>
-                        </tr>
-                        <tr>
-                            <td><code>closest</code></td>
-                            <td>String</td>
-                            <td>uk-scrollspy-init-inview</td>
-                            <td>Target to apply the class to.</td>
-                        </tr>
-                        <tr>
-                            <td><code>scroll</code></td>
-                            <td>Boolean</td>
-                            <td>false</td>
-                            <td>Adds the Scroll component to its links.</td>
-                        </tr>
-                        <tr>
-                            <td><code>overflow</code></td>
-                            <td>Boolean</td>
-                            <td>true</td>
-                            <td>If overflow is set to true, the first or last item will stay active if above or below the navigation.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    </body>
-</html>