HTML Structure

Canvas follows a simple, predictable HTML structure that is easy to understand and build on. Every page wraps its content in a single #wrapper element and uses Bootstrap 5 .container (or .container-fluid) rows inside each section. The cleanest starting point is blank-page.html, which contains the bare skeleton with nothing to remove.

The page skeleton

A typical Canvas page looks like this:

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- Core Style -->
	<link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="css/font-icons.css">

	<!-- Your Custom CSS -->
	<link rel="stylesheet" href="css/custom.css">

	<title>Page Title | Canvas</title>
</head>

<body class="stretched">

	<!-- Document Wrapper -->
	<div id="wrapper">

		<!-- Header -->
		<header id="header">
			<div id="header-wrap">
				<div class="container">
					<div class="header-row">
						<!-- Logo, Menu, etc. -->
					</div>
				</div>
			</div>
		</header>

		<!-- Content -->
		<section id="content">
			<div class="content-wrap">
				<div class="container">
					<!-- Your page content -->
				</div>
			</div>
		</section>

		<!-- Footer -->
		<footer id="footer">
			<div id="copyrights">
				<div class="container">
					<!-- Copyright content -->
				</div>
			</div>
		</footer>

	</div><!-- #wrapper end -->

	<!-- Go To Top -->
	<div id="gotoTop" class="uil uil-angle-up"></div>

	<!-- JavaScript: keep this order -->
	<script src="js/plugins.min.js"></script>
	<script src="js/functions.bundle.js"></script>

</body>
</html>

Important rules

Follow these rules to avoid unexpected layout or formatting issues:

Always keep all of your content inside the #wrapper <div>.
Never nest .container <div>s. Close the previous .container before opening a new one. A nested container will break the grid alignment.
Load style.css first, then css/font-icons.css, then your own css/custom.css last so your overrides win. Do not edit style.css directly; put custom styles in css/custom.css (or recompile from SASS, see SCSS & Gulp.js).
Keep the two script tags at the end of <body> in this order: js/plugins.min.js first, then js/functions.bundle.js. Canvas initializes after both have loaded.
Validate your HTML on validator.w3.org: fix any unclosed tags and duplicate IDs. You can safely ignore warnings about Google Fonts and the type attribute, they do not affect Canvas.

Usage

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>

	<!-- Stylesheets & Title
	============================================= -->
	...

</head>
<body>

	<!-- The Main Wrapper
	============================================= -->
	<div id="wrapper">

		<!-- Header
		============================================= -->
		<header id="header">

			...

		</header>

		<!-- Site Content
		============================================= -->
		<section id="content">
			<div class="content-wrap">
				<div class="container">

					...

				</div>
			</div>
		</section>

		<!-- Footer
		============================================= -->
		<footer id="footer" class="dark">
			<div class="container">

				...

			</div>

			<!-- Copyrights
			============================================= -->
			<div id="copyrights">
				<div class="container">

					...

				</div>
			</div>

		</footer>

	</div>

	<!-- Scripts
	============================================= -->

</body>
</html>

Code Snippets

Layout Settings

Canvas' overall page layout is controlled by classes on <body> and the wrapper.

<body class="stretched">
    <div id="wrapper" class="clearfix">
        <!-- header, content, footer -->
    </div>
</body>

Common layout switches:

stretched on <body>: full-width layout (remove it for a boxed layout).
#wrapper: the main page wrapper Canvas measures for sticky/parallax logic.
Section widths come from .container (centered) or .container-fluid (full width) inside your .section blocks.

Header layout is set with classes on #header, for example full-header (full-width header row), transparent-header, sticky-header, and floating-header. Combine these to shape the page chrome.

Editing Canvas Markup

Canvas is hand-editable HTML, so you build pages by copying the block and shortcode markup from the demo files and pasting it into your own page. There is no proprietary page builder to learn; any code editor works.

Recommended workflow:

Start from blank-page.html, which includes the full head, CSS/JS includes, and an empty content area.
Open the relevant demo (for example a block-content-*.html or shortcode page), copy the block you want, and paste it inside your <div id="content">.

<div id="content">
    <div class="content-wrap">
        <div class="container">
            <!-- paste block / shortcode markup here -->
        </div>
    </div>
</div>

Notes:

Keep the class names exactly as they appear in the demo. Canvas JS modules and the compiled style.css key off those classes, so renaming or dropping wrapper classes will break styling or behaviour.
Blocks are the large prebuilt sections (files prefixed block-); shortcodes are the smaller UI pieces (buttons, tabs, accordions, alerts). Mix and match freely.
Preview by opening the page in a browser. For form/subscribe/twitter features, serve through PHP (see the PHP snippet).
To restyle, edit the SASS sources and recompile style.css; do not hand-edit the minified CSS.

Was this page helpful?