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/utility.html ADDED

@@ -0,0 +1,572 @@
+<!DOCTYPE html>
+<html lang="en-gb" dir="ltr">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Utility - UIkit tests</title>
+        <script src="../dist/js/uikit.js"></script>
+        <script src="js/test.js"></script>
+        <style type="text/css">
+            [uk-height-match] > * > .uk-panel {
+                padding: 10px;
+                text-align: center;
+            }
+            [uk-height-match] > :nth-child(10n-9) > .uk-panel { background: rgba(0,0,0,0.1); }
+            [uk-height-match] > :nth-child(10n-8) > .uk-panel { background: rgba(0,0,0,0.15); }
+            [uk-height-match] > :nth-child(10n-7) > .uk-panel { background: rgba(0,0,0,0.2); }
+            [uk-height-match] > :nth-child(10n-6) > .uk-panel { background: rgba(0,0,0,0.25); }
+            [uk-height-match] > :nth-child(10n-5) > .uk-panel { background: rgba(0,0,0,0.3); }
+            [uk-height-match] > :nth-child(10n-4) > .uk-panel { background: rgba(0,0,0,0.35); }
+            [uk-height-match] > :nth-child(10n-3) > .uk-panel { background: rgba(0,0,0,0.40); }
+            [uk-height-match] > :nth-child(10n-2) > .uk-panel { background: rgba(0,0,0,0.45); }
+            [uk-height-match] > :nth-child(10n-1) > .uk-panel { background: rgba(0,0,0,0.50); }
+            [uk-height-match] > :nth-child(10n) > .uk-panel { background: rgba(0,0,0,0.55); }
+        </style>
+    </head>
+    <body>
+        <div class="uk-container">
+            <h1>Utility</h1>
+            <div class="uk-child-width-1-2@m" uk-grid>
+                <div>
+                    <div class="uk-panel">
+                        <h2>Panel</h2>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+                    </div>
+                </div>
+                <div>
+                    <h2>Panel Scrollable</h2>
+                    <div class="uk-panel uk-panel-scrollable">
+                        <ul class="uk-list">
+                            <li><label><input class="uk-checkbox" type="checkbox"> Category 1</label></li>
+                            <li>
+                                <label><input class="uk-checkbox" type="checkbox"> Category 2</label>
+                                <ul>
+                                    <li><label><input class="uk-checkbox" type="checkbox"> Category 2.1</label></li>
+                                    <li><label><input class="uk-checkbox" type="checkbox"> Category 2.2</label></li>
+                                    <li>
+                                        <label><input class="uk-checkbox" type="checkbox"> Category 2.3</label>
+                                        <ul>
+                                            <li><label><input class="uk-checkbox" type="checkbox"> Category 2.3.1</label></li>
+                                            <li><label><input class="uk-checkbox" type="checkbox"> Category 2.3.2</label></li>
+                                        </ul>
+                                    </li>
+                                    <li><label><input class="uk-checkbox" type="checkbox"> Category 2.4</label></li>
+                                </ul>
+                            </li>
+                            <li><label><input class="uk-checkbox" type="checkbox"> Category 3</label></li>
+                            <li><label><input class="uk-checkbox" type="checkbox"> Category 4</label></li>
+                        </ul>
+                    </div>
+                </div>
+                <div>
+                    <h2>Overflow Auto</h2>
+                    <div class="uk-overflow-auto">
+                        <table class="uk-table uk-table-striped uk-table-small uk-text-nowrap">
+                            <thead>
+                                <tr>
+                                    <th>Table Heading</th>
+                                    <th>Table Heading</th>
+                                    <th>Table Heading</th>
+                                    <th>Table Heading</th>
+                                    <th>Table Heading</th>
+                                    <th>Table Heading</th>
+                                </tr>
+                            </thead>
+                            <tfoot>
+                                <tr>
+                                    <td>Table Footer</td>
+                                    <td>Table Footer</td>
+                                    <td>Table Footer</td>
+                                    <td>Table Footer</td>
+                                    <td>Table Footer</td>
+                                    <td>Table Footer</td>
+                                </tr>
+                            </tfoot>
+                            <tbody>
+                                <tr>
+                                    <td>Table Data</td>
+                                    <td>Table Data</td>
+                                    <td>Table Data</td>
+                                    <td>Table Data</td>
+                                    <td>Table Data</td>
+                                    <td>Table Data</td>
+                                </tr>
+                                <tr>
+                                    <td>Table Data</td>
+                                    <td>Table Data</td>
+                                    <td>Table Data</td>
+                                    <td>Table Data</td>
+                                    <td>Table Data</td>
+                                    <td>Table Data</td>
+                                </tr>
+                                <tr>
+                                    <td>Table Data</td>
+                                    <td>Table Data</td>
+                                    <td>Table Data</td>
+                                    <td>Table Data</td>
+                                    <td>Table Data</td>
+                                    <td>Table Data</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                <div>
+                    <h2>Pre scrollable</h2>
+<pre class="uk-overflow-auto uk-height-medium uk-resize"><code>&lt;div uk-grid&gt;
+    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;&lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;&lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
+    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
+&lt;/div&gt;
+&lt;div uk-grid&gt;
+    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
+    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
+&lt;/div&gt;
+&lt;div uk-grid&gt;
+    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
+    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
+&lt;/div&gt;
+&lt;div uk-grid&gt;
+    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
+    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
+&lt;/div&gt;
+&lt;div uk-grid&gt;
+    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
+    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
+&lt;/div&gt;
+&lt;div uk-grid&gt;
+    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
+    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
+&lt;/div&gt;
+&lt;div uk-grid&gt;
+    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
+    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
+&lt;/div&gt;
+&lt;div uk-grid&gt;
+    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
+    &lt;div class="uk-width-1-2"&gt;...&lt;/div&gt;
+&lt;/div&gt;</code></pre>
+                </div>
+            </div>
+            <h2>Responsive Objects</h2>
+            <div class="uk-child-width-1-3@s" uk-grid>
+                <div>
+                    <p>JS Responsive Width (Iframe)</p>
+                    <iframe src="//www.youtube.com/embed/YE7VzlLtp-4?autoplay=0&amp;showinfo=0&amp;rel=0&amp;modestbranding=1" width="560" height="315" frameborder="0" allowfullscreen uk-responsive></iframe>
+                </div>
+                <div>
+                    <p>Responsive Height (Image)</p>
+                    <p style="height: 100px; "><img class="uk-responsive-height" src="images/photo.jpg" alt=""></p>
+                </div>
+            </div>
+            <h2>Box-shadows</h2>
+            <div class="uk-child-width-1-5@m uk-grid-large" uk-grid>
+                <div>
+                    <div class="uk-inline uk-box-shadow-hover-small">
+                        <img class="uk-invisible" src="images/photo.jpg" alt="">
+                        <div class="uk-position-center">Hover</div>
+                    </div>
+                </div>
+                <div>
+                    <div class="uk-inline uk-box-shadow-small">
+                        <img class="uk-invisible" src="images/photo.jpg" alt="">
+                        <div class="uk-position-center">Small</div>
+                    </div>
+                </div>
+                <div>
+                    <div class="uk-inline uk-box-shadow-medium">
+                        <img class="uk-invisible" src="images/photo.jpg" alt="">
+                        <div class="uk-position-center">Medium</div>
+                    </div>
+                </div>
+                <div>
+                    <div class="uk-inline uk-box-shadow-large">
+                        <img class="uk-invisible" src="images/photo.jpg" alt="">
+                        <div class="uk-position-center">Large</div>
+                    </div>
+                </div>
+                <div>
+                    <div class="uk-inline uk-box-shadow-xlarge">
+                        <img class="uk-invisible" src="images/photo.jpg" alt="">
+                        <div class="uk-position-center">XLarge</div>
+                    </div>
+                </div>
+                <div>
+                    <img class="uk-box-shadow-hover-xlarge" src="images/photo.jpg" alt="">
+                </div>
+                <div>
+                    <img class="uk-box-shadow-small" src="images/photo.jpg" alt="">
+                </div>
+                <div>
+                    <img class="uk-box-shadow-medium" src="images/photo.jpg" alt="">
+                </div>
+                <div>
+                    <img class="uk-box-shadow-large" src="images/photo.jpg" alt="">
+                </div>
+                <div>
+                    <img class="uk-box-shadow-xlarge" src="images/photo.jpg" alt="">
+                </div>
+                <div>
+                    <img class="uk-box-shadow-hover-xlarge" src="images/light.jpg" alt="">
+                </div>
+                <div>
+                    <img class="uk-box-shadow-small" src="images/light.jpg" alt="">
+                </div>
+                <div>
+                    <img class="uk-box-shadow-medium" src="images/light.jpg" alt="">
+                </div>
+                <div>
+                    <img class="uk-box-shadow-large" src="images/light.jpg" alt="">
+                </div>
+                <div>
+                    <img class="uk-box-shadow-xlarge" src="images/light.jpg" alt="">
+                </div>
+                <div>
+                    <img class="uk-box-shadow-hover-xlarge" src="images/dark.jpg" alt="">
+                </div>
+                <div>
+                    <img class="uk-box-shadow-small" src="images/dark.jpg" alt="">
+                </div>
+                <div>
+                    <img class="uk-box-shadow-medium" src="images/dark.jpg" alt="">
+                </div>
+                <div>
+                    <img class="uk-box-shadow-large" src="images/dark.jpg" alt="">
+                </div>
+                <div>
+                    <img class="uk-box-shadow-xlarge" src="images/dark.jpg" alt="">
+                </div>
+            </div>
+            <h2>Box-shadow Bottom</h2>
+            <div class="uk-child-width-1-5@m uk-grid-large" uk-grid>
+                <div class="uk-width-1-6@m">
+                    <div class="uk-box-shadow-bottom">
+                        <img src="images/photo.jpg" alt="">
+                    </div>
+                </div>
+                <div class="uk-width-1-3@m">
+                    <div class="uk-box-shadow-bottom">
+                        <img src="images/photo.jpg" alt="">
+                    </div>
+                </div>
+                <div class="uk-width-1-2@m">
+                    <div class="uk-box-shadow-bottom">
+                        <img src="images/photo.jpg" alt="">
+                    </div>
+                </div>
+            </div>
+            <h2>Drop Cap</h2>
+            <p class="uk-text-lead uk-dropcap">Dorem 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+            <p class="uk-dropcap">Torem 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. 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>
+            <h2>Leader</h2>
+            <div class="uk-grid-small uk-width-1-2@m uk-flex-bottom" uk-grid>
+                <div class="uk-width-expand" uk-leader>Lorem ipsum dolor</div>
+                <div class="uk-width-auto">Price</div>
+            </div>
+            <div class="uk-grid-small uk-width-1-2@m uk-flex-bottom" uk-grid>
+                <div class="uk-width-expand" uk-leader fill="-">Lorem ipsum dolor sit amet</div>
+                <div class="uk-width-auto">Price</div>
+            </div>
+            <div class="uk-grid-small uk-width-1-2@m uk-flex-bottom" uk-grid>
+                <div class="uk-width-expand" uk-leader>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</div>
+                <div class="uk-width-auto">Price</div>
+            </div>
+            <div class="uk-grid-small uk-width-1-2@m uk-flex-bottom" uk-grid>
+                <div class="uk-width-expand" uk-leader="media: @l">The leader dots are hidden before @l</div>
+                <div class="uk-width-auto">Price</div>
+            </div>
+            <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>fill</code></td>
+                        <td>String</td>
+                        <td>undefined</td>
+                        <td>Optional fill character.</td>
+                    </tr>
+                    <tr>
+                        <td><code>media</code></td>
+                        <td>String</td>
+                        <td>false</td>
+                        <td>Condition for the space filling - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl).</td>
+                    </tr>
+                </tbody>
+            </table>
+            <h1>Logo</h1>
+            <p>
+                <a class="uk-logo" href="#">Text Logo</a>
+            </p>
+            <div class="uk-flex-inline uk-margin uk-grid-small" uk-grid>
+                <div>
+                    <p>Image</p>
+                    <a class="uk-logo" href="#">
+                        <img src="images/photo.jpg" width="200" alt="">
+                    </a>
+                </div>
+                <div>
+                    <p>+ Inverse Image</p>
+                    <a class="uk-logo" href="#">
+                        <img src="images/photo.jpg" width="200" alt="">
+                        <img class="uk-logo-inverse" src="images/dark.jpg" width="200" alt="">
+                    </a>
+                </div>
+            </div>
+            <h2>Inline SVG</h2>
+            <div class="uk-child-width-auto" uk-grid>
+                <div>
+                    <p>Image</p>
+                    <img id="svg1" class="svg-1" src="../src/images/components/navbar-toggle-icon.svg" uk-svg>
+                </div>
+                <div>
+                    <p>Width</p>
+                    <img id="svg2" class="svg-2" src="../src/images/components/navbar-toggle-icon.svg" width="40" height="40" uk-svg>
+                </div>
+                <div>
+                    <p>Symbol + ID</p>
+                    <img width="20" height="20" src="images/icons.svg#table" uk-svg>
+                    <img width="20" height="20" src="images/icons.svg#trash" uk-svg>
+                </div>
+                <div>
+                    <p>Symbol + ID + Fallback</p>
+                    <img width="20" height="20" src="../src/images/backgrounds/nav-parent-close.svg#notfound" uk-svg>
+                    <img width="20" height="20" src="../src/images/backgrounds/nav-parent-open.svg#notfound" uk-svg>
+                </div>
+            </div>
+            <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>src</code></td>
+                        <td>String</td>
+                        <td>undefined</td>
+                        <td>The SVG source url. If a location hash is present, only the part of the SVG with the given ID is shown.</td>
+                    </tr>
+                </tbody>
+            </table>
+            <h2>Gif</h2>
+            <p>
+                <img src="images/animated.gif" alt="" uk-gif>
+            </p>
+            <h2>Video</h2>
+            <div class="uk-grid uk-child-width-1-2@s">
+                <div>
+                    <button class="uk-button uk-button-default uk-margin-bottom" type="button" uk-toggle="target: +">Toggle Video</button>
+                    <video controls playsinline uk-video="automute: true">
+                        <source src="//www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
+                        <source src="//www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg">
+                    </video>
+                </div>
+                <div>
+                    <button class="uk-button uk-button-default uk-margin-bottom" type="button" uk-toggle="target: +">Toggle Video</button>
+                    <iframe src="//www.youtube.com/embed/YE7VzlLtp-4?autoplay=0&amp;showinfo=0&amp;rel=0&amp;modestbranding=1&amp;playsinline=1" width="560" height="315" frameborder="0" allowfullscreen uk-responsive uk-video="automute: true"></iframe>
+                </div>
+            </div>
+            <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>autoplay</code></td>
+                        <td>Boolean</td>
+                        <td><code>true</code></td>
+                        <td>Automatically start the video. Pauses the video if it is not visible.</td>
+                    </tr>
+                    <tr>
+                        <td><code>automute</code></td>
+                        <td>Boolean</td>
+                        <td><code>false</code></td>
+                        <td>Automatically mute the video.</td>
+                    </tr>
+                </tbody>
+            </table>
+            <h2>Height Match</h2>
+            <div class="uk-grid uk-child-width-1-2@s">
+                <div>
+                    <h3>Each Row</h3>
+                    <div class="uk-child-width-1-2@m" uk-grid uk-height-match="target: > div > .uk-panel">
+                        <div><div class="uk-panel">1-2-M<br>...<br>...</div></div>
+                        <div><div class="uk-panel">1-2-M</div></div>
+                        <div><div class="uk-panel">1-2-M<br>...</div></div>
+                        <div><div class="uk-panel">1-2-M</div></div>
+                    </div>
+                </div>
+                <div>
+                    <h3>All Rows</h3>
+                    <div class="uk-child-width-1-2@m" uk-grid uk-height-match="target: > div > .uk-panel; row: false">
+                        <div><div class="uk-panel">1-2-M<br>...<br>...</div></div>
+                        <div><div class="uk-panel">1-2-M</div></div>
+                        <div><div class="uk-panel">1-2-M<br>...</div></div>
+                        <div><div class="uk-panel">1-2-M</div></div>
+                    </div>
+                </div>
+                <div>
+                    <h3>Hidden Panels</h3>
+                    <div class="uk-child-width-1-2@m" uk-grid uk-height-match="target: > div > .uk-panel; row: false">
+                        <div><div class="uk-panel" style="display: none;">1-2-M<br>...<br>...</div></div>
+                        <div><div class="uk-panel">1-2-M<br>...</div></div>
+                    </div>
+                </div>
+            </div>
+            <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>target</code></td>
+                        <td>CSS selector</td>
+                        <td>> *</td>
+                        <td>Elements that should match. By default the children will match.</td>
+                    </tr>
+                    <tr>
+                        <td><code>row</code></td>
+                        <td>Boolean</td>
+                        <td>true</td>
+                        <td>By default only items in the same row will be matched. For example, once grid columns extend to a width of 100%, their heights will no longer be matched. This makes sense, for example, if they stack vertically in narrower viewports.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </body>
+</html>