Basic HTML
To get a working page, you'll need some standard HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Your page's title</title>
</head>
<body>
<!-- Most of your code will come here -->
</body>
</html>
Then you will need to load the CSS (somewhere in the <head> tag is a good choice):
<link rel="stylesheet" href="assets/css/adm-in-2.min.css">
You may need to load the JS, especially if you use some plugins (just before the </body> tag is great):
<script src="assets/js/adm-in-2.min.js"></script>
Then you can setup the basic template
Setting up the topbar
The topbar appears on every page. It's code is pretty simple:
<div role="banner" id="topbar">
<a href="/Adm-in.2/" id="logo"><span>Adm'in.2</span></a>
<nav role="navigation" id="quick-links">
<a href="/logout"><span role="tooltip">Logout</span></a>
</nav>
</div>
This will show a bar on the complete width of the window, with your site's name on the left and some quick access links (for the user's convenience) on the right.
To use the quick links, you will need to specify the icons to use:
/* With some good ol' CSS */
#quick-links>a[href="/logout"]{
background-image: data-uri('../img/icon-lock.svg');
}
/* With a bit of HTML, using the icons plugin */
<a href="/logout" data-icon="lock_outline"><span role="tooltip">Logout</span></a>
Adding a sidebar
The sidebar is not required so if you don't need it, just don't put it in your code
<nav role="navigation" id="sidebar">
<header id="sidebar-header"><h1>Menu</h1></header>
<ul role="menu" aria-labelledby="sidebar-header" id="sidebar-content">
<li role="menuitem" class="widget widget-search">
<h2 class="widget-title">Search</h2>
<form action="/search" method="get" class="widget-content" id="sidebar-search-form">
<input type="search" name="q" value="" placeholder="Search" id="sidebar-search-input">
</form>
</li>
<li role="menuitem" class="menu">
<h2 class="menu-title"><a href="#0">Menu title</a></h2>
<ul role="menu" class="menu-content">
<li role="menuitem" class="submenu"><a href="#0">Item 2</a></li>
<li role="menuitem" class="submenu"><a href="#0">Item 2</a></li>
</ul>
</li>
</ul>
</nav>
if you want to hide the content of a menu, simply use the following HTML code:
<ul role="menu" class="menu-content" hidden="true" aria-hidden="true">
As you can see, there is a built-in search form. If don't want it, you can simply remove the HTML. Your sidebar may not look as pretty, but it won't break anything.
Putting your content
To put your page's main content in one place, it's pretty simple:
<main id="main" role="main">
<!-- Your content goes here -->
</main>