Getting started
This is the documentation for Beets. If you want to know what the purpose of Beets is, please read the about page.
Bootstrap
Beets v0.5.3 is developed using Bootstrap 5.1.1. You do not need to download and install Bootstrap for Beets to work since Beets has Bootstrap CSS and JS included.
Font Awesome
Some elements need icons, like toggler buttons, and I use the Font Awsome library for that so make sure to download and install it. Those icons can of course be changed into other things.
Beets v0.5.3 is developed using Font Awesome Free 5.15.4.
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.
<?php
$page = isset($_GET['page']) ? $_GET['page'] : null;
?>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Website title</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font Awesome -->
<link rel="stylesheet" href="assets/fontawesome-free-5.15.4-web/css/all.css">
<!-- Beets -->
<link rel="stylesheet" href="assets/beets-0.5.3-dist/css/beets.min.css" type="text/css">
<script src="assets/beets-0.5.3-dist/js/popper-2.5.4.min.js"></script>
<script src="assets/beets-0.5.3-dist/js/beets.js"></script>
</head>
<?php
function navSelect($activePage, $lookup) {
return ($lookup == $activePage) ? 'active' : null;
}
?>
<body>
<!-- PAGE CONTAINER -->
<div id="page-container" class="sidebar-o page-header-fixed">
<!-- SIDEBAR -->
<nav id="sidebar" class="sidebar-collapse">
<div class="content-header">
<img src="img/logotype.png" style="height: 40px;">
<button class="btn btn-ghost-secondary btn-aspect rounded-circle d-lg-none" onclick="toggleSidebar('sidebar')"><i class="fas fa-times"></i></button>
</div>
<div class="content-side">
<div class="row mb-2 pb-3 border-bottom">
<div class="col-auto input-group">
<input type="text" class="form-control rounded-start-pill border border-end-0" placeholder="Search...">
<button class="btn text-beets border border-start-0 rounded-end-pill"><i class="fas fa-search"></i></button>
</div>
</div>
<ul class="nav-main">
<li class="nav-main-item">
<a class="nav-main-link <?=navSelect($page, "link1")?>" href="?page=link1"><i class="fas fa-heart fa-fw nav-main-link-icon"></i>Link 1</a>
</li>
<li class="nav-main-item">
<a class="nav-main-link <?=navSelect($page, "link2")?>" href="?page=link2"><i class="fas fa-heart fa-fw nav-main-link-icon"></i>Link 2</a>
</li>
<li class="nav-main-item">
<a class="nav-main-link nav-main-link-submenu" href="#" id="link3" onclick="toggleSubmenu('link3')"><i class="fas fa-heart fa-fw nav-main-link-icon"></i>Link 3</a>
<ul class="nav-main-submenu">
<li class="nav-main-item">
<a class="nav-main-link <?=navSelect($page, "link31")?>" href="?page=link31"><i class="fas fa-heart fa-fw nav-main-link-icon"></i>Link 3-1</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<!-- PAGE HEADER -->
<header id="page-header">
<div class="content-header justify-content-lg-end">
<button class="btn btn-alt-light btn-aspect d-lg-none" onclick="toggleSidebar('sidebar')"><i class="fas fa-bars"></i></button>
<div class="d-flex d-lg-none align-items-center">
<img src="img/logotype.png" style="height: 40px;">
</div>
<div class="d-flex align-items-center">
<div class="dropdown d-flex align-items-center">
<span class="d-none d-lg-inline-block me-2 mt-1">User Account</span>
<button class="btn btn-alt-light fw-bold btn-aspect rounded-circle dropdown-no-caret dropdown-toggle" data-bs-toggle="dropdown">UA</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Account</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Log out</a></li>
</ul>
</div>
</div>
</div>
</header>
<!-- MAIN CONTAINER -->
<main id="main-container">
<div class="container-md px-md-5">
<?php
$defaultPage = "home.php";
$includeList = array(
"home" => "home.php",
"link1" => "link1.php",
"link2" => "link2.php",
"link31" => "link31.php",
);
include (isset($page) && array_key_exists($page, $includeList)) ? $includeList[$page] : $defaultPage;
?>
</div>
</main>
<!-- PAGE FOOTER -->
<footer id="page-footer">
<div class="container-md py-3 px-5 align-items-between">
<div class="row">
<div class="col-sm-6 py-1 text-center text-sm-start">Footer Content Left</div>
<div class="col-sm-6 py-1 text-center text-sm-end">Footer Content Right</div>
</div>
</div>
</footer>
</div>
<!-- Activate tooltips -->
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
<!-- Activate popovers -->
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl, {
html: true,
sanitize: false /* false = allow all html */
})
})
</script>
</body>
</html>