mirror of https://github.com/lukechilds/docs.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
425 lines
16 KiB
425 lines
16 KiB
<!DOCTYPE html>
|
|
<html lang="en-gb" dir="ltr">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Utility - UIkit tests</title>
|
|
<script src="js/test.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="uk-container">
|
|
|
|
<h1>Utility</h1>
|
|
|
|
<div class="uk-child-width-1-2@m" uk-grid>
|
|
<div>
|
|
|
|
<div class="uk-panel">
|
|
<h2>Panel</h2>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
</div>
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<h2>Panel Scrollable</h2>
|
|
|
|
<div class="uk-panel uk-panel-scrollable">
|
|
<ul class="uk-list">
|
|
<li><label><input class="uk-checkbox" type="checkbox"> Category 1</label></li>
|
|
<li>
|
|
<label><input class="uk-checkbox" type="checkbox"> Category 2</label>
|
|
<ul>
|
|
<li><label><input class="uk-checkbox" type="checkbox"> Category 2.1</label></li>
|
|
<li><label><input class="uk-checkbox" type="checkbox"> Category 2.2</label></li>
|
|
<li>
|
|
<label><input class="uk-checkbox" type="checkbox"> Category 2.3</label>
|
|
<ul>
|
|
<li><label><input class="uk-checkbox" type="checkbox"> Category 2.3.1</label></li>
|
|
<li><label><input class="uk-checkbox" type="checkbox"> Category 2.3.2</label></li>
|
|
</ul>
|
|
</li>
|
|
<li><label><input class="uk-checkbox" type="checkbox"> Category 2.4</label></li>
|
|
</ul>
|
|
</li>
|
|
<li><label><input class="uk-checkbox" type="checkbox"> Category 3</label></li>
|
|
<li><label><input class="uk-checkbox" type="checkbox"> Category 4</label></li>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<h2>Overflow Auto</h2>
|
|
|
|
<div class="uk-overflow-auto">
|
|
<table class="uk-table uk-table-striped uk-table-small uk-text-nowrap">
|
|
<thead>
|
|
<tr>
|
|
<th>Table Heading</th>
|
|
<th>Table Heading</th>
|
|
<th>Table Heading</th>
|
|
<th>Table Heading</th>
|
|
<th>Table Heading</th>
|
|
<th>Table Heading</th>
|
|
</tr>
|
|
</thead>
|
|
<tfoot>
|
|
<tr>
|
|
<td>Table Footer</td>
|
|
<td>Table Footer</td>
|
|
<td>Table Footer</td>
|
|
<td>Table Footer</td>
|
|
<td>Table Footer</td>
|
|
<td>Table Footer</td>
|
|
</tr>
|
|
</tfoot>
|
|
<tbody>
|
|
<tr>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
<td>Table Data</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<h2>Pre scrollable</h2>
|
|
|
|
<pre class="uk-overflow-auto uk-height-medium uk-resize"><code><div uk-grid>
|
|
<div class="uk-width-1-2">...</div><div class="uk-width-1-2">...</div><div class="uk-width-1-2">...</div>
|
|
<div class="uk-width-1-2">...</div>
|
|
</div>
|
|
|
|
<div uk-grid>
|
|
<div class="uk-width-1-2">...</div>
|
|
<div class="uk-width-1-2">...</div>
|
|
</div>
|
|
|
|
<div uk-grid>
|
|
<div class="uk-width-1-2">...</div>
|
|
<div class="uk-width-1-2">...</div>
|
|
</div>
|
|
|
|
<div uk-grid>
|
|
<div class="uk-width-1-2">...</div>
|
|
<div class="uk-width-1-2">...</div>
|
|
</div>
|
|
|
|
<div uk-grid>
|
|
<div class="uk-width-1-2">...</div>
|
|
<div class="uk-width-1-2">...</div>
|
|
</div>
|
|
|
|
<div uk-grid>
|
|
<div class="uk-width-1-2">...</div>
|
|
<div class="uk-width-1-2">...</div>
|
|
</div>
|
|
|
|
<div uk-grid>
|
|
<div class="uk-width-1-2">...</div>
|
|
<div class="uk-width-1-2">...</div>
|
|
</div>
|
|
|
|
<div uk-grid>
|
|
<div class="uk-width-1-2">...</div>
|
|
<div class="uk-width-1-2">...</div>
|
|
</div></code></pre>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Overflow Auto JS</h2>
|
|
|
|
<div class="uk-child-width-1-2@m" uk-grid>
|
|
<div>
|
|
|
|
<div class="uk-height-medium">
|
|
<div class="js-wrapper">
|
|
|
|
<p>Some content before the overflow auto container.</p>
|
|
|
|
<div uk-overflow-auto="selContainer: .uk-height-medium; selContent: .js-wrapper">
|
|
<div class="uk-grid-small" uk-grid>
|
|
<div class="uk-width-1-2"><img src="images/light.jpg" alt=""></div>
|
|
<div class="uk-width-1-2"><img src="images/dark.jpg" alt=""></div>
|
|
</div>
|
|
</div>
|
|
|
|
<p>Some content after the overflow auto container.</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<div class="uk-height-medium">
|
|
<div class="js-wrapper">
|
|
|
|
<p>Some content before the overflow auto container.</p>
|
|
|
|
<div uk-overflow-auto="selContainer: .uk-height-medium; selContent: .js-wrapper">
|
|
<div class="uk-grid-small" uk-grid>
|
|
<div class="uk-width-1-2"><img src="images/light.jpg" alt=""></div>
|
|
<div class="uk-width-1-2"><img src="images/dark.jpg" alt=""></div>
|
|
<div class="uk-width-1-2"><img src="images/photo.jpg" alt=""></div>
|
|
<div class="uk-width-1-2"><img src="images/photo2.jpg" alt=""></div>
|
|
</div>
|
|
</div>
|
|
|
|
<p>Some content after the overflow auto container.</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<h3>JavaScript Options</h3>
|
|
|
|
<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>selContainer</code></td>
|
|
<td>CSS selector</td>
|
|
<td><code>.uk-modal</code></td>
|
|
<td>The container element which provides the height.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>selContent</code></td>
|
|
<td>CSS selector</td>
|
|
<td><code>.uk-modal-dialog</code></td>
|
|
<td>The element which wraps the inner content to provide its height.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h2>Responsive Objects</h2>
|
|
|
|
<div class="uk-child-width-1-3@s" uk-grid>
|
|
<div>
|
|
<p>JS Responsive Width (Iframe)</p>
|
|
<iframe src="https://www.youtube-nocookie.com/embed/YE7VzlLtp-4?autoplay=0&showinfo=0&rel=0&modestbranding=1" width="560" height="315" frameborder="0" allowfullscreen uk-responsive></iframe>
|
|
</div>
|
|
<div>
|
|
<p>Responsive Height (Image)</p>
|
|
<p style="height: 100px; "><img class="uk-responsive-height" src="images/photo.jpg" alt=""></p>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Box-shadows</h2>
|
|
|
|
<div class="uk-child-width-1-5@m uk-grid-large" uk-grid>
|
|
<div>
|
|
|
|
<div class="uk-inline uk-box-shadow-hover-small">
|
|
<img class="uk-invisible" src="images/photo.jpg" alt="">
|
|
<div class="uk-position-center">Hover</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<div class="uk-inline uk-box-shadow-small">
|
|
<img class="uk-invisible" src="images/photo.jpg" alt="">
|
|
<div class="uk-position-center">Small</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<div class="uk-inline uk-box-shadow-medium">
|
|
<img class="uk-invisible" src="images/photo.jpg" alt="">
|
|
<div class="uk-position-center">Medium</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<div class="uk-inline uk-box-shadow-large">
|
|
<img class="uk-invisible" src="images/photo.jpg" alt="">
|
|
<div class="uk-position-center">Large</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<div class="uk-inline uk-box-shadow-xlarge">
|
|
<img class="uk-invisible" src="images/photo.jpg" alt="">
|
|
<div class="uk-position-center">XLarge</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<img class="uk-box-shadow-hover-xlarge" src="images/photo.jpg" alt="">
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<img class="uk-box-shadow-small" src="images/photo.jpg" alt="">
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<img class="uk-box-shadow-medium" src="images/photo.jpg" alt="">
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<img class="uk-box-shadow-large" src="images/photo.jpg" alt="">
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<img class="uk-box-shadow-xlarge" src="images/photo.jpg" alt="">
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<img class="uk-box-shadow-hover-xlarge" src="images/light.jpg" alt="">
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<img class="uk-box-shadow-small" src="images/light.jpg" alt="">
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<img class="uk-box-shadow-medium" src="images/light.jpg" alt="">
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<img class="uk-box-shadow-large" src="images/light.jpg" alt="">
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<img class="uk-box-shadow-xlarge" src="images/light.jpg" alt="">
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<img class="uk-box-shadow-hover-xlarge" src="images/dark.jpg" alt="">
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<img class="uk-box-shadow-small" src="images/dark.jpg" alt="">
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<img class="uk-box-shadow-medium" src="images/dark.jpg" alt="">
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<img class="uk-box-shadow-large" src="images/dark.jpg" alt="">
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<img class="uk-box-shadow-xlarge" src="images/dark.jpg" alt="">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Box-shadow Bottom</h2>
|
|
|
|
<div class="uk-child-width-1-5@m uk-grid-large" uk-grid>
|
|
<div class="uk-width-1-6@m">
|
|
|
|
<div class="uk-box-shadow-bottom">
|
|
<img src="images/photo.jpg" alt="">
|
|
</div>
|
|
|
|
</div>
|
|
<div class="uk-width-1-3@m">
|
|
|
|
<div class="uk-box-shadow-bottom">
|
|
<img src="images/photo.jpg" alt="">
|
|
</div>
|
|
|
|
</div>
|
|
<div class="uk-width-1-2@m">
|
|
|
|
<div class="uk-box-shadow-bottom">
|
|
<img src="images/photo.jpg" alt="">
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Drop Cap</h2>
|
|
|
|
<p class="uk-text-lead uk-dropcap">Dorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
|
|
<div class="uk-dropcap">
|
|
<p>Torem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
</div>
|
|
|
|
<h1>Logo</h1>
|
|
|
|
<p>
|
|
<a class="uk-logo" href="#">Text Logo</a>
|
|
</p>
|
|
|
|
<div class="uk-flex-inline uk-margin uk-grid-small" uk-grid>
|
|
<div>
|
|
<p>Image</p>
|
|
<a class="uk-logo" href="#">
|
|
<img src="images/photo.jpg" width="200" alt="">
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<p>+ Inverse Image</p>
|
|
<a class="uk-logo" href="#">
|
|
<img src="images/photo.jpg" width="200" alt="">
|
|
<img class="uk-logo-inverse" src="images/dark.jpg" width="200" alt="">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
|