uikit
Version:
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
487 lines (384 loc) • 20.6 kB
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>
<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>
<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>
</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" width="1800" height="1200" alt=""></div>
<div class="uk-width-1-2"><img src="images/dark.jpg" width="1800" height="1200" 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" width="1800" height="1200" alt=""></div>
<div class="uk-width-1-2"><img src="images/dark.jpg" width="1800" height="1200" alt=""></div>
<div class="uk-width-1-2"><img src="images/photo.jpg" width="1800" height="1200" alt=""></div>
<div class="uk-width-1-2"><img src="images/photo2.jpg" width="1800" height="1200" 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>sel-container</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>sel-content</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/c2pz2mlSfXA?autoplay=0&showinfo=0&rel=0&modestbranding=1" width="1920" height="1080" allowfullscreen uk-responsive></iframe>
</div>
<div>
<p>Responsive Height (Image)</p>
<p style="height: 100px; "><img class="uk-responsive-height" src="images/photo.jpg" width="1800" height="1200" alt=""></p>
</div>
</div>
<h2>Object Fit and Position</h2>
<div class="uk-child-width-1-3@s" uk-grid>
<div>
<p>Object Fit Cover</p>
<img class="uk-object-cover" src="images/photo.jpg" width="1000" height="1000" alt="" style="aspect-ratio: 1 / 1;">
</div>
<div>
<p>Object Fit Contain</p>
<img class="uk-object-contain" src="images/photo.jpg" width="1000" height="1000" alt="" style="aspect-ratio: 1 / 1;">
</div>
<div>
<p>Object Fit Cover Left</p>
<img class="uk-object-cover uk-object-top-left" src="images/photo.jpg" width="1000" height="1000" alt="" style="aspect-ratio: 1 / 1;">
</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" width="1800" height="1200" 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" width="1800" height="1200" 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" width="1800" height="1200" 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" width="1800" height="1200" 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" width="1800" height="1200" alt="">
<div class="uk-position-center">X-Large</div>
</div>
</div>
<div>
<img class="uk-box-shadow-hover-xlarge" src="images/photo.jpg" width="1800" height="1200" alt="">
</div>
<div>
<img class="uk-box-shadow-small" src="images/photo.jpg" width="1800" height="1200" alt="">
</div>
<div>
<img class="uk-box-shadow-medium" src="images/photo.jpg" width="1800" height="1200" alt="">
</div>
<div>
<img class="uk-box-shadow-large" src="images/photo.jpg" width="1800" height="1200" alt="">
</div>
<div>
<img class="uk-box-shadow-xlarge" src="images/photo.jpg" width="1800" height="1200" alt="">
</div>
<div>
<img class="uk-box-shadow-hover-xlarge" src="images/light.jpg" width="1800" height="1200" alt="">
</div>
<div>
<img class="uk-box-shadow-small" src="images/light.jpg" width="1800" height="1200" alt="">
</div>
<div>
<img class="uk-box-shadow-medium" src="images/light.jpg" width="1800" height="1200" alt="">
</div>
<div>
<img class="uk-box-shadow-large" src="images/light.jpg" width="1800" height="1200" alt="">
</div>
<div>
<img class="uk-box-shadow-xlarge" src="images/light.jpg" width="1800" height="1200" alt="">
</div>
<div>
<img class="uk-box-shadow-hover-xlarge" src="images/dark.jpg" width="1800" height="1200" alt="">
</div>
<div>
<img class="uk-box-shadow-small" src="images/dark.jpg" width="1800" height="1200" alt="">
</div>
<div>
<img class="uk-box-shadow-medium" src="images/dark.jpg" width="1800" height="1200" alt="">
</div>
<div>
<img class="uk-box-shadow-large" src="images/dark.jpg" width="1800" height="1200" alt="">
</div>
<div>
<img class="uk-box-shadow-xlarge" src="images/dark.jpg" width="1800" height="1200" 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" width="1800" height="1200" alt="">
</div>
</div>
<div class="uk-width-1-3@m">
<div class="uk-box-shadow-bottom">
<img src="images/photo.jpg" width="1800" height="1200" alt="">
</div>
</div>
<div class="uk-width-1-2@m">
<div class="uk-box-shadow-bottom">
<img src="images/photo.jpg" width="1800" height="1200" 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-child-width-auto uk-grid-small" uk-grid>
<div>
<p>Image<br>-</p>
<a class="uk-logo" href="#" aria-label="Back to Home">
<img src="images/photo.jpg" width="150" height="100" alt="">
</a>
</div>
<div>
<p>Picture<br>-</p>
<a class="uk-logo" href="#" aria-label="Back to Home">
<picture>
<img src="images/photo.jpg" width="150" height="100" alt="">
</picture>
</a>
</div>
<div>
<p>Image<br>Inverse Image</p>
<a class="uk-logo" href="#" aria-label="Back to Home">
<img src="images/photo.jpg" width="150" height="100" alt="">
<img class="uk-logo-inverse" src="images/dark.jpg" width="150" height="100" alt="">
</a>
</div>
<div>
<p>Picture<br>Inverse Picture</p>
<a class="uk-logo" href="#" aria-label="Back to Home">
<picture>
<img src="images/photo.jpg" width="150" height="100" alt="">
</picture>
<picture>
<img class="uk-logo-inverse" src="images/dark.jpg" width="150" height="100" alt="">
</picture>
</a>
</div>
<div>
<p>Picture<br>Inverse SVG</p>
<a class="uk-logo" href="#" aria-label="Back to Home">
<picture>
<img src="images/photo.jpg" width="150" height="100" alt="">
</picture>
<img class="uk-logo-inverse" src="images/icons.svg#trash" alt="" uk-svg>
</a>
</div>
<div>
<p>SVG<br>Inverse Picture</p>
<a class="uk-logo" href="#" aria-label="Back to Home">
<img src="images/icons.svg#table" alt="" uk-svg>
<picture>
<img class="uk-logo-inverse" src="images/dark.jpg" width="150" height="100" alt="">
</picture>
</a>
</div>
<div>
<p>SVG<br>Inverse SVG</p>
<a class="uk-logo" href="#" aria-label="Back to Home">
<img src="images/icons.svg#table" alt="" uk-svg>
<img class="uk-logo-inverse" src="images/icons.svg#trash" alt="" uk-svg>
</a>
</div>
</div>
</div>
</body>
</html>