Quick start
Looking to quickly add iStrap to your project? Use iStrapCDN, provided for free by the folks at StackPath. Using a package manager or need to download the source files?
Head to the downloads page.
CSS
Copy-paste the stylesheet <link>
into your <head>
before all other stylesheets to load our CSS.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/istrap@1.0.1/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/istrap@1.0.1/assets/css/istrap.css">
JS
Place the following <script>
s near the end of your pages, right before the closing </body>
tag, to enable them.
<script src="https://cdn.jsdelivr.net/npm/istrap@1.0.1/assets/js/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/istrap@1.0.1/assets/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/istrap@1.0.1/assets/js/smooth-scrollbar.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/istrap@1.0.1/assets/js/istrap.js"></script>
<script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.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>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- iStrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/istrap@1.0.1/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/istrap@1.0.1/assets/css/istrap.css">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Script -->
<script src="https://cdn.jsdelivr.net/npm/istrap@1.0.1/assets/js/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/istrap@1.0.1/assets/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/istrap@1.0.1/assets/js/smooth-scrollbar.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/istrap@1.0.1/assets/js/istrap.js"></script>
<script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script>
</body>
</html>
That’s all you need for overall page requirements.