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.
376 lines
22 KiB
376 lines
22 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>Section - UIkit tests</title>
|
|
<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>
|
|
|