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

jekyll-uikit 0.1.5 → 0.1.7

Files changed (668) hide show

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

@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html lang="en-gb" dir="ltr">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Heading - UIkit tests</title>
+        <script src="../dist/js/uikit.js"></script>
+        <script src="js/test.js"></script>
+    </head>
+    <body>
+        <div class="uk-container">
+            <h1 class="uk-heading-primary">This is a primary heading</h1>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            <h1 class="uk-heading-primary uk-text-center">This is a primary heading<br>with some more text</h1>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            <h1 class="uk-heading-hero">Hero heading</h1>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            <h1 class="uk-heading-hero uk-text-center">Hero<br>Heading</h1>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            <div class="uk-child-width-1-2 uk-margin-medium" uk-grid>
+                <div>
+                    <h1 class="uk-heading-divider">H1 heading divider</h1>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <h2 class="uk-heading-divider">H2 heading divider</h2>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <h3 class="uk-heading-divider">H3 heading divider</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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <h4 class="uk-heading-divider">H4 heading divider</h4>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <h5 class="uk-heading-divider">H5 heading divider</h5>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <h6 class="uk-heading-divider">H6 heading divider</h6>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                </div>
+                <div>
+                    <h1 class="uk-heading-bullet">H1 heading bullet</h1>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <h2 class="uk-heading-bullet">H2 heading bullet</h2>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <h3 class="uk-heading-bullet">H3 heading bullet</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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <h4 class="uk-heading-bullet">H4 heading bullet</h4>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <h5 class="uk-heading-bullet">H5 heading bullet</h5>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <h6 class="uk-heading-bullet">H6 heading bullet</h6>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                </div>
+                <div>
+                    <h1 class="uk-heading-line"><span>H1 heading line</span></h1>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <h2 class="uk-heading-line"><span>H2 heading line</span></h2>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <h3 class="uk-heading-line"><span>H3 heading line</span></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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <h4 class="uk-heading-line"><span>H4 heading line</span></h4>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <h5 class="uk-heading-line"><span>H5 heading line</span></h5>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <h6 class="uk-heading-line"><span>H6 heading line</span></h6>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                </div>
+                <div class="uk-text-center">
+                    <h1 class="uk-heading-line"><span>H1 heading line</span></h1>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <h2 class="uk-heading-line"><span>H2 heading line</span></h2>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <h3 class="uk-heading-line"><span>H3 heading line</span></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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <h4 class="uk-heading-line"><span>H4 heading line</span></h4>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <h5 class="uk-heading-line"><span>H5 heading line</span></h5>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                    <h6 class="uk-heading-line"><span>H6 heading line</span></h6>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>

data/assets/node_modules/uikit/tests/height-expand.html ADDED

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en-gb" dir="ltr">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Height Expand - UIkit tests</title>
+        <script src="../dist/js/uikit.js"></script>
+        <script src="js/test.js"></script>
+    </head>
+    <body>
+        <div class="uk-section uk-section-muted" uk-height-viewport="expand: true">
+            <div class="uk-container">
+                <h1>Height Expand</h1>
+                <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 class="uk-section uk-section-secondary">
+            <div class="uk-container">
+                <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>
+    </body>
+</html>

data/assets/node_modules/uikit/tests/height-viewport.html ADDED

@@ -0,0 +1,186 @@
+<!DOCTYPE html>
+<html lang="en-gb" dir="ltr">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Height Viewport - UIkit tests</title>
+        <script src="../dist/js/uikit.js"></script>
+        <script src="js/test.js"></script>
+    </head>
+    <body>
+        <div class="uk-container">
+            <h1>Height Viewport</h1>
+            <div class="uk-child-width-1-6@m uk-light" uk-grid>
+                <div>
+                    <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center uk-height-viewport">
+                        <h1>CSS</h1>
+                    </div>
+                </div>
+                <div>
+                    <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport>
+                        <h1>JS</h1>
+                    </div>
+                </div>
+                <div>
+                    <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport="offset-top: true">
+                        <div>
+                            <h1>JS</h1>
+                            <div>top: true</div>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport="offset-top: true; offset-bottom: true">
+                        <div>
+                            <h1>JS</h1>
+                            <div>top: true</div>
+                            <div>bottom: true</div>
+                        </div>
+                    </div>
+                    <div class="uk-padding uk-background-secondary">Lorem ipsum dolor sit amet.</div>
+                </div>
+                <div>
+                    <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport="offset-top: true; offset-bottom: 10">
+                        <div>
+                            <h1>JS</h1>
+                            <div>top: true</div>
+                            <div>bottom: 10%</div>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport="offset-top: true; offset-bottom: 50px">
+                        <div>
+                            <h1>JS</h1>
+                            <div>top: true</div>
+                            <div>bottom: 50px</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="uk-child-width-1-6@m uk-light" uk-grid>
+                <div>
+                    <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center uk-height-viewport">
+                        <h1>CSS</h1>
+                    </div>
+                </div>
+                <div>
+                    <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport>
+                        <h1>JS</h1>
+                    </div>
+                </div>
+                <div>
+                    <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport="offset-top: true">
+                        <div>
+                            <h1>JS</h1>
+                            <div>top: true</div>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport="offset-top: true; offset-bottom: true">
+                        <div>
+                            <h1>JS</h1>
+                            <div>top: true</div>
+                            <div>bottom: true</div>
+                        </div>
+                    </div>
+                    <div class="uk-padding uk-background-secondary">Lorem ipsum dolor sit amet.</div>
+                </div>
+                <div>
+                    <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport="offset-top: true; offset-bottom: 10">
+                        <div>
+                            <h1>JS</h1>
+                            <div>top: true</div>
+                            <div>bottom: 10%</div>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport="offset-top: true; offset-bottom: 50px">
+                        <div>
+                            <h1>JS</h1>
+                            <div>top: true</div>
+                            <div>bottom: 50px</div>
+                        </div>
+                    </div>
+                </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>expand</code></td>
+                            <td>false</td>
+                            <td>Boolean</td>
+                            <td>Expands the element's height to make the document fill the viewport.</td>
+                        </tr>
+                        <tr>
+                            <td><code>offset-top</code></td>
+                            <td>false</td>
+                            <td>Boolean</td>
+                            <td>Subtracts the element's offset top from its height.</td>
+                        </tr>
+                        <tr>
+                            <td><code>offset-bottom</code></td>
+                            <td>false</td>
+                            <td>Boolean|Number|Pixel|selector</td>
+                            <td>Subtracts the element's immediately following sibling's height (true), the given percentage (Number), Pixel (px) value from its own height or the given element's height.</td>
+                        </tr>
+                        <tr>
+                            <td><code>min-height</code></td>
+                            <td>0</td>
+                            <td>Number</td>
+                            <td>Sets a minimum height.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </body>
+</html>

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

@@ -0,0 +1,770 @@
+<!DOCTYPE html>
+<html lang="en-gb" dir="ltr">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Icon - UIkit tests</title>
+        <script src="../dist/js/uikit.js"></script>
+        <script src="js/test.js"></script>
+    </head>
+    <body>
+        <div class="uk-container">
+            <h1>Icon</h1>
+            <div uk-grid>
+                <div class="uk-width-expand@m">
+                    <h2>List</h2>
+                    <div class="uk-child-width-1-2@s uk-child-width-1-4@m" uk-grid>
+                        <div>
+                            <ul class="uk-list">
+                                <li>
+                                    <span class="uk-icon uk-icon-image uk-margin-small-right" style="background-image: url('images/avatar.jpg');"></span>
+                                    Image
+                                </li>
+                                <!-- App -->
+                                <li><span class="uk-margin-small-right" uk-icon="icon: home"></span> home</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: sign-in"></span> sign-in</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: sign-out"></span> sign-out</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: user"></span> user</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: users"></span> users</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: lock"></span> lock</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: unlock"></span> unlock</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: settings"></span> settings</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: cog"></span> cog</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: nut"></span> nut</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: comment"></span> comment</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: commenting"></span> commenting</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: comments"></span> comments</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: hashtag"></span> hashtag</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: tag"></span> tag</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: cart"></span> cart</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: credit-card"></span> credit-card</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: mail"></span> mail</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: receiver"></span> receiver</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: search"></span> search</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: location"></span> location</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: bookmark"></span> bookmark</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: code"></span> code</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: paint-bucket"></span> paint-bucket</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: camera"></span> camera</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: bell"></span> bell</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: bolt"></span> bolt</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: star"></span> star</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: heart"></span> heart</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: happy"></span> happy</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: lifesaver"></span> lifesaver</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: rss"></span> rss</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: social"></span> social</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: git-branch"></span> git-branch</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: git-fork"></span> git-fork</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: world"></span> world</li>
+                            </ul>
+                        </div>
+                        <div>
+                            <ul class="uk-list">
+                                <!-- App -->
+                                <li><span class="uk-margin-small-right" uk-icon="icon: calendar"></span> calendar</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: clock"></span> clock</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: history"></span> history</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: future"></span> future</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: pencil"></span> pencil</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: trash"></span> trash</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: move"></span> move</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: link"></span> link</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: question"></span> question</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: info"></span> info</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: warning"></span> warning</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: image"></span> image</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> thumbnails</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: table"></span> table</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: list"></span> list</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: menu"></span> menu</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: grid"></span> grid</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: more"></span> more</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: more-vertical"></span> more-vertical</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: plus"></span> plus</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: plus-circle"></span> plus-circle</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: minus"></span> minus</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: minus-circle"></span> minus-circle</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: close"></span> close</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: check"></span> check</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: ban"></span> ban</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: refresh"></span> refresh</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: play"></span> play</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: play-circle"></span> play-circle</li>
+                                <!-- Devices -->
+                                <li><span class="uk-margin-small-right" uk-icon="icon: tv"></span> tv</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: desktop"></span> desktop</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: laptop"></span> laptop</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: tablet"></span> tablet</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: phone"></span> phone</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: tablet-landscape"></span> tablet-landscape</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: phone-landscape"></span> phone-landscape</li>
+                            </ul>
+                        </div>
+                        <div>
+                            <ul class="uk-list">
+                                <!-- Storage -->
+                                <li><span class="uk-margin-small-right" uk-icon="icon: file"></span> file</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: copy"></span> copy</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: file-edit"></span> file-edit</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: folder"></span> folder</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: album"></span> album</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: push"></span> push</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: pull"></span> pull</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: server"></span> server</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: database"></span> database</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: cloud-upload"></span> cloud-upload</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: cloud-download"></span> cloud-download</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: download"></span> download</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: upload"></span> upload</li>
+                                <!-- Direction -->
+                                <li><span class="uk-margin-small-right" uk-icon="icon: reply"></span> reply</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: forward"></span> forward</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: expand"></span> expand</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: shrink"></span> shrink</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: arrow-up"></span> arrow-up</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: arrow-down"></span> arrow-down</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: arrow-left"></span> arrow-left</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: arrow-right"></span> arrow-right</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: chevron-up"></span> chevron-up</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: chevron-down"></span> chevron-down</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: chevron-left"></span> chevron-left</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: chevron-right"></span> chevron-right</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: triangle-up"></span> triangle-up</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: triangle-down"></span> triangle-down</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: triangle-left"></span> triangle-left</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: triangle-right"></span> triangle-right</li>
+                            </ul>
+                        </div>
+                        <div>
+                            <ul class="uk-list">
+                                <!-- Editor -->
+                                <li><span class="uk-margin-small-right" uk-icon="icon: bold"></span> bold</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: italic"></span> italic</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: strikethrough"></span> strikethrough</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: video-camera"></span> video-camera</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: quote-right"></span> quote-right</li>
+                                <!-- Brands -->
+                                <li><span class="uk-margin-small-right" uk-icon="icon: 500px"></span> 500px</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: behance"></span> behance</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: dribbble"></span> dribbble</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: facebook"></span> facebook</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: flickr"></span> flickr</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: foursquare"></span> foursquare</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: github"></span> github</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: github-alt"></span> github-alt</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: gitter"></span> gitter</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: google"></span> google</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: google-plus"></span> google-plus</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: instagram"></span> instagram</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: joomla"></span> joomla</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: linkedin"></span> linkedin</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: pagekit"></span> pagekit</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: pinterest"></span> pinterest</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: soundcloud"></span> soundcloud</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: tripadvisor"></span> tripadvisor</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: tumblr"></span> tumblr</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: twitter"></span> twitter</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: uikit"></span> uikit</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: vimeo"></span> vimeo</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: whatsapp"></span> whatsapp</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: wordpress"></span> wordpress</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: xing"></span> xing</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: yelp"></span> yelp</li>
+                                <li><span class="uk-margin-small-right" uk-icon="icon: youtube"></span> youtube</li>
+                            </ul>
+                        </div>
+                    </div>
+                    <h2>Link</h2>
+                    <ul class="uk-grid-small uk-flex-middle" uk-grid>
+                        <!-- App -->
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: home"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: sign-out"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: sign-in"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: user"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: users"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: lock"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: unlock"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: settings"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: cog"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: nut"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: comment"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: commenting"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: comments"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: hashtag"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: tag"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: cart"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: credit-card"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: mail"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: receiver"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: search"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: location"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: bookmark"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: code"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: paint-bucket"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: camera"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: bell"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: bolt"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: star"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: heart"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: happy"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: lifesaver"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: rss"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: social"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: git-branch"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: git-fork"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: world"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: calendar"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: clock"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: history"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: future"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: pencil"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: link"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: trash"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: move"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: question"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: info"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: warning"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: image"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: thumbnails"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: table"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: list"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: menu"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: grid"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: more"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: more-vertical"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: plus"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: plus-circle"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: minus"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: minus-circle"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: close"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: check"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: ban"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: refresh"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: play"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: play-circle"></a></li>
+                        <!-- Devices -->
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: tv"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: desktop"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: laptop"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: tablet"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: phone"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: tablet-landscape"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: phone-landscape"></a></li>
+                        <!-- Storage -->
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: file"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: copy"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: file-edit"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: folder"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: album"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: push"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: pull"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: server"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: database"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: cloud-upload"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: cloud-download"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: download"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: upload"></a></li>
+                        <!-- Direction -->
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: reply"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: forward"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: expand"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: shrink"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: arrow-up"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: arrow-down"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: arrow-left"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: arrow-right"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: chevron-up"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: chevron-down"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: chevron-left"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: chevron-right"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: triangle-up"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: triangle-down"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: triangle-left"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: triangle-right"></a></li>
+                        <!-- Editor -->
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: bold"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: italic"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: strikethrough"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: video-camera"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: quote-right"></a></li>
+                        <!-- Brands -->
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: 500px"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: behance"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: dribbble"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: facebook"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: flickr"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: foursquare"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: github"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: github-alt"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: gitter"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: google"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: google-plus"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: instagram"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: joomla"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: linkedin"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: pagekit"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: pinterest"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: soundcloud"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: tripadvisor"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: tumblr"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: twitter"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: uikit"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: vimeo"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: whatsapp"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: wordpress"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: xing"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: yelp"></a></li>
+                        <li><a class="uk-icon-link" href="#" uk-icon="icon: youtube"></a></li>
+                    </ul>
+                    <h2>Button</h2>
+                    <ul class="uk-grid-small uk-flex-middle" uk-grid>
+                        <!-- App -->
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: home"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: sign-out"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: sign-in"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: user"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: users"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: lock"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: unlock"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: settings"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: cog"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: nut"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: comment"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: commenting"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: comments"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: hashtag"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: tag"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: cart"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: credit-card"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: mail"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: receiver"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: search"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: location"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: bookmark"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: code"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: paint-bucket"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: camera"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: bell"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: bolt"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: star"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: heart"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: happy"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: lifesaver"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: rss"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: social"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: git-branch"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: git-fork"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: world"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: calendar"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: clock"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: history"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: future"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: pencil"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: link"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: trash"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: move"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: question"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: info"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: warning"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: image"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: thumbnails"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: table"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: list"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: menu"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: grid"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: more"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: more-vertical"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: plus"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: plus-circle"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: minus"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: minus-circle"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: close"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: check"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: ban"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: refresh"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: play"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: play-circle"></a></li>
+                        <!-- Devices -->
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: tv"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: desktop"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: laptop"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: tablet"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: phone"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: tablet-landscape"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: phone-landscape"></a></li>
+                        <!-- Storage -->
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: file"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: copy"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: file-edit"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: folder"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: album"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: push"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: pull"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: server"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: database"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: cloud-upload"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: cloud-download"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: download"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: upload"></a></li>
+                        <!-- Direction -->
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: reply"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: forward"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: expand"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: shrink"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: arrow-up"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: arrow-down"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: arrow-left"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: arrow-right"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: chevron-up"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: chevron-down"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: chevron-left"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: chevron-right"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: triangle-up"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: triangle-down"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: triangle-left"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: triangle-right"></a></li>
+                        <!-- Editor -->
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: bold"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: italic"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: strikethrough"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: video-camera"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: quote-right"></a></li>
+                        <!-- Brands -->
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: 500px"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: behance"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: dribbble"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: facebook"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: flickr"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: foursquare"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: github"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: github-alt"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: gitter"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: google"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: google-plus"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: instagram"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: joomla"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: linkedin"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: pagekit"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: pinterest"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: soundcloud"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: tripadvisor"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: tumblr"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: twitter"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: uikit"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: vimeo"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: whatsapp"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: wordpress"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: xing"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: yelp"></a></li>
+                        <li><a class="uk-icon-button" href="#" uk-icon="icon: youtube"></a></li>
+                    </ul>
+                    <h2>Ratio</h2>
+                    <ul class="uk-grid-small uk-flex-middle" uk-grid>
+                        <!-- App -->
+                        <li><span uk-icon="ratio: 2; icon: home"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: sign-out"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: sign-in"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: user"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: users"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: lock"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: unlock"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: settings"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: cog"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: nut"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: comment"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: commenting"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: comments"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: hashtag"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: tag"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: cart"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: credit-card"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: mail"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: receiver"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: search"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: location"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: bookmark"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: code"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: paint-bucket"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: camera"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: bell"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: bolt"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: star"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: heart"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: happy"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: lifesaver"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: rss"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: social"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: git-branch"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: git-fork"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: world"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: calendar"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: clock"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: history"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: future"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: pencil"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: link"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: trash"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: move"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: question"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: info"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: warning"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: image"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: thumbnails"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: table"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: list"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: menu"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: grid"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: more"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: more-vertical"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: plus"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: plus-circle"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: minus"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: minus-circle"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: close"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: check"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: ban"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: refresh"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: play"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: play-circle"></span></li>
+                        <!-- Devices -->
+                        <li><span uk-icon="ratio: 2; icon: tv"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: desktop"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: laptop"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: tablet"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: phone"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: tablet-landscape"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: phone-landscape"></span></li>
+                        <!-- Storage -->
+                        <li><span uk-icon="ratio: 2; icon: file"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: copy"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: file-edit"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: folder"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: album"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: push"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: pull"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: server"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: database"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: cloud-upload"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: cloud-download"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: download"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: upload"></span></li>
+                        <!-- Direction -->
+                        <li><span uk-icon="ratio: 2; icon: reply"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: forward"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: expand"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: shrink"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: arrow-up"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: arrow-down"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: arrow-left"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: arrow-right"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: chevron-up"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: chevron-down"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: chevron-left"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: chevron-right"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: triangle-up"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: triangle-down"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: triangle-left"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: triangle-right"></span></li>
+                        <!-- Editor -->
+                        <li><span uk-icon="ratio: 2; icon: bold"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: italic"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: strikethrough"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: video-camera"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: quote-right"></span></li>
+                        <!-- Brands -->
+                        <li><span uk-icon="ratio: 2; icon: 500px"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: behance"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: dribbble"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: facebook"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: flickr"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: foursquare"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: github"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: github-alt"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: gitter"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: google"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: google-plus"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: instagram"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: joomla"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: linkedin"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: pagekit"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: pinterest"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: soundcloud"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: tripadvisor"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: tumblr"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: twitter"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: uikit"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: vimeo"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: whatsapp"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: wordpress"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: xing"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: yelp"></span></li>
+                        <li><span uk-icon="ratio: 2; icon: youtube"></span></li>
+                    </ul>
+                </div>
+                <div class="uk-width-auto@m">
+                    <h2>Text-level semantics</h2>
+                    <ul class="uk-list">
+                        <li>The
+                            <a href="#">
+                                <span uk-icon="icon: trash"></span>
+                                a element
+                            </a>
+                            example
+                        </li>
+                        <li>The
+                            <a class="uk-link-muted" href="#">
+                                <span uk-icon="icon: trash"></span>
+                                link-muted
+                            </a>
+                            example
+                        </li>
+                        <li>The
+                            <a class="uk-link-reset" href="#">
+                                <span uk-icon="icon: trash"></span>
+                                link-reset
+                            </a>
+                            example
+                        </li>
+                        <li>The
+                            <code>
+                                <span uk-icon="icon: trash"></span>
+                                code element
+                            </code>
+                            example
+                        </li>
+                        <li>The
+                            <em>
+                                <span uk-icon="icon: trash"></span>
+                                em element
+                            </em>
+                            example
+                        </li>
+                    </ul>
+                    <h2>Buttons</h2>
+                    <ul class="uk-list">
+                        <li>
+                            <button class="uk-button uk-button-default">
+                                <span class="uk-margin-small-right" uk-icon="icon: trash"></span>
+                                Button
+                            </button>
+                        </li>
+                        <li>
+                            <button class="uk-button uk-button-primary">
+                                <span class="uk-margin-small-right" uk-icon="icon: trash"></span>
+                                Button
+                            </button>
+                        </li>
+                        <li>
+                            <button class="uk-button uk-button-danger">
+                                <span class="uk-margin-small-right" uk-icon="icon: trash"></span>
+                                Button
+                            </button>
+                        </li>
+                        <li>
+                            <button class="uk-button uk-button-secondary">
+                                <span class="uk-margin-small-right" uk-icon="icon: trash"></span>
+                                Button
+                            </button>
+                        </li>
+                        <li>
+                            <button class="uk-button uk-button-default" disabled>
+                                <span class="uk-margin-small-right" uk-icon="icon: trash"></span>
+                                Button
+                            </button>
+                        </li>
+                    </ul>
+                </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>icon</code></td>
+                            <td>String</td>
+                            <td>''</td>
+                            <td>The icon to display.</td>
+                        </tr>
+                        <tr>
+                            <td><code>ratio</code></td>
+                            <td>Number</td>
+                            <td>1</td>
+                            <td>The icon size ratio.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </body>
+</html>