Page shell
This page outlines the basic structure in which various content and components can be placed. Use this structure as a base for your webpage developpment.
Basic structure
<!doctype html>
<html>
<head>
<!-- Page title and stylesheets are placed here -->
</head>
<body>
<header>
<!-- Top navigation is placed here -->
</header>
<div id="page-content">
<main class="container">
<div class="row">
<div class="col-xl-4 order-last">
<!-- Right navigation is placed here -->
</div>
<div class="col-xl-8 order-first" id="main-content">
<!-- Page content is placed here -->
</div>
</div>
</main>
<div class="footer-container">
<!-- Footer content is placed here -->
</div>
</div>
<!-- Javascript is placed here -->
</body>
</html>
Everything with the page-content id is hidden when context/hamburger menu is displayed. The script to execute this change is placed at the bottom of the page.
<html>
The class nav-fixed can be added to the html tag to fix the top navigation to the top of the page: <html class="nav-fixed">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><!-- Page title goes here --></title>
<link rel="stylesheet" href="path.to/compiled-sass.css">
<!-- Additional linked script files -->
<!-- Additional meta tags and tracking code -->
Or
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><!-- Page title goes here --></title>
<!-- link to design system css -->
<link href="https://rmitlibrary.github.io/design-system/sass/main.min.css" rel="stylesheet">
<!-- link to your own custom styles -->
<link href="path.to/custom-styles.css" rel="stylesheet">
<!-- Additional linked script files -->
<!-- Additional meta tags and tracking code -->
The code above shows the minimum required in the <html> section.
here are two approaches to including design system styles. The simplest method is to first include the compiled css in the <html> section of your page. Then, add your own custom css directly after and overwrite and extend the styles required.
An alternative, which provides more flexibility, is to copy and compile the design system's scss files, resulting in a single css file. You'll need a sass compiler to carry out this method. This allows your styles to access mixins and variables from both the design system and bootstrap itself.
Top navigation
<header>
<a href="#main-content" class="visually-hidden-focusable">Skip to main content</a>
<div class="top-navigation">
<div class="container">
<div class="row">
<div class="col-auto left-nav">
<div class="rmit-logo"><span class="visually-hidden">RMIT University logo</span></div>
<a href="" class="h2">Optional site title <span class="visually-hidden">homepage</span></a>
</div>
</div>
</div>
</div>
</header>
There are lots of options available in the design system when it comes to top navigation. All top navigation code should be placed in the <header> section The code above demonstrates the minimum required. The skip content link is only visible if it is focussed via keyboard controls. More information is available on the accessibility page
The main-content id allows for the skip content link in the top navigation above to function.
More information on top navigation
Page content
<div class="col-xl-4 order-last">
<!-- Right navigation is placed here -->
</div>
<div class="col-xl-8 order-first" id="main-content">
<!-- Page content is placed here -->
</div>
Visually, navigation is presented to the right of the content. Semantically, navigation is listed before content to clearly describe the hierarchy of the page to a blind user.
It’s recommended to restrict page content to 8 columns wide even if no right navigation is present. This keeps the line length readable and easily scannable. The main-content id allows for the skip content link outlined in the top navigation above to function.
Footer
Typically, the footer consists of three basic parts, ask the library, acknowledgment of country and the general RMIT footer. The basic structure is as follows:
<div class="footer-container">
<div class="container">
<div class="row">
<div class="col">
<!-- START ask the library -->
...
<!-- END ask the library -->
</div>
</div>
</div>
<div class="acknowledgement">
<div class="container">
<div class="row">
<div class="col">
<!-- START acknowledgement -->
...
<!-- END acknowledgement -->
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col">
<!-- START footer -->
...
<!-- END footer -->
</div>
</div>
</div>
</footer>
</div>
Script
<script>
//If true, menu covers content, if false menu pushes content down
var menuCover = true;
/* Grab both the menu button and the page content */
var menuButton = document.getElementById("menu-button");
var pageContent = document.getElementById("page-content");
var scrollPosition; // Store content scroll position
var menuDisplay = false; // Store display status of menu
/* Listen for click */
if(menuCover) menuButton.addEventListener("click", showHideMenu);
function showHideMenu() {
if(menuDisplay == false)
{
menuDisplay = true;
scrollPosition = window.scrollY;
pageContent.style.display = "none";
}
else
{
menuDisplay = false;
pageContent.style.display = "block";
/* Change scroll behaviour, jump to where the user had scrolled to on the page,
then revert to smooth scrolling again. */
document.documentElement.style.scrollBehavior = "auto";
window.scroll(0, scrollPosition);
document.documentElement.style.scrollBehavior = "smooth";
}
}
</script>
The script displayed above controls the showing and hiding of the context (or hamburger) menu. If this menu isn't being used by your top navigation, it can be omitted.
