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

jekyll-uikit 0.1.5 → 0.1.7

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

data/assets/node_modules/uikit/tests/overlay.html ADDED

@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en-gb" dir="ltr">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Overlay - UIkit tests</title>
+        <script src="../dist/js/uikit.js"></script>
+        <script src="js/test.js"></script>
+    </head>
+    <body>
+        <div class="uk-container">
+            <h1>Overlay</h1>
+            <div class="uk-child-width-1-2@m" uk-grid>
+                <div>
+                    <div class="uk-inline">
+                        <img src="images/photo.jpg" alt="">
+                        <div class="uk-overlay uk-overlay-default uk-position-bottom">
+                            <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <div class="uk-inline">
+                        <img src="images/photo.jpg" alt="">
+                        <div class="uk-overlay uk-overlay-primary uk-position-bottom">
+                            <p>Primary Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <div class="uk-inline">
+                        <img src="images/photo.jpg" alt="">
+                        <div class="uk-overlay-default uk-position-cover"></div>
+                        <div class="uk-overlay uk-position-bottom uk-dark">
+                            <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <div class="uk-inline">
+                        <img src="images/photo.jpg" alt="">
+                        <div class="uk-overlay-primary uk-position-cover"></div>
+                        <div class="uk-overlay uk-position-bottom uk-light">
+                            <p>Primary Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="uk-child-width-1-3@m" uk-grid>
+                <div>
+                    <div class="uk-inline uk-light">
+                        <img src="images/photo.jpg" alt="">
+                        <div class="uk-position-center">
+                            <span uk-overlay-icon></span>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <div class="uk-inline uk-light">
+                        <img src="images/photo.jpg" alt="">
+                        <div class="uk-overlay-default uk-position-cover">
+                            <div class="uk-position-center">
+                                <span uk-overlay-icon></span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <div class="uk-inline uk-light">
+                        <img src="images/photo.jpg" alt="">
+                        <div class="uk-overlay-primary uk-position-cover">
+                            <div class="uk-position-center">
+                                <span uk-overlay-icon></span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>

data/assets/node_modules/uikit/tests/padding.html ADDED

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en-gb" dir="ltr">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Padding - UIkit tests</title>
+        <script src="../dist/js/uikit.js"></script>
+        <script src="js/test.js"></script>
+        <style type="text/css">
+            .uk-panel { background: #f0f0f0; }
+        </style>
+    </head>
+    <body>
+        <div class="uk-container">
+            <h1>Padding</h1>
+            <div class="uk-child-width-1-2@s" uk-grid>
+                <div>
+                    <div class="uk-panel uk-padding">
+                        <h3>Medium</h3>
+                        <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.</p>
+                    </div>
+                </div>
+                <div>
+                    <div class="uk-panel uk-padding-small">
+                        <h3>Small</h3>
+                        <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.</p>
+                    </div>
+                </div>
+                <div>
+                    <div class="uk-panel uk-padding-large">
+                        <h3>Large</h3>
+                        <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.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>

data/assets/node_modules/uikit/tests/pagination.html ADDED

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en-gb" dir="ltr">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Pagination - UIkit tests</title>
+        <script src="../dist/js/uikit.js"></script>
+        <script src="js/test.js"></script>
+    </head>
+    <body>
+        <div class="uk-container">
+            <h1>Pagination</h1>
+            <ul class="uk-pagination" uk-margin>
+                <li class="uk-disabled"><a href="#"><span uk-pagination-previous></span></a></li>
+                <li><a href="#"><span uk-pagination-previous></span></a></li>
+                <li><a href="#">1</a></li>
+                <li class="uk-disabled"><span>...</span></li>
+                <li><a href="#">4</a></li>
+                <li><a href="#">5</a></li>
+                <li><a href="#">6</a></li>
+                <li class="uk-active"><span>7</span></li>
+                <li><a href="#">8</a></li>
+                <li><a href="#">9</a></li>
+                <li><a href="#">10</a></li>
+                <li class="uk-disabled"><span>...</span></li>
+                <li><a href="#">20</a></li>
+                <li><a href="#"><span uk-pagination-next></span></a></li>
+                <li class="uk-disabled"><a href="#"><span uk-pagination-next></span></a></li>
+            </ul>
+            <ul class="uk-pagination uk-flex-center" uk-margin>
+                <li class="uk-disabled"><a href="#"><span uk-pagination-previous></span></a></li>
+                <li><a href="#"><span uk-pagination-previous></span></a></li>
+                <li><a href="#">1</a></li>
+                <li class="uk-disabled"><span>...</span></li>
+                <li><a href="#">4</a></li>
+                <li><a href="#">5</a></li>
+                <li><a href="#">6</a></li>
+                <li class="uk-active"><span>7</span></li>
+                <li><a href="#">8</a></li>
+                <li><a href="#">9</a></li>
+                <li><a href="#">10</a></li>
+                <li class="uk-disabled"><span>...</span></li>
+                <li><a href="#">20</a></li>
+                <li><a href="#"><span uk-pagination-next></span></a></li>
+                <li class="uk-disabled"><a href="#"><span uk-pagination-next></span></a></li>
+            </ul>
+            <ul class="uk-pagination uk-flex-right" uk-margin>
+                <li class="uk-disabled"><a href="#"><span uk-pagination-previous></span></a></li>
+                <li><a href="#"><span uk-pagination-previous></span></a></li>
+                <li><a href="#">1</a></li>
+                <li class="uk-disabled"><span>...</span></li>
+                <li><a href="#">4</a></li>
+                <li><a href="#">5</a></li>
+                <li><a href="#">6</a></li>
+                <li class="uk-active"><span>7</span></li>
+                <li><a href="#">8</a></li>
+                <li><a href="#">9</a></li>
+                <li><a href="#">10</a></li>
+                <li class="uk-disabled"><span>...</span></li>
+                <li><a href="#">20</a></li>
+                <li><a href="#"><span uk-pagination-next></span></a></li>
+                <li class="uk-disabled"><a href="#"><span uk-pagination-next></span></a></li>
+            </ul>
+            <h2>Previous/Next</h2>
+            <ul class="uk-pagination uk-flex-center">
+                <li><a href="#"><span uk-pagination-previous></span> Previous</a></li>
+                <li><a href="#">Next <span uk-pagination-next></span></a></li>
+            </ul>
+            <ul class="uk-pagination">
+                <li><a href="#"><span uk-pagination-previous></span> Previous</a></li>
+                <li class="uk-margin-auto-left"><a href="#">Next <span uk-pagination-next></span></a></li>
+            </ul>
+        </div>
+    </body>
+</html>

data/assets/node_modules/uikit/tests/parallax.html ADDED

@@ -0,0 +1,229 @@
+<!DOCTYPE html>
+<html lang="en-gb" dir="ltr">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Parallax - UIkit tests</title>
+        <script src="../dist/js/uikit.js"></script>
+        <script src="js/test.js"></script>
+        <style type="text/css">
+            .test-color { border: 10px #fff solid; }
+        </style>
+    </head>
+    <body>
+        <!-- uk-flex-top is needed to make vertical margin work for IE11 -->
+        <div class="uk-section-default">
+            <div class="uk-section uk-background-cover uk-background-primary uk-overflow-hidden uk-light uk-flex uk-flex-top" style="background-image: url('images/dark.jpg');" uk-parallax="bgy: -400; sepia:100" uk-height-viewport="offset-top: true">
+                <h1 class="uk-heading-hero uk-margin-auto uk-margin-auto-vertical">Parallax</h1>
+            </div>
+        </div>
+        <div class="uk-section uk-section-default">
+            <div class="uk-container">
+                <h2>Target</h2>
+                <div id="test-target" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex uk-flex-top" style="background-image: url('images/dark.jpg');" uk-parallax="bgx: -200">
+                    <div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
+                        <h1 uk-parallax="target: #test-target; opacity: 0; y: -200; scale: 2">Headline</h1>
+                        <p uk-parallax="target: #test-target; opacity: 0; y: 200; scale: 0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                    </div>
+                </div>
+                <h2>Start + End (Reverse)</h2>
+                <div id="test-reverse" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex uk-flex-top" style="background-image: url('images/dark.jpg');" uk-parallax="bgy: -200">
+                    <div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
+                        <h1 uk-parallax="target: #test-reverse; opacity: 0,1; y: -200,0; scale: 2,1; viewport: 0.5">Headline</h1>
+                        <p uk-parallax="target: #test-reverse; opacity: 0,1; y: 200,0; scale: 0,1; viewport: 0.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                    </div>
+                </div>
+                <h2>Easing</h2>
+                <div id="test-easing" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex uk-flex-top" style="background-image: url('images/dark.jpg');" uk-parallax="bgy: -200">
+                    <div class="uk-grid uk-margin-auto uk-margin-auto-vertical uk-flex-inline">
+                        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; y: 200; easing: 0">0</div></div>
+                        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; y: 200; easing: 0.2">0.2</div></div>
+                        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; y: 200; easing: 0.4">0.4</div></div>
+                        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; y: 200; easing: 0.6">0.6</div></div>
+                        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; y: 200; easing: 0.8">0.8</div></div>
+                        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; y: 200; easing: 1">1</div></div>
+                        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; y: 200; easing: 2">2</div></div>
+                        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; y: 200; easing: 3">3</div></div>
+                        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; y: 200; easing: 4">4</div></div>
+                        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; y: 200; easing: 5">5</div></div>
+                    </div>
+                </div>
+                <h2>Color and Viewport</h2>
+                <div id="test-color" class="test-color uk-height-large uk-margin uk-overflow-hidden uk-flex uk-flex-top" uk-parallax="background-color: yellow,white; border-color: #00f,#f00; viewport: 0.5">
+                    <div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
+                        <h1 uk-parallax="target: #test-color; opacity: 0,1; y: -200%,0; viewport: 0.5">Headline</h1>
+                        <p uk-parallax="target: #test-color; opacity: 0,1; viewport: 0.5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                        <p uk-parallax="target: #test-color; y: 200%,0; color: #0f0; viewport: 0.5">
+                            <span uk-icon="icon: uikit; ratio: 2"></span>
+                            <span uk-icon="icon: heart; ratio: 2"></span>
+                            <span uk-icon="icon: check; ratio: 2"></span>
+                        </p>
+                    </div>
+                </div>
+                <h2>Filter</h2>
+                <div id="test-filter" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex uk-flex-top" style="background-image: url('images/dark.jpg');" uk-parallax="invert: 100; viewport: 0.5">
+                    <div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
+                        <h1 uk-parallax="target: #test-filter; opacity: 0,1; y: -200%,0; viewport: 0.5">Headline</h1>
+                        <p uk-parallax="target: #test-filter; opacity: 0,1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                        <p uk-parallax="target: #test-filter; blur: 20,0; viewport: 0.5">
+                            <span uk-icon="icon: uikit; ratio: 2"></span>
+                            <span uk-icon="icon: heart; ratio: 2"></span>
+                            <span uk-icon="icon: check; ratio: 2"></span>
+                        </p>
+                    </div>
+                </div>
+                <h2>Multiple Steps</h2>
+                <div class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex uk-flex-top" style="background-image: url('images/dark.jpg');" uk-parallax="bgx: 0,200,0,200">
+                    <div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
+                        <h1 uk-parallax="x: -200,200,-200,200; scale: 2,1,2,1;">Headline</h1>
+                        <p uk-parallax="x: 200,-200,200,-200; scale: 1,0,1,0,1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                    </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>easing</code></td>
+                                <td>Number</td>
+                                <td>1</td>
+                                <td>Animation easing during scrolling.</td>
+                            </tr>
+                            <tr>
+                                <td><code>target</code></td>
+                                <td>String</td>
+                                <td>false</td>
+                                <td>Element dimension reference for animation duration.</td>
+                            </tr>
+                            <tr>
+                                <td><code>viewport</code></td>
+                                <td>Number</td>
+                                <td>1</td>
+                                <td>Animation range depending on the viewport.</td>
+                            </tr>
+                            <tr>
+                                <td><code>media</code></td>
+                                <td>Integer|String</td>
+                                <td>false</td>
+                                <td>Condition for the active status - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl).</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <h2>Animated properties</h2>
+                <p>You can define multiple steps by using a comma separated list of values. (e.g. x: 0,50,150)</p>
+                <div class="uk-overflow-auto">
+                    <table class="uk-table uk-table-striped">
+                        <thead>
+                            <tr>
+                                <th>Option</th>
+                                <th>Description</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td><code>x</code></td>
+                                <td>Animate translateX in pixels or percent.</td>
+                            </tr>
+                            <tr>
+                                <td><code>y</code></td>
+                                <td>Animate translateY in pixels or percent.</td>
+                            </tr>
+                            <tr>
+                                <td><code>bgy</code></td>
+                                <td>Animate a background image (y-axis).</td>
+                            </tr>
+                            <tr>
+                                <td><code>bgx</code></td>
+                                <td>Animate a background image (x-axis).</td>
+                            </tr>
+                            <tr>
+                                <td><code>rotate</code></td>
+                                <td>Animate rotation clockwise in degree.</td>
+                            </tr>
+                            <tr>
+                                <td><code>scale</code></td>
+                                <td>Animate scaling.</td>
+                            </tr>
+                            <tr>
+                                <td><code>color</code></td>
+                                <td>Animate color (needs start and stop value).</td>
+                            </tr>
+                            <tr>
+                                <td><code>background-color</code></td>
+                                <td>Animate background-color (needs start and stop value).</td>
+                            </tr>
+                            <tr>
+                                <td><code>border-color</code></td>
+                                <td>Animate border color (needs start and stop value).</td>
+                            </tr>
+                            <tr>
+                                <td><code>opacity</code></td>
+                                <td>Animate the opacity.</td>
+                            </tr>
+                            <tr>
+                                <td><code>blur</code></td>
+                                <td>Animate the blur filter.</td>
+                            </tr>
+                            <tr>
+                                <td><code>hue</code></td>
+                                <td>Animate the hue rotation filter.</td>
+                            </tr>
+                            <tr>
+                                <td><code>grayscale</code></td>
+                                <td>Animate the grayscale filter.</td>
+                            </tr>
+                            <tr>
+                                <td><code>invert</code></td>
+                                <td>Animate the invert filter.</td>
+                            </tr>
+                            <tr>
+                                <td><code>saturate</code></td>
+                                <td>Animate the saturate filter.</td>
+                            </tr>
+                            <tr>
+                                <td><code>sepia</code></td>
+                                <td>Animate the sepia filter.</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>