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

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en-gb" dir="ltr">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Badge - UIkit tests</title>
+        <script src="../dist/js/uikit.js"></script>
+        <script src="js/test.js"></script>
+    </head>
+    <body>
+        <div class="uk-container">
+            <h1>Badge</h1>
+            <p>
+                <a class="uk-badge" href="#">1</a>
+                <span class="uk-badge">2</span>
+                <span class="uk-badge">10</span>
+                <span class="uk-badge">100</span>
+                <span class="uk-badge"><span uk-icon="icon: trash"></span></span>
+                <span class="uk-badge">text</span>
+            </p>
+            <div class="uk-child-width-expand@m" uk-grid>
+                <div>
+                    <h2>Navbar</h2>
+                    <nav class="uk-navbar-container uk-margin" uk-navbar>
+                        <div class="uk-navbar-left">
+                            <ul class="uk-navbar-nav">
+                                <li class="uk-active"><a href="#">Active <span class="uk-badge uk-margin-small-left">2</span></a></li>
+                                <li><a href="#">Item</a></li>
+                                <li><a href="#">Item <span class="uk-badge uk-margin-small-left">2</span></a></li>
+                            </ul>
+                        </div>
+                    </nav>
+                </div>
+                <div>
+                    <h2>Nav</h2>
+                    <ul class="uk-nav uk-nav-default">
+                        <li class="uk-active"><a href="#">Active <span class="uk-badge uk-text-top">2</span></a></li>
+                        <li><a href="#">Item <span class="uk-badge uk-text-top">2</span></a></li>
+                        <li><a href="#">Item</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h2>Subnav</h2>
+                    <ul class="uk-subnav" uk-margin>
+                        <li class="uk-active"><a href="#">Active</a></li>
+                        <li><a href="#">Item <span class="uk-badge uk-text-top">2</span></a></li>
+                        <li><a href="#">Item</a></li>
+                    </ul>
+                    <ul class="uk-subnav" uk-margin>
+                        <li class="uk-active"><a href="#">Active <span class="uk-badge uk-text-top">2</span></a></li>
+                        <li><a href="#">Item</a></li>
+                        <li><a href="#">Item</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h2>Tab</h2>
+                    <ul uk-tab>
+                        <li class="uk-active"><a href="#">Active</a></li>
+                        <li><a href="#">Item <span class="uk-badge uk-text-top">2</span></a></li>
+                        <li><a href="#">Item</a></li>
+                    </ul>
+                    <ul uk-tab>
+                        <li class="uk-active"><a href="#">Active <span class="uk-badge uk-text-top">2</span></a></li>
+                        <li><a href="#">Item</a></li>
+                        <li><a href="#">Item</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>

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

@@ -0,0 +1,234 @@
+<!DOCTYPE html>
+<html lang="en-gb" dir="ltr">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Base - UIkit tests</title>
+        <script src="../dist/js/uikit.js"></script>
+        <script src="js/test.js"></script>
+    </head>
+    <body>
+        <div class="uk-container">
+            <div uk-grid>
+                <div class="uk-width-2-3@m">
+                    <h1>This is a H1 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.</p>
+                    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
+                    <h2>This is a H2 heading</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.</p>
+                    <pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</pre>
+                    <p>This is preformatted text with a code element.</p>
+<pre><code>// Code example
+&lt;div id="myid" class="myclass" hidden&gt;
+    Lorem ipsum &lt;strong&gt;dolor&lt;/strong&gt; sit amet, consectetur adipiscing elit.
+&lt;/div&gt;</code></pre>
+                    <p>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>This is a H3 heading</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.</p>
+                    <blockquote>This is a short block quote — look Ma, no paragraph tags!</blockquote>
+                    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
+                    <h4>This is a H4 heading</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.</p>
+                    <blockquote cite="#">
+                        <p class="uk-margin-small-bottom">The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element.</p>
+                        <footer>Someone famous in <cite><a href="">Source Title</a></cite></footer>
+                    </blockquote>
+                    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
+                    <h5>This is a H5 heading</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.</p>
+                    <hr>
+                    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
+                    <h6>This is a H6 heading</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.</p>
+                    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
+                    <hr>
+                    <h1>This is a H1 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>
+                    <h2>This is a H2 heading<br>with some more text</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>This is a H3 heading<br>with some more text</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>This is a H4 heading<br>with some more text</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>This is a H5 heading<br>with some more text</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>This is a H6 heading<br>with some more text</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-width-1-3@m">
+                    <h3>Text-level semantics</h3>
+                    <ul class="uk-list">
+                        <li>The <a href="#">a element</a> example</li>
+                        <li>The <abbr>abbr element</abbr> and <abbr title="Title text">abbr element with title</abbr> examples</li>
+                        <li>The <b>b element</b> example</li>
+                        <li>The <cite>cite element</cite> example</li>
+                        <li>The <code>code element</code> example</li>
+                        <li>The <del>del element</del> example</li>
+                        <li>The <dfn>dfn element</dfn> and <dfn title="Title text">dfn element with title</dfn> examples</li>
+                        <li>The <em>em element</em> example</li>
+                        <li>The <i>i element</i> example</li>
+                        <li>The img element <img src="" alt=""> example</li>
+                        <li>The <ins>ins element</ins> example</li>
+                        <li>The <kbd>kbd element</kbd> example</li>
+                        <li>The <mark>mark element</mark> example</li>
+                        <li>The <q>q element <q>inside</q> a q element</q> example</li>
+                        <li>The <s>s element</s> example</li>
+                        <li>The <samp>samp element</samp> example</li>
+                        <li>The <small>small element</small> example</li>
+                        <li>The <span>span element</span> example</li>
+                        <li>The <strong>strong element</strong> example</li>
+                        <li>The <sub>sub element</sub> example</li>
+                        <li>The <sup>sup element</sup> example</li>
+                        <li>The <u>u element</u> example</li>
+                        <li>The <var>var element</var> example</li>
+                    </ul>
+                    <address>
+                        The address element.<br>
+                        <a href="#">John Doe</a><br>
+                        somewhere, world
+                    </address>
+                    <hr>
+                    <h3>Figure</h3>
+                    <figure>
+                        <img src="images/photo.jpg" alt="">
+                        <figcaption>Figcaption content</figcaption>
+                    </figure>
+                    <hr>
+                    <h3>Unordered List</h3>
+                    <ul>
+                        <li>list item</li>
+                        <li>list item
+                            <ul>
+                                <li>list item</li>
+                                <li>list item
+                                    <ul>
+                                        <li>list item</li>
+                                        <li>list item</li>
+                                    </ul>
+                                </li>
+                                <li>list item</li>
+                                <li>list item</li>
+                            </ul>
+                        </li>
+                        <li>list item</li>
+                        <li>list item</li>
+                    </ul>
+                    <h3>Ordered List</h3>
+                    <ol>
+                        <li>list item</li>
+                        <li>list item
+                            <ol>
+                                <li>list item</li>
+                                <li>list item
+                                    <ol>
+                                        <li>list item</li>
+                                        <li>list item</li>
+                                    </ol>
+                                </li>
+                                <li>list item</li>
+                                <li>list item</li>
+                            </ol>
+                        </li>
+                        <li>list item</li>
+                        <li>list item</li>
+                    </ol>
+                    <h3>Description list</h3>
+                    <dl>
+                        <dt>Description name</dt>
+                        <dd>Description value</dd>
+                        <dt>Description name</dt>
+                        <dd>Description value</dd>
+                        <dd>Description value</dd>
+                        <dt>Description name</dt>
+                        <dt>Description name</dt>
+                        <dd>Description value</dd>
+                    </dl>
+                    <h3>Responsiveness</h3>
+                    <div class="uk-grid-small uk-child-width-1-4" uk-grid>
+                        <figure>
+                            <img src="images/photo.jpg" alt="">
+                            <figcaption>Image</figcaption>
+                        </figure>
+                        <figure>
+                            <canvas width="1800" height="1200" style="background: #f0f0f0;"></canvas>
+                            <figcaption>Canvas</figcaption>
+                        </figure>
+                        <figure>
+                            <video>
+                                <source src="//www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
+                                <source src="//www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg">
+                            </video>
+                            <figcaption>Video</figcaption>
+                        </figure>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>

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

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en-gb" dir="ltr">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Breadcrumb - UIkit tests</title>
+        <script src="../dist/js/uikit.js"></script>
+        <script src="js/test.js"></script>
+    </head>
+    <body>
+        <div class="uk-container">
+            <h1>Breadcrumb</h1>
+            <ul class="uk-breadcrumb">
+                <li><a href="#">Home</a></li>
+                <li><a href="#">Blog</a></li>
+                <li class="uk-disabled"><a href="#">Category</a></li>
+                <li><span>Span</span></li>
+            </ul>
+            <ul class="uk-breadcrumb">
+                <li><a href="#">Home</a></li>
+                <li><a href="#">Blog</a></li>
+                <li class="uk-disabled"><a href="#">Category</a></li>
+                <li class="uk-disabled"><a href="#">Link</a></li>
+            </ul>
+        </div>
+    </body>
+</html>

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

@@ -0,0 +1,253 @@
+<!DOCTYPE html>
+<html lang="en-gb" dir="ltr">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Button - UIkit tests</title>
+        <script src="../dist/js/uikit.js"></script>
+        <script src="js/test.js"></script>
+        <style type="text/css">
+            body { padding-bottom: 500px; }
+        </style>
+    </head>
+    <body>
+        <div class="uk-container">
+            <h1>Button</h1>
+            <div class="uk-child-width-1-4@m" uk-grid>
+                <div class="uk-width-1-2@m">
+                    <h2>Styles</h2>
+                    <p uk-margin>
+                        <a class="uk-button uk-button-default" href="#">Link</a>
+                        <button class="uk-button uk-button-default">Button</button>
+                        <button class="uk-button uk-button-default" disabled>Disabled</button>
+                    </p>
+                    <p uk-margin>
+                        <a class="uk-button uk-button-primary" href="#">Link</a>
+                        <button class="uk-button uk-button-primary">Button</button>
+                        <button class="uk-button uk-button-primary" disabled>Disabled</button>
+                    </p>
+                    <p uk-margin>
+                        <a class="uk-button uk-button-secondary" href="#">Link</a>
+                        <button class="uk-button uk-button-secondary">Button</button>
+                        <button class="uk-button uk-button-secondary" disabled>Disabled</button>
+                    </p>
+                    <p uk-margin>
+                        <a class="uk-button uk-button-danger" href="#">Link</a>
+                        <button class="uk-button uk-button-danger">Button</button>
+                        <button class="uk-button uk-button-danger" disabled>Disabled</button>
+                    </p>
+                </div>
+                <div>
+                    <h2>Text</h2>
+                    <p uk-margin>
+                        <a class="uk-button uk-button-text" href="#">Link</a>
+                        <button class="uk-button uk-button-text">Button</button>
+                        <button class="uk-button uk-button-text" disabled>Disabled</button>
+                    </p>
+                </div>
+                <div>
+                    <h2>Link</h2>
+                    <p uk-margin>
+                        <button class="uk-button uk-button-default">Button</button>
+                        <button class="uk-button uk-button-link">Button</button>
+                    </p>
+                    <p uk-margin>
+                        <button class="uk-button uk-button-default" disabled>Button</button>
+                        <button class="uk-button uk-button-link" disabled>Button</button>
+                    </p>
+                    <p uk-margin>
+                        <a href="#">Link</a>
+                        <button class="uk-button uk-button-link uk-text-baseline">Button</button>
+                    </p>
+                </div>
+            </div>
+            <h2>Size</h2>
+            <p uk-margin>
+                <a class="uk-button uk-button-default uk-button-small" href="#">Link</a>
+                <button class="uk-button uk-button-primary uk-button-small">Button</button>
+                <button class="uk-button uk-button-secondary uk-button-small">Button</button>
+                <button class="uk-button uk-button-danger uk-button-small">Button</button>
+                <button class="uk-button uk-button-default uk-button-small" disabled>Disabled</button>
+                <button class="uk-button uk-button-text uk-button-small">Button</button>
+            </p>
+            <p uk-margin>
+                <a class="uk-button uk-button-default uk-button-large" href="#">Link</a>
+                <button class="uk-button uk-button-primary uk-button-large">Button</button>
+                <button class="uk-button uk-button-secondary uk-button-large">Button</button>
+                <button class="uk-button uk-button-danger uk-button-large">Button</button>
+                <button class="uk-button uk-button-default uk-button-large" disabled>Disabled</button>
+                <button class="uk-button uk-button-text uk-button-large">Button</button>
+            </p>
+            <h2>Group</h2>
+            <div class="uk-margin" uk-margin>
+                <div class="uk-button-group">
+                    <a class="uk-button uk-button-default uk-button-small" href="#">Link</a>
+                    <button class="uk-button uk-button-default uk-button-small">Button</button>
+                    <button class="uk-button uk-button-default uk-button-small">Button</button>
+                </div>
+                <div class="uk-button-group">
+                    <a class="uk-button uk-button-primary uk-button-small" href="#">Link</a>
+                    <button class="uk-button uk-button-primary uk-button-small">Button</button>
+                    <button class="uk-button uk-button-primary uk-button-small">Button</button>
+                </div>
+                <div class="uk-button-group">
+                    <a class="uk-button uk-button-secondary uk-button-small" href="#">Link</a>
+                    <button class="uk-button uk-button-secondary uk-button-small">Button</button>
+                    <button class="uk-button uk-button-secondary uk-button-small">Button</button>
+                </div>
+                <div class="uk-button-group">
+                    <a class="uk-button uk-button-danger uk-button-small" href="#">Link</a>
+                    <button class="uk-button uk-button-danger uk-button-small">Button</button>
+                    <button class="uk-button uk-button-danger uk-button-small">Button</button>
+                </div>
+                <div class="uk-button-group">
+                    <button class="uk-button uk-button-default uk-button-small" disabled>Button</button>
+                    <button class="uk-button uk-button-default uk-button-small" disabled>Button</button>
+                    <button class="uk-button uk-button-default uk-button-small" disabled>Button</button>
+                </div>
+            </div>
+            <div class="uk-margin" uk-margin>
+                <div class="uk-button-group">
+                    <a class="uk-button uk-button-default" href="#">Link</a>
+                    <button class="uk-button uk-button-default">Button</button>
+                    <button class="uk-button uk-button-default">Button</button>
+                </div>
+                <div class="uk-button-group">
+                    <a class="uk-button uk-button-primary" href="#">Link</a>
+                    <button class="uk-button uk-button-primary">Button</button>
+                    <button class="uk-button uk-button-primary">Button</button>
+                </div>
+                <div class="uk-button-group">
+                    <a class="uk-button uk-button-secondary" href="#">Link</a>
+                    <button class="uk-button uk-button-secondary">Button</button>
+                    <button class="uk-button uk-button-secondary">Button</button>
+                </div>
+                <div class="uk-button-group">
+                    <a class="uk-button uk-button-danger" href="#">Link</a>
+                    <button class="uk-button uk-button-danger">Button</button>
+                    <button class="uk-button uk-button-danger">Button</button>
+                </div>
+                <div class="uk-button-group">
+                    <button class="uk-button uk-button-default" disabled>Button</button>
+                    <button class="uk-button uk-button-default" disabled>Button</button>
+                    <button class="uk-button uk-button-default" disabled>Button</button>
+                </div>
+            </div>
+            <div class="uk-margin" uk-margin>
+                <div class="uk-button-group">
+                    <a class="uk-button uk-button-default uk-button-large" href="#">Link</a>
+                    <button class="uk-button uk-button-default uk-button-large">Button</button>
+                    <button class="uk-button uk-button-default uk-button-large">Button</button>
+                </div>
+                <div class="uk-button-group">
+                    <a class="uk-button uk-button-primary uk-button-large" href="#">Link</a>
+                    <button class="uk-button uk-button-primary uk-button-large">Button</button>
+                    <button class="uk-button uk-button-primary uk-button-large">Button</button>
+                </div>
+                <div class="uk-button-group">
+                    <a class="uk-button uk-button-secondary uk-button-large" href="#">Link</a>
+                    <button class="uk-button uk-button-secondary uk-button-large">Button</button>
+                    <button class="uk-button uk-button-secondary uk-button-large">Button</button>
+                </div>
+                <div class="uk-button-group">
+                    <a class="uk-button uk-button-danger uk-button-large" href="#">Link</a>
+                    <button class="uk-button uk-button-danger uk-button-large">Button</button>
+                    <button class="uk-button uk-button-danger uk-button-large">Button</button>
+                </div>
+                <div class="uk-button-group">
+                    <button class="uk-button uk-button-default uk-button-large" disabled>Button</button>
+                    <button class="uk-button uk-button-default uk-button-large" disabled>Button</button>
+                    <button class="uk-button uk-button-default uk-button-large" disabled>Button</button>
+                </div>
+            </div>
+            <h2>Group with Drop</h2>
+            <div class="uk-margin" uk-margin>
+                <div class="uk-button-group">
+                    <button class="uk-button uk-button-default">Group</button>
+                    <div class="uk-inline">
+                        <button class="uk-button uk-button-default" type="button"><span uk-icon="icon: table"></span></button>
+                        <div uk-drop="mode: click">
+                            <div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="uk-button-group">
+                    <button class="uk-button uk-button-primary">Group</button>
+                    <div class="uk-inline">
+                        <button class="uk-button uk-button-primary" type="button"><span uk-icon="icon: table"></span></button>
+                        <div uk-drop="mode: click">
+                            <div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="uk-button-group">
+                    <button class="uk-button uk-button-secondary">Group</button>
+                    <div class="uk-inline">
+                        <button class="uk-button uk-button-secondary" type="button"><span uk-icon="icon: table"></span></button>
+                        <div uk-drop="mode: click">
+                            <div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="uk-button-group">
+                    <button class="uk-button uk-button-danger">Group</button>
+                    <div class="uk-inline">
+                        <button class="uk-button uk-button-danger" type="button"><span uk-icon="icon: table"></span></button>
+                        <div uk-drop="mode: click">
+                            <div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>