Introduction
Onekit is Bootstrap landing page template with flat design and fast loading. This template is perfect for make awesome landing page site.
Quick start
Looking to quickly add Onekit to your project? Use css, js and starter page from this package.
CSS
Copy-paste the all plugins and Onekit stylesheets <link> into your <head> before all other elements to load our CSS.
<!--Plugins Styles-->
<link rel="stylesheet" href="src/plugins/aos/dist/aos.css">
<link rel="stylesheet" href="src/plugins/lightgallery.js/dist/css/lightgallery.min.css">
<link rel="stylesheet" href="src/plugins/flickity/dist/flickity.min.css">
<!--Styles-->
<link rel="stylesheet" href="src/css/theme.css">
Want to more faster ? You also can use this css in bundle files (minify css) with following css
<!--Bundle Theme Styles-->
<link rel="stylesheet" href="dist/css/bundle.min.css">
If you want to use Google fonts, you must add following code. You can change Google font from here
<!--Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
JS
Many of our components use Vanilla javascript, this not required Jquery again. For activate all features, place the following <script> near the end of your pages, right before the closing </body> tag, to enable them Popper.js must come first, then bootstrap, then our JavaScript and plugins.
Paste following js code before </body>
<!-- =========={ JAVASCRIPT }========== -->
<!-- Popper and Bootstrap js -->
<script src="src/plugins/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Plugin js -->
<script src="src/plugins/jarallax/dist/jarallax.min.js"></script>
<script src="src/plugins/jarallax/dist/jarallax-video.min.js"></script>
<script src="src/plugins/lightgallery.js/dist/js/lightgallery.min.js"></script>
<script src="src/plugins/lightgallery.js/demo/js/lg-thumbnail.min.js"></script>
<script src="src/plugins/lightgallery.js/demo/js/lg-video.js"></script>
<script src="src/plugins/aos/dist/aos.js"></script>
<script src="src/plugins/waypoints/lib/noframework.waypoints.min.js"></script>
<script src="src/plugins/counterup2/dist/index.js"></script>
<script src="src/plugins/flickity/dist/flickity.pkgd.min.js"></script>
<script src="src/plugins/typed.js/lib/typed.min.js"></script>
<script src="src/plugins/isotope-layout/dist/isotope.pkgd.min.js"></script>
<script src="src/plugins/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
<script src="src/plugins/vanilla-lazyload/dist/lazyload.min.js"></script>
<script src="src/plugins/hc-sticky/dist/hc-sticky.js"></script>
<!-- Theme js -->
<script src="src/js/theme.js"></script>
If you want to add jquery, this possible. Just add like following code.
<!-- =========={ JAVASCRIPT }========== -->
<!-- Popper and Bootstrap js -->
<script src="src/plugins/bootstrap5/dist/js/bootstrap.bundle.min.js"></script>
<script src="src/plugins/jquery/dist/jquery.slim.min.js"></script>
<!-- your plugin js in here -->
Want to more faster ? You also can use this js in bundle files (minify js) with following js
<!--Bundle Theme js-->
<script src="dist/js/bundle.min.js"></script>
Starter template
Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:
<!doctype html>
<html lang="en">
<head>
<!-- Title -->
<title>Hello, world!</title>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Favicon -->
<link rel="icon" href="src/img-min/logo/favicon.png">
<!--Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
<!--Plugins Styles-->
<link rel="stylesheet" href="src/plugins/aos/dist/aos.css">
<link rel="stylesheet" href="src/plugins/lightgallery.js/dist/css/lightgallery.min.css">
<link rel="stylesheet" href="src/plugins/flickity/dist/flickity.min.css">
<!--Styles-->
<link rel="stylesheet" href="src/css/theme.css">
</head>
<body>
<h1>Hello, world!</h1>
<!-- =========={ JAVASCRIPT }========== -->
<!-- Popper and Bootstrap js -->
<script src="src/plugins/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Plugin js -->
<script src="src/plugins/jarallax/dist/jarallax.min.js"></script>
<script src="src/plugins/jarallax/dist/jarallax-video.min.js"></script>
<script src="src/plugins/lightgallery.js/dist/js/lightgallery.min.js"></script>
<script src="src/plugins/lightgallery.js/demo/js/lg-thumbnail.min.js"></script>
<script src="src/plugins/lightgallery.js/demo/js/lg-video.js"></script>
<script src="src/plugins/aos/dist/aos.js"></script>
<script src="src/plugins/waypoints/lib/noframework.waypoints.min.js"></script>
<script src="src/plugins/counterup2/dist/index.js"></script>
<script src="src/plugins/flickity/dist/flickity.pkgd.min.js"></script>
<script src="src/plugins/typed.js/lib/typed.min.js"></script>
<script src="src/plugins/isotope-layout/dist/isotope.pkgd.min.js"></script>
<script src="src/plugins/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
<script src="src/plugins/vanilla-lazyload/dist/lazyload.min.js"></script>
<script src="src/plugins/hc-sticky/dist/hc-sticky.js"></script>
<!-- Theme js -->
<script src="src/js/theme.js"></script>
</body>
</html>
Want more faster ? use this bundle version
<!doctype html>
<html lang="en">
<head>
<!-- Title -->
<title>Hello, world!</title>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Favicon -->
<link rel="icon" href="src/img-min/logo/favicon.png">
<!--Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
<!--Bundle Styles-->
<link rel="stylesheet" href="dist/css/bundle.min.css">
</head>
<body>
<h1>Hello, world!</h1>
<!-- Bundle js -->
<script src="dist/js/bundle.min.js"></script>
</body>
</html>
That's all you need for overall page requirements. Visit the Bootstrap's Layout docs our official examples to start laying out your site's content and components.
Dark Mode
Onekit supported dark mode, it's very simple to switch, just add data-bs-theme="dark"
<!doctype html>
<html lang="en" data-bs-theme="dark">
...
</html>
Important globals
Onekit employs a handful of important global styles and settings that you'll need to be aware of when using it, all of which are almost exclusively geared towards the normalization of cross browser styles. Let's dive in.
HTML5 doctype
Onekit requires the use of the HTML5 doctype. Without it, you'll see some funky incomplete styling, but including it shouldn't cause any considerable hiccups.
<!doctype html>
<html lang="en">
...
</html>
Responsive meta tag
Onekit is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
You can see an example of this in action in the starter template.