Structuring
Options for structuring your pages.
Layout Structuring
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- BasMaterial UI CSS -->
<link rel="stylesheet" href="css/bas-material-ui.min.css">
</head>
<body class="bas-ui-layout-header-fixed bas-ui-side-nav-auto" >
<!-- Layout Header -->
<header class="bas-ui-layout-header">
<div class="bas-ui-app-bar">
...
</div>
<div class="bas-ui-tool-bar">
...
</div>
</header>
<!-- Layout Side Nav -->
<div class="bas-ui-side-nav">
<div class="bas-ui-side-nav-wrapper">
<div class="brand">
...
</div>
<div class="bas-ui-side-nav-content-wrapper">
...
</div>
<div class="footer">
...
</div>
</div>
</div>
<!-- Layout Body -->
<main class="bas-ui-main bas-ui-scrollbar-y">
...
</main>
<!-- jQuery first, then BasMaterial JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="js/bas-material-ui.min.js"></script>
</body>
</html>Layout Header
Add bas-ui-layout-header-fixed to body for header fixed or remove for not.
...
<body class="bas-ui-layout-header-fixed" >
<!-- Layout Header -->
<header class="bas-ui-layout-header">
<div class="bas-ui-app-bar">
<!-- Toggle -->
<div class="bas-ui-side-nav-toggle"><i class="mdi mdi-menu bas-ui-icon bas-ui-icon-left bas-ui-icon-24"></i></div>
<!-- Breadcrumb -->
<div class="bas-ui-breadcrumb">
<a href="/" class="bas-ui-breadcrumb-item"><span>Layout</span></a>
<a href="/" class="bas-ui-breadcrumb-item"><span>Structuring</span></a>
</div>
<!-- Nav Menu -->
<ul class="right bas-ui-nav-menu">
<li class="bas-ui-nav-menu-item-icon">
<a class="bas-ui-button bas-ui-button-default bas-ui-button-flat bas-ui-button-fab bas-ui-button-fab-xs bas-ui-waves bas-ui-top-search-show">
<i class="mdi mdi-magnify bas-ui-icon"></i>
</a>
</li>
<li class="bas-ui-nav-menu-item-icon">
<a class="bas-ui-button bas-ui-button-default bas-ui-button-flat bas-ui-button-fab bas-ui-button-fab-xs bas-ui-waves">
<i class="mdi mdi-bell bas-ui-icon"></i>
</a>
<span class="bas-ui-badge bas-ui-badge-overlap" data-badge="12"></span>
</li>
...
</ul>
<!-- Top Search -->
<div class="bas-ui-top-search">
<i class="bas-ui-top-search-close mdi mdi-arrow-left bas-ui-icon bas-ui-icon-left"></i>
<!-- Search -->
<div class="bas-ui-search">
<input type="text" placeholder="Search">
<i class="bas-ui-search-icon-left mdi mdi-magnify bas-ui-icon bas-ui-icon-left"></i>
<i class="bas-ui-search-clear mdi mdi-close bas-ui-icon bas-ui-icon-right"></i>
</div>
</div>
</div>
<div class="bas-ui-tool-bar">
<div class="header-title">
<span class="section-title">Tool Bar</span>
</div>
</div>
</header>
</body>
...Layout Side Nav
Add bas-ui-side-nav-auto to body for auto side nav.
or add bas-ui-side-nav-hide and bas-ui-side-nav-with-overlay to body for manual show and overlay side nav.
...
<body class="bas-ui-side-nav-auto" >
<!-- Layout Side Nav -->
<div class="bas-ui-side-nav">
<div class="bas-ui-side-nav-wrapper">
<div class="brand">
<div class="bas-ui-side-nav-toggle"><i class="mdi mdi-menu bas-ui-icon bas-ui-icon-left bas-ui-icon-24"></i></div>
<a target="_blank" href="/"><img src="/img/logo.svg" alt="logo"></a>
</div>
<div class="bas-ui-side-nav-content-wrapper">
<nav>
<!-- Search -->
<div class="bas-ui-search">
<input type="text" placeholder="Search">
<i class="bas-ui-search-icon-left mdi mdi-magnify bas-ui-icon bas-ui-icon-left"></i>
<i class="bas-ui-search-clear mdi mdi-close bas-ui-icon bas-ui-icon-right bas-ui-icon-18"></i>
</div>
<!-- Collapsible Menu -->
<ul class="bas-ui-collapsible" data-collapsible="accordion">
<li>
<div class="bas-ui-collapsible-header bas-ui-waves active">
<a id="collapsible-nav-index" href="/">
<i class="mdi mdi-hexagon bas-ui-icon bas-ui-icon-left bas-ui-icon-24"></i>
Overview
</a>
</div>
</li>
<li>
<div class="bas-ui-collapsible-header bas-ui-waves">
<a id="collapsible-nav-layout">
<i class="mdi mdi-view-quilt bas-ui-icon bas-ui-icon-left bas-ui-icon-24"></i>
Layout
</a>
</div>
<div class="bas-ui-collapsible-body collapse in">
<a id="collapsible-nav-layout-1" href="/">Layout 1</a>
<a id="collapsible-nav-layout-2" href="/">Layout 2</a>
</div>
</li>
...
</ul>
</nav>
</div>
<div class="footer">
<a target="_blank" href="/"><i class="mdi mdi-github-circle bas-ui-icon bas-ui-icon-left bas-ui-icon-18"></i></a><p class="copyright">© Site - v0.0.0</p>
</div>
</div>
</div>
</body>
...Layout Body
...
<body>
<!-- Layout Body -->
<main class="bas-ui-main bas-ui-scrollbar-y">
<section class="bas-ui-section bas-ui-top-padding-3 bas-ui-bottom-padding-3">
<div class="container">
...
</div>
</section>
...
</main>
</body>
...