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

@@ -0,0 +1,376 @@
+<!DOCTYPE html>
+<html lang="en-gb" dir="ltr">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Search - UIkit tests</title>
+        <script src="../dist/js/uikit.js"></script>
+        <script src="js/test.js"></script>
+    </head>
+    <body>
+        <div class="uk-container">
+            <h1>Search</h1>
+            <h2>Default</h2>
+            <div class="uk-margin">
+                <form class="uk-search uk-search-default">
+                    <input class="uk-search-input" type="search" placeholder="Search...">
+                </form>
+            </div>
+            <div class="uk-margin" uk-margin>
+                <form class="uk-search uk-search-default">
+                    <span uk-search-icon></span>
+                    <input class="uk-search-input" type="search" placeholder="Icon...">
+                </form>
+                <form class="uk-search uk-search-default">
+                    <span class="uk-search-icon-flip" uk-search-icon></span>
+                    <input class="uk-search-input" type="search" placeholder="Flip...">
+                </form>
+            </div>
+            <div class="uk-margin" uk-margin>
+                <form class="uk-search uk-search-default">
+                    <a href="#" uk-search-icon></a>
+                    <input class="uk-search-input" type="search" placeholder="Link...">
+                </form>
+                <form class="uk-search uk-search-default">
+                    <button class="uk-search-icon-flip" uk-search-icon></button>
+                    <input class="uk-search-input" type="search" placeholder="Button...">
+                </form>
+            </div>
+            <h2>Navbar</h2>
+            <div class="uk-margin uk-navbar-container uk-navbar">
+                <div class="uk-navbar-left">
+                    <div class="uk-navbar-item">
+                        <form class="uk-search uk-search-navbar">
+                            <input class="uk-search-input" type="search" placeholder="Search...">
+                        </form>
+                    </div>
+                </div>
+            </div>
+            <div class="uk-margin uk-navbar-container uk-navbar">
+                <div class="uk-navbar-left">
+                    <div class="uk-navbar-item">
+                        <form class="uk-search uk-search-navbar">
+                            <span uk-search-icon></span>
+                            <input class="uk-search-input" type="search" placeholder="Icon...">
+                        </form>
+                    </div>
+                </div>
+                <div class="uk-navbar-right">
+                    <div class="uk-navbar-item">
+                        <form class="uk-search uk-search-navbar">
+                            <span class="uk-search-icon-flip" uk-search-icon></span>
+                            <input class="uk-search-input" type="search" placeholder="Flip...">
+                        </form>
+                    </div>
+                </div>
+            </div>
+            <div class="uk-margin uk-navbar-container uk-navbar">
+                <div class="uk-navbar-left">
+                    <div class="uk-navbar-item">
+                        <form class="uk-search uk-search-navbar">
+                            <a href="#" uk-search-icon></a>
+                            <input class="uk-search-input" type="search" placeholder="Link...">
+                        </form>
+                    </div>
+                </div>
+                <div class="uk-navbar-right">
+                    <div class="uk-navbar-item">
+                        <form class="uk-search uk-search-navbar">
+                            <button class="uk-search-icon-flip" uk-search-icon></button>
+                            <input class="uk-search-input" type="search" placeholder="Button...">
+                        </form>
+                    </div>
+                </div>
+            </div>
+            <h2>Large</h2>
+            <div class="uk-margin">
+                <form class="uk-search uk-search-large">
+                    <input class="uk-search-input" type="search" placeholder="Search...">
+                </form>
+            </div>
+            <div class="uk-margin" uk-margin>
+                <form class="uk-search uk-search-large">
+                    <span uk-search-icon></span>
+                    <input class="uk-search-input" type="search" placeholder="Icon...">
+                </form>
+                <form class="uk-search uk-search-large">
+                    <span class="uk-search-icon-flip" uk-search-icon></span>
+                    <input class="uk-search-input" type="search" placeholder="Flip...">
+                </form>
+            </div>
+            <div class="uk-margin" uk-margin>
+                <form class="uk-search uk-search-large">
+                    <a href="#" uk-search-icon></a>
+                    <input class="uk-search-input" type="search" placeholder="Link...">
+                </form>
+                <form class="uk-search uk-search-large">
+                    <button class="uk-search-icon-flip" uk-search-icon></button>
+                    <input class="uk-search-input" type="search" placeholder="Button...">
+                </form>
+            </div>
+            <h2>Toggle</h2>
+            <a class="uk-search-toggle" href="#" uk-search-icon></a>
+            <h2>Navbar Toggle + Layouts</h2>
+            <nav class="uk-navbar-container uk-margin" uk-navbar>
+                <div class="test-overlay uk-navbar-left">
+                    <a class="uk-navbar-item uk-logo" href="#">Overlay</a>
+                    <ul class="uk-navbar-nav">
+                        <li class="uk-active"><a href="#">Active</a></li>
+                        <li><a href="#">Parent</a></li>
+                        <li><a href="#">Item</a></li>
+                        <li><a href="#">Item</a></li>
+                    </ul>
+                </div>
+                <div class="test-overlay uk-navbar-right">
+                    <ul class="uk-navbar-nav">
+                        <li><a href="#">Item</a></li>
+                    </ul>
+                    <a class="uk-navbar-toggle" uk-search-icon uk-toggle="target: .test-overlay; animation: uk-animation-fade" href="#"></a>
+                </div>
+                <div class="uk-navbar-left uk-flex-1 test-overlay" hidden>
+                    <div class="uk-navbar-item uk-width-expand">
+                        <form class="uk-search uk-search-navbar uk-width-1-1">
+                            <input class="uk-search-input" type="search" placeholder="Search..." autofocus>
+                        </form>
+                    </div>
+                    <a class="uk-navbar-toggle" uk-close uk-toggle="target: .test-overlay; animation: uk-animation-fade" href="#"></a>
+                </div>
+            </nav>
+            <nav class="uk-navbar-container uk-margin" uk-navbar>
+                <div class="uk-navbar-left">
+                    <a class="uk-navbar-item uk-logo" href="#">Drop</a>
+                    <ul class="uk-navbar-nav">
+                        <li class="uk-active"><a href="#">Active</a></li>
+                        <li><a href="#">Parent</a></li>
+                        <li><a href="#">Item</a></li>
+                        <li><a href="#">Item</a></li>
+                    </ul>
+                </div>
+                <div class="uk-navbar-right">
+                    <ul class="uk-navbar-nav">
+                        <li><a href="#">Item</a></li>
+                    </ul>
+                    <div>
+                        <a class="uk-navbar-toggle" uk-search-icon href="#"></a>
+                        <div uk-drop="mode: click; pos: left-center; offset: 0">
+                            <form class="uk-search uk-search-navbar uk-width-1-1">
+                                <input class="uk-search-input" type="search" placeholder="Search..." autofocus>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+            <nav class="uk-navbar-container uk-margin" uk-navbar>
+                <div class="uk-navbar-left">
+                    <a class="uk-navbar-item uk-logo" href="#">Dropdown</a>
+                    <ul class="uk-navbar-nav">
+                        <li class="uk-active"><a href="#">Active</a></li>
+                        <li><a href="#">Parent</a></li>
+                        <li><a href="#">Item</a></li>
+                        <li><a href="#">Item</a></li>
+                    </ul>
+                </div>
+                <div class="uk-navbar-right">
+                    <ul class="uk-navbar-nav">
+                        <li><a href="#">Item</a></li>
+                    </ul>
+                    <div>
+                        <a class="uk-navbar-toggle" href="#" uk-search-icon></a>
+                        <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav">
+                            <div class="uk-grid-small uk-flex-middle" uk-grid>
+                                <div class="uk-width-expand">
+                                    <form class="uk-search uk-search-navbar uk-width-1-1">
+                                        <input class="uk-search-input" type="search" placeholder="Search..." autofocus>
+                                    </form>
+                                </div>
+                                <div class="uk-width-auto">
+                                    <a class="uk-navbar-dropdown-close" href="#" uk-close></a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+            <nav class="uk-navbar-container uk-margin" uk-navbar>
+                <div class="uk-navbar-left">
+                    <a class="uk-navbar-item uk-logo" href="#">Justify</a>
+                    <ul class="uk-navbar-nav">
+                        <li class="uk-active"><a href="#">Active</a></li>
+                        <li><a href="#">Parent</a></li>
+                        <li><a href="#">Item</a></li>
+                        <li><a href="#">Item</a></li>
+                    </ul>
+                </div>
+                <div class="uk-navbar-right">
+                    <ul class="uk-navbar-nav">
+                        <li><a href="#">Item</a></li>
+                    </ul>
+                    <div>
+                        <a class="uk-navbar-toggle" href="#" uk-search-icon></a>
+                        <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; boundary-align: true; pos: bottom-justify; flip: x">
+                            <div class="uk-grid-small uk-flex-middle" uk-grid>
+                                <div class="uk-width-expand">
+                                    <form class="uk-search uk-search-navbar uk-width-1-1">
+                                        <input class="uk-search-input" type="search" placeholder="Search..." autofocus>
+                                    </form>
+                                </div>
+                                <div class="uk-width-auto">
+                                    <a class="uk-navbar-dropdown-close" href="#" uk-close></a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+            <nav class="uk-navbar-container uk-margin" uk-navbar="dropbar: +.uk-navbar-dropbar; dropbar-mode: expand">
+                <div class="uk-navbar-left">
+                    <a class="uk-navbar-item uk-logo" href="#">Dropbar</a>
+                    <ul class="uk-navbar-nav">
+                        <li class="uk-active"><a href="#">Active</a></li>
+                        <li><a href="#">Parent</a></li>
+                        <li><a href="#">Item</a></li>
+                        <li><a href="#">Item</a></li>
+                    </ul>
+                </div>
+                <div class="uk-navbar-right">
+                    <ul class="uk-navbar-nav">
+                        <li><a href="#">Item</a></li>
+                    </ul>
+                    <div>
+                        <a class="uk-navbar-toggle" href="#" uk-search-icon></a>
+                        <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; boundary-align: true; pos: bottom-justify; flip: x">
+                            <div class="uk-grid-small uk-flex-middle" uk-grid>
+                                <div class="uk-width-expand">
+                                    <form class="uk-search uk-search-navbar uk-width-1-1">
+                                        <input class="uk-search-input" type="search" placeholder="Search..." autofocus>
+                                    </form>
+                                </div>
+                                <div class="uk-width-auto">
+                                    <a class="uk-navbar-dropdown-close" href="#" uk-close></a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+            <div class="uk-navbar-dropbar"></div>
+            <nav class="uk-navbar uk-navbar-container uk-margin">
+                <div class="uk-navbar-left">
+                    <a class="uk-navbar-item uk-logo" href="#">Modal</a>
+                    <ul class="uk-navbar-nav">
+                        <li class="uk-active"><a href="#">Active</a></li>
+                        <li><a href="#">Parent</a></li>
+                        <li><a href="#">Item</a></li>
+                        <li><a href="#">Item</a></li>
+                    </ul>
+                </div>
+                <div class="uk-navbar-right">
+                    <ul class="uk-navbar-nav">
+                        <li><a href="#">Item</a></li>
+                    </ul>
+                    <a class="uk-navbar-toggle" href="#modal-full" uk-search-icon uk-toggle></a>
+                </div>
+            </nav>
+            <div id="modal-full" class="uk-modal-full" uk-modal>
+                <div class="uk-modal-dialog uk-flex uk-flex-center uk-flex-middle" uk-height-viewport>
+                    <button class="uk-modal-close-full" type="button" uk-close></button>
+                    <form class="uk-search uk-search-large">
+                        <input class="uk-search-input uk-text-center" type="search" placeholder="Search..." autofocus>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>

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

@@ -0,0 +1,377 @@
+<!DOCTYPE html>
+<html lang="en-gb" dir="ltr">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Section - UIkit tests</title>
+        <script src="../dist/js/uikit.js"></script>
+        <script src="js/test.js"></script>
+    </head>
+    <body>
+        <div class="uk-section uk-section-default">
+            <div class="uk-container uk-position-relative">
+            <button class="uk-button uk-button-default uk-float-right uk-margin-remove-adjacent" type="button" uk-toggle="target: .uk-section; cls: uk-section-overlap">Overlap</button>
+                <h1>Section Default</h1>
+                <div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
+                    <div>
+                        <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>
+                        <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>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="uk-section uk-section-muted">
+            <div class="uk-container">
+                <h1>Section Muted</h1>
+                <div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
+                    <div>
+                        <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>
+                        <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>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="uk-section uk-section-primary">
+            <div class="uk-container">
+                <h1>Section Primary</h1>
+                <div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
+                    <div>
+                        <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>
+                        <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>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="uk-section uk-section-secondary">
+            <div class="uk-container">
+                <h1>Section Secondary</h1>
+                <div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
+                    <div>
+                        <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>
+                        <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>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="uk-section uk-section-default uk-section-xsmall">
+            <div class="uk-container">
+                <p>XSmall Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
+            </div>
+        </div>
+        <div class="uk-section uk-section-muted uk-section-xsmall">
+            <div class="uk-container">
+                <p>XSmall Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
+            </div>
+        </div>
+        <div class="uk-section uk-section-primary uk-section-xsmall">
+            <div class="uk-container">
+                <p>XSmall Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
+            </div>
+        </div>
+        <div class="uk-section uk-section-secondary uk-section-xsmall">
+            <div class="uk-container">
+                <p>XSmall Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
+            </div>
+        </div>
+        <div class="uk-section uk-section-default uk-section-small">
+            <div class="uk-container">
+                <div class="uk-grid-large uk-flex-middle" uk-grid>
+                    <div class="uk-width-expand">
+                        <p class="uk-text-large">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
+                    </div>
+                    <div class="uk-width-auto">
+                        <a class="uk-button uk-button-primary uk-button-large" href="#">Default Small</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="uk-section uk-section-muted uk-section-small">
+            <div class="uk-container">
+                <div class="uk-grid-large uk-flex-middle" uk-grid>
+                    <div class="uk-width-expand">
+                        <p class="uk-text-large">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
+                    </div>
+                    <div class="uk-width-auto">
+                        <a class="uk-button uk-button-primary uk-button-large" href="#">Muted Small</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="uk-section uk-section-primary uk-section-small">
+            <div class="uk-container">
+                <div class="uk-grid-large uk-flex-middle" uk-grid>
+                    <div class="uk-width-expand">
+                        <p class="uk-text-large">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
+                    </div>
+                    <div class="uk-width-auto">
+                        <a class="uk-button uk-button-primary uk-button-large" href="#">Primary Small</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="uk-section uk-section-secondary uk-section-small">
+            <div class="uk-container">
+                <div class="uk-grid-large uk-flex-middle" uk-grid>
+                    <div class="uk-width-expand">
+                        <p class="uk-text-large">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
+                    </div>
+                    <div class="uk-width-auto">
+                        <a class="uk-button uk-button-primary uk-button-large" href="#">Secondary Small</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="uk-section uk-section-default uk-section-large">
+            <div class="uk-container">
+                <h1 class="uk-heading-primary uk-text-center">Default Large</h1>
+                <p class="uk-text-large uk-text-center">Excepteur sint occaecat cupidatat non proident, sunt in<br class="uk-visible@m"> culpa qui officia deserunt mollit anim id est laborum.</p>
+                <div class="uk-margin-large uk-grid-match uk-child-width-1-3@m" uk-grid>
+                    <div>
+                        <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>
+                        <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>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="uk-section uk-section-muted uk-section-large">
+            <div class="uk-container">
+                <h1 class="uk-heading-primary uk-text-center">Muted Large</h1>
+                <p class="uk-text-large uk-text-center">Excepteur sint occaecat cupidatat non proident, sunt in<br class="uk-visible@m"> culpa qui officia deserunt mollit anim id est laborum.</p>
+                <div class="uk-margin-large uk-grid-match uk-child-width-1-3@m" uk-grid>
+                    <div>
+                        <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>
+                        <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>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="uk-section uk-section-primary uk-section-large">
+            <div class="uk-container">
+                <h1 class="uk-heading-primary uk-text-center">Primary Large</h1>
+                <p class="uk-text-large uk-text-center">Excepteur sint occaecat cupidatat non proident, sunt in<br class="uk-visible@m"> culpa qui officia deserunt mollit anim id est laborum.</p>
+                <div class="uk-margin-large uk-grid-match uk-child-width-1-3@m" uk-grid>
+                    <div>
+                        <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>
+                        <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>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="uk-section uk-section-secondary uk-section-large">
+            <div class="uk-container">
+                <h1 class="uk-heading-primary uk-text-center">Secondary Large</h1>
+                <p class="uk-text-large uk-text-center">Excepteur sint occaecat cupidatat non proident, sunt in<br class="uk-visible@m"> culpa qui officia deserunt mollit anim id est laborum.</p>
+                <div class="uk-margin-large uk-grid-match uk-child-width-1-3@m" uk-grid>
+                    <div>
+                        <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>
+                        <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>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="uk-section uk-section-default uk-section-xlarge">
+            <div class="uk-container">
+                <h1 class="uk-heading-primary uk-text-center">Default XLarge</h1>
+                <p class="uk-text-large uk-text-center">Excepteur sint occaecat cupidatat non proident, sunt in<br class="uk-visible@m"> culpa qui officia deserunt mollit anim id est laborum.</p>
+                <div class="uk-margin-large uk-grid-match uk-child-width-1-3@m" uk-grid>
+                    <div>
+                        <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>
+                        <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>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="uk-section uk-section-muted uk-section-xlarge">
+            <div class="uk-container">
+                <h1 class="uk-heading-primary uk-text-center">Muted XLarge</h1>
+                <p class="uk-text-large uk-text-center">Excepteur sint occaecat cupidatat non proident, sunt in<br class="uk-visible@m"> culpa qui officia deserunt mollit anim id est laborum.</p>
+                <div class="uk-margin-large uk-grid-match uk-child-width-1-3@m" uk-grid>
+                    <div>
+                        <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>
+                        <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>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="uk-section uk-section-primary uk-section-xlarge">
+            <div class="uk-container">
+                <h1 class="uk-heading-primary uk-text-center">Primary XLarge</h1>
+                <p class="uk-text-large uk-text-center">Excepteur sint occaecat cupidatat non proident, sunt in<br class="uk-visible@m"> culpa qui officia deserunt mollit anim id est laborum.</p>
+                <div class="uk-margin-large uk-grid-match uk-child-width-1-3@m" uk-grid>
+                    <div>
+                        <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>
+                        <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>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="uk-section uk-section-secondary uk-section-xlarge">
+            <div class="uk-container">
+                <h1 class="uk-heading-primary uk-text-center">Secondary XLarge</h1>
+                <p class="uk-text-large uk-text-center">Excepteur sint occaecat cupidatat non proident, sunt in<br class="uk-visible@m"> culpa qui officia deserunt mollit anim id est laborum.</p>
+                <div class="uk-margin-large uk-grid-match uk-child-width-1-3@m" uk-grid>
+                    <div>
+                        <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>
+                        <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>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="uk-section uk-section-default uk-padding-remove-vertical">
+            <div class="uk-container">
+                <h1>Padding Remove</h1>
+                <div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
+                    <div>
+                        <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>
+                        <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>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>