Layout

Layouts behave the same way as themes but have a different purpose. Themes define the global theming of elements in your website, whereas layouts are responsible for laying out what shows up automatically and where it should go. This page forcibly uses the topnav layout, whereas the rest of this website uses the sidebar layout.

sidebar

The sidebar layout (used on the rest of the site) places the navigation on the left side of the page. The navigation bar displays the website’s title at the top, with the main navigation links listed below it. Section are numbered and divider text is visible. The main page content appears to the right of the sidebar.

Sidebar

topnav

The topnav layout (used on this page) places the navigation bar at the top of the page. The bar shows the website’s title on the left and the main navigation links on the right. Hovering over the main buttons reveals subsections. Divider text is not used, and the page content appears below the navigation bar.

Topnav

summary.mq used for these examples

summary.mq
[Home](index.mq)

User Guide # only in sidebar

[Quick Start ➽](quickstart.mq)
[Create Website](create.mq)

Reference # only in sidebar

[Docs](docs.mq)

Shared shell: index.html and index.js

The layout system is not only the sidebar.css and topnav.css files. Marque also uses a shared shell in layouts/index.html, plus a small runtime in layouts/index.js.

layouts/index.html

This is the HTML frame around every page. It defines the elements that always exist:

  • the site navigation (.mq-nav)
  • the main content area (.mq-main)
  • the footer (.mq-footer)

It also injects the build-time values that Marque generates for each page:

  • {{ layout_css }}: the active layout stylesheet
  • {{ theme_css }}: the active theme stylesheet
  • {{ nav }}: the rendered navigation links
  • {{ content }}: the page body rendered from .mq
  • {{ page_nav }}: previous / next page links
  • {{ document_title }}, {{ site_title }}, {{ description }}

layouts/index.js

This file is intentionally small. It handles the shared interactive behavior used by layouts:

  • mobile nav toggle open / close
  • submenu positioning near the viewport edge
  • closing nav menus on click, Escape, or resize
  • code block copy button behavior

Most layout work still happens in CSS. index.js only supports the interactive pieces.

The important structure

html
<nav class="mq-nav">
  <a class="mq-nav-brand" href="/">{{ site_title }}</a>
  <button class="mq-nav-toggle" ...>☰</button>
  <div class="mq-nav-links">{{ nav }}</div>
</nav>

<main class="mq-main"{{ page_main_style }}>
  {{ content }}
  {{ page_nav }}
</main>

This structure is the contract the layout CSS relies on. topnav.css and sidebar.css style the same shell differently.

When to edit it

Edit layouts/index.html when you want to change what appears on every page, for example:

  • adding a persistent banner or footer section
  • changing where the brand or page navigation renders
  • inserting extra wrappers that every layout should share

Edit sidebar.css or topnav.css when the HTML structure is already correct and you only want to change placement, spacing, or responsive behavior.

For developers

In the Marque repository, layouts live in template/layouts/ and are copied into each new project at marque new <name>. That folder now owns the shared HTML shell (index.html), the shared runtime (index.js), and the layout-specific CSS files like sidebar.css and topnav.css. When creating new layouts, make sure your CSS matches the classes used in the shared layout shell.

layout
template/
├── layouts/
│   ├── index.html
│   ├── index.js
│   ├── sidebar.css
│   └── topnav.css
└── themes/
	└── *.css