Getting started
Boilerplate
The code below can be copied into an index.php file to quickly getting started with a project. Just make sure that you have downloaded and installed the framework first.
Remember to also download the Font Awesome library. You can get a free account here.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Website Name</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/fontawesome-free-5.13.0-web/css/all.css">
<link rel="stylesheet" href="css/beets.min.css" type="text/css">
<script src="js/jquery-3.1.4.1.slim.min.js"></script>
<script src="js/popper-1.16.0.min.js"></script>
<script src="js/beets.js"></script>
</head>
<?php
function navSelect($activePage, $lookup) {
return ($lookup == $activePage) ? 'active' : null;
}
?>
<body>
<div id="page-container" class="sidebar-o sidebar-dark page-header-fixed">
<nav id="sidebar" class="sidebar-collapse">
<div class="content-header">
<div>
<img src="img/logo.png" style="height: 40px;">
</div>
<button class="btn btn-alt-light btn-aspect rounded-circle d-lg-none" onclick="toggleSidebar('sidebar')"><i class="fas fa-times"></i></button>
</div>
<div class="content-side">
<ul class="nav-main">
<li class="nav-main-item">
<a class="nav-main-link <?=navSelect($page, "link1")?>" href="?page=link-1">
<i class="fas fa-home fa-fw nav-main-link-icon"></i>Link 1</a>
</li>
<li class="nav-main-heading">Heading</li>
<li class="nav-main-item">
<a class="nav-main-link <?=navSelect($page, "link-2")?>" href="?page=link-2">
<i class="fas fa-user fa-fw nav-main-link-icon"></i>Link 2</a>
</li>
</ul>
</div>
</nav>
<header id="page-header">
<div class="content-header">
<div class="d-flex align-items-center">
HEADER CONTENT 1
</div>
<div class="d-flex align-items-center">
HEADER CONTENT 2
<button class="btn btn-light btn-aspect rounded-circle d-lg-none ml-2" onclick="toggleSidebar('sidebar')"><i class="fas fa-bars"></i></button>
</div>
</div>
</header>
<main id="main-container">
<?php
$defaultPage = "home.php";
$includeList = array(
"home" => "content/home.php",
"link-1" => "content/link-1.php",
"link-2" => "content/link-2.php",
);
include (isset($page) && array_key_exists($page, $includeList)) ? include $includeList[$page] : $defaultPage;
?>
</main>
<footer id="page-footer" class="bg-body-light">
<div class="content py-3">
<div class="row">
<div class="col-sm-6 py-1 text-center text-sm-left">FOOTER CONTENT 1</div>
<div class="col-sm-6 py-1 text-center text-sm-right">FOOTER CONTENT 2</div>
</div>
</div>
</footer>
</div>
<!-- Activate tooltips -->
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
<!-- Activate popovers -->
<script>
$(function () {
$('[data-toggle="popover"]').popover({
html: true,
sanitize: false /* false = allow all html */
})
})
</script>
</body>
</html>