What is UIKit?
UIkit is a simple web dev framework but you cannot create single page applications with it. It is a UI helper like Bootstrap. We have seen many UIKit samples before.
All you need to do to use UIKit is have this in the header section of the html page.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/js/uikit-icons.min.js"></script>
</head>
What is a modal window?
A modal or popup is a very essential part of any UI framework.
You have to force the user to interact from time to time.
There are several situations that warrant this. For instance he takes a dangerous action and you have to warn him. Or the lapto is going out of power and you have to ask him to connect the power chord.
Modal windows come in many shapes and colors as we shall see in our examples.
What are dialogs?
A dialog box obtains some information from the user. It could be a popup form filling or login box.
Modal windows sometimes contain some buttons for users to choose their next plan of action.
Code sample and demo
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/js/uikit-icons.min.js"></script>
</head>
<body>
<!-- This is a button toggling the modal -->
<button class="uk-button uk-button-default uk-margin-small-right"
type="button" uk-toggle="target: #modal-example">Open</button>
<!-- This is an anchor toggling the modal -->
<a href="#modal-example" uk-toggle>Open</a>
<!-- This is the modal -->
<div id="modal-example" uk-modal>
<div class="uk-modal-dialog uk-modal-body">
<h2 class="uk-modal-title">Headline</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>
<p class="uk-text-right">
<button class="uk-button uk-button-default uk-modal-close"
type="button">Cancel</button>
<button class="uk-button uk-button-primary"
type="button">Save</button>
</p>
</div>
</div>
<!-- This is a button toggling the modal with the default close button
-->
<button class="uk-button uk-button-default uk-margin-small-right"
type="button" uk-toggle="target: #modal-close-default">Default</button>
<!-- This is the modal with the default close button -->
<div id="modal-close-default" uk-modal>
<div class="uk-modal-dialog uk-modal-body">
<button class="uk-modal-close-default" type="button"
uk-close></button>
<h2 class="uk-modal-title">Default</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>
</div>
</div>
<!-- This is a button toggling the modal with the outside close button
-->
<button class="uk-button uk-button-default uk-margin-small-right"
type="button" uk-toggle="target: #modal-close-outside">Outside</button>
<!-- This is the modal with the outside close button -->
<div id="modal-close-outside" uk-modal>
<div class="uk-modal-dialog uk-modal-body">
<button class="uk-modal-close-outside" type="button"
uk-close></button>
<h2 class="uk-modal-title">Outside</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>
</div>
</div>
<a class="uk-button uk-button-default" href="#modal-full"
uk-toggle>Open</a>
<div id="modal-full" class="uk-modal-full" uk-modal>
<div class="uk-modal-dialog">
<button class="uk-modal-close-full uk-close-large" type="button"
uk-close></button>
<div class="uk-grid-collapse uk-child-width-1-2@s
uk-flex-middle" uk-grid>
<div class="uk-background-cover" style="background-image:
url('images/photo.jpg');" uk-height-viewport></div>
<div class="uk-padding-large">
<h1>Headline</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>
</div>
</div>
</div>
</div>
<p uk-margin>
<a class="uk-button uk-button-default" href="#modal-media-image"
uk-toggle>Image</a>
<a class="uk-button uk-button-default" href="#modal-media-video"
uk-toggle>Video</a>
<a class="uk-button uk-button-default" href="#modal-media-youtube"
uk-toggle>YouTube</a>
<a class="uk-button uk-button-default" href="#modal-media-vimeo"
uk-toggle>Vimeo</a>
</p>
<div id="modal-media-image" class="uk-flex-top" uk-modal>
<div class="uk-modal-dialog uk-width-auto uk-margin-auto-vertical">
<button class="uk-modal-close-outside" type="button"
uk-close></button>
<img src="images/photo.jpg" width="1800" height="1200" alt="">
</div>
</div>
<h2> Media </h2>
<div id="modal-media-video" class="uk-flex-top" uk-modal>
<div class="uk-modal-dialog uk-width-auto uk-margin-auto-vertical">
<button class="uk-modal-close-outside" type="button"
uk-close></button>
<video
src="https://yootheme.com/site/images/media/yootheme-pro.mp4"
width="1920" height="1080" controls playsinline uk-video></video>
</div>
</div>
<div id="modal-media-youtube" class="uk-flex-top" uk-modal>
<div class="uk-modal-dialog uk-width-auto uk-margin-auto-vertical">
<button class="uk-modal-close-outside" type="button"
uk-close></button>
<iframe src="
width="1920" height="1080" uk-video uk-responsive></iframe>
</div>
</div>
<div id="modal-media-vimeo" class="uk-flex-top" uk-modal>
<div class="uk-modal-dialog uk-width-auto uk-margin-auto-vertical">
<button class="uk-modal-close-outside" type="button"
uk-close></button>
<iframe src="
"
width="1280" height="720" uk-video uk-responsive></iframe>
</div>
</div>
</body>
</html>
Conclusion
UIKit has always interested me for how simply it gets the job done.
Anyone into web apps or websites needs these tools to solve common problems we programmers face now and then.
We shall see more UIKit samples as the days go by.
Answer
What is positioning in marketing?
It is a key concept to know how to frame or position your product/service such that the customers can relate to their pain points getting solved by the thing that you sell.
Positioning your offer in a saturated marketplace requires a solid understanding of the awareness level of your customer base and sophistication level.
Question
What is meant by Net Promoter Score?
Feedback
If you want your SaaS to rock then you must make money. Not just some money but big money.
I would much rather create one SaaS properly that earns you good MRR than 5 that people pay less since the quality is average.