Carnegie Mellon University
Carnegie Mellon Web Kit

Build on the CMU web template

Carnegie Mellon Web Kit › Page Layout

Page Layout

The CMU template's own header, navigation, breadcrumbs and footer, as on this page. Cascade builds them for you; an app writes them itself, using this markup.

Using a CMS?

Content Management Systems (CMSs), like Cascade, generate the page structure from your site's folders and settings; you write the content that goes inside it. Use this page to learn the names of the parts and, if you're building an app, what page markup to generate.

Try the Header

Change this site's own header to see the options, then open the menu to see what moves there. Your choices stay as you browse the rest of these pages, until you reset them or close the tab.

Roof
Logo
Search
Sign In
Acting as Another User
  • The roof, the template's name for the strip across the top with the wordmark: red invert for red, darkgrey invert for dark gray (as on Human Resources' pages) or nothing for white. Cascade sites set it in the setup block.
  • A logo sits right of the site's name, as on the Core4 Student Dashboard. On phones the template moves it below the name. See Site Name.
  • Search sits left of the menu button; see Search.
  • Signed out, a Sign In link sits in the roof and at the top of the menu. Signed in, your name sits in the roof and opens the menu, which starts with your name and Sign Out. On phones only the menu has them. See Sign In and Sign Out.
  • Acting as another user frames the whole window; see Acting as Another User.

The Whole Page

Every part has a fixed place. The navigation goes in the footer: the template's script copies it into the header and the menu, and without the script it stays a plain list in the footer. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page - Site Name - Carnegie Mellon University</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,300italic,300,700,700italic" rel="stylesheet">
  <link href="https://www.cmu.edu/common/standard-v6/css/main.6.7.min.css" media="screen" rel="stylesheet">
  <link href="https://www.cmu.edu/common/standard-v6/css/print.min.css" media="print" rel="stylesheet">
  <link href="https://www.cmu.edu/favicon.ico" rel="icon">
  <link href="https://www.cmu.edu/favicon-152.png" rel="apple-touch-icon-precomposed">
  <meta content="#9f0000" name="msapplication-TileColor">
  <meta content="https://www.cmu.edu/favicon-144.png" name="msapplication-TileImage">

  <!-- The kit, after the template, then your own stylesheet last -->
  <link href="https://cdn.jsdelivr.net/gh/cmu-web/cmu-web-kit@0.1.0/css/cmu-cms.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/gh/cmu-web/cmu-web-kit@0.1.0/css/cmu-app.css" rel="stylesheet">  <!-- apps only -->
  <link href="/css/your-site.css" rel="stylesheet">
</head>
<body class="no-js">
<div id="container">
  <header>
    <div class="roof red invert">
      <div>
        <a class="wordmark" href="https://www.cmu.edu/">Carnegie Mellon University</a>
        <button aria-label="toggle menu" aria-pressed="false" class="menu-btn" href="#nav"><b>&#8212;</b><b>&#8212;</b><b>&#8212;</b></button>
      </div>
    </div>
    <div id="sitename"> <!-- Site Name, below --> </div>
  </header>

  <main id="content">
    <div class="breadcrumbs"> <!-- Breadcrumbs, below --> </div>
    <div class="content">
      <div>
        <h1>Page Title</h1>
        <!-- the page -->
      </div>
    </div>
  </main>

  <footer class="grid column3 invert">
    <div>
      <p>Your Site or App<br>Carnegie Mellon University<br>5000 Forbes Avenue<br>Pittsburgh, PA 15213</p>
      <ul><li><a href="https://www.cmu.edu/legal/">Legal Info</a></li><li><a href="https://www.cmu.edu/">www.cmu.edu</a></li></ul>
      <ul><li>&copy; 2026 Carnegie Mellon University</li></ul>
    </div>
    <div></div>
    <div>
      <nav id="nav"> <!-- Navigation, below --> </nav>
    </div>
  </footer>
</div>

<!-- The template's scripts (see Scripts, below), then the kit's -->
<script src="https://www.cmu.edu/common/standard-v6/js/list.min.js"></script>
<script src="https://www.cmu.edu/common/standard-v6/js/jquery-1.10.1.min.js"></script>
<script src="https://www.cmu.edu/common/standard-v6/js/main.6.7.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/cmu-web/cmu-web-kit@0.1.0/js/cmu-app.js"></script>  <!-- for copy buttons and countdowns -->
</body>
</html>
  • Keep no-js on <body>. The template's script removes it, and the template styles the page differently until then.
  • The roof (div.roof) is the strip across the top with the wordmark. Add red invert for a red roof, as here, or darkgrey invert for dark gray; without either it's white.
  • The favicon is CMU's own, from www.cmu.edu, as on every CMS site: the four lines after the stylesheets.
  • The footer starts with the site or app name, the same as in the header, on the line above Carnegie Mellon University's address.
  • Add cmu-app to <body> in an app (see App Components).

Site Name

The site's name links to its home page. Under it, an optional <h2> names who runs it, such as a department, as a link to their site or as plain text. 

<div id="sitename">
  <span class="sitetitle"><a href="/">Seminars &amp; Workshops</a></span>
  <h2><a href="https://www.cmu.edu/teaching/">Eberly Center</a></h2>
</div>

For a logo, wrap the name and the <h2> in a <div> and put the logo, as a linked image, after it, as the Core4 Student Dashboard does with the Core Competencies Initiative's logo (try it on this page, with a placeholder from PlaceMellon). The template puts the logo on the right, up to 150px tall, and below the name on phones. Use only an official logo for your unit from University Communications & Marketing. Leave no space between the </div> and the <a>: the two share the width exactly, so a space pushes the logo onto its own line. On phones the template moves the logo below the name and subtitle, at up to half the screen's width, so keep the image no larger than you want it shown there. 

<div id="sitename">
  <div>
    <span class="sitetitle"><a href="/">Core4 Student Dashboard</a></span>
    <h2><a href="https://www.cmu.edu/corecompetencies/">Core Competencies Initiative</a></h2>
  </div><a href="/"><img src="/images/cci-wordmark.png" alt="Core Competencies Initiative Wordmark"></a>
</div>
The Core4 Student Dashboard's header: the CMU roof, then its name with Core Competencies Initiative under it and the initiative's round logo on the right.
The Core4 Student Dashboard's header, with its logo.

The template's search box goes in the roof, after the menu button. It searches cmu.edu, with a "Search this site only" box that appears when someone clicks in it; set that box's value to your Cascade site's ID. The template also puts a copy at the top of the menu, and on phones shows it as a row under the wordmark.

This site's header with search on: a dark red search box in the roof, left of the menu button.
Search in the roof, on these docs with search turned on.
<form action="https://search.cmu.edu" class="search search-form" method="get" name="customForm">
  <input name="form_id" type="hidden" value="basic-form">
  <input name="site" type="hidden" value="">
  <input name="ie" type="hidden" value="UTF-8">
  <label><span>Search</span> <input aria-label="Search" name="q" placeholder="Search"></label>
  <button title="Submit" type="submit">Search</button>
  <label class="searchSite"><span>Search this site only</span> <input checked name="site" type="checkbox" value="your-site-id"></label>
</form>
  • Cascade sites get it from the site's settings; you don't write it.
  • Apps usually leave it out. It searches cmu.edu, not your app, so it competes with the app's own search. Put the app's search on the page where its results appear, like the Syllabus Registry's Browse page.
  • Put the account link after the search form, whether it's Sign In or the signed-in person's name. The kit lines them up as search, the account link, then the menu button, so the name sits beside the menu it opens.

One list, nav#nav, in the footer's third column. The template's script turns it into two things:

  • Header tabs under the site name, from 768px up: the first ten top-level items, without their sub-lists. The one you're on is red and underlined.
  • The menu that slides out from the menu button, with every item and sub-list. Phones use only the menu.
A page of these docs with the header tabs under the site name, Components in red and the menu open on the right with the Components section expanded.
The header tabs, and the menu open with the current section expanded.

Nest pages the way the site is organized: the top level holds a few sections, and each section's pages go in a sub-list under it, as deep as the site needs. The tabs then stay short, and the menu shows the whole site with the current section open. The home page isn't in the list: the site name links to it. 

<nav id="nav">
  <ul>
    <li><a href="/queues">Queues</a></li>
    <li><a href="/my-courses">My Courses</a></li>
    <li>
      <a href="/help">Help</a>
      <ul>
        <li><a href="/help/students">For Students</a></li>
        <li>
          <a href="/help/staff">For Course Staff</a>
          <ul>
            <li class="active"><a href="/help/staff/open" aria-current="page">Open Office Hours</a></li>
            <li><a href="/help/staff/canvas">Link It From Canvas</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="secondary"><a class="external" href="https://www.cmu.edu/tli-office/">Teach, Learn, Innovate</a></li>
    <li class="secondary"><a href="/logout">Sign Out</a></li>
  </ul>
</nav>
Mark What it does
li.active The page you're on, red in the menu. Put it on the current page's own item, however deep; the template marks the items above it, so its section's tab turns red too and its sub-lists open. Add aria-current="page" to its link for screen readers.
A sub-list (ul in an li) A section's pages, shown only in the menu, folded under an arrow. Nest as deep as you need. The template opens the ones holding the active item.
A nested active item On a computer screen, when the current page is below the top level or has pages of its own, the menu starts open beside the page, so people can see where they are. Top-level pages with nothing under them start with it closed. Tablets and phones always start closed.
li.secondary Kept out of the tabs; in the menu, shown in lighter type. For links such as Contact Us or Sign Out.
a.external Adds the template's leave-site icon to a link to another site.

This site's own menu is an example: Components is a section, with its three pages under it. Keep labels short and in Title Case, and keep to about six top-level items so the tabs fit on one row. To show the signed-in person beside the menu button, see Sign In and Sign Out.

Breadcrumbs show the path from the site's home to the current page.

  • Place the trail first inside #content.
  • Link each preceding step. Leave the current page as plain text at the end.
  • Match the navigation labels. Use "Install" rather than "Install the Kit," and "Gallery" rather than "Sites and Apps Built With the Kit," so the trail matches the tabs and menu.
  • Omit breadcrumbs on the home page.
The breadcrumbs under the header tabs: Carnegie Mellon Web Kit, Components, CMU Standard, then People as plain text.
Breadcrumbs on a page three levels down.
<div class="breadcrumbs">
  <a href="/">Office Hours Queue</a>&nbsp;&rsaquo;&nbsp;<a href="/help">Help</a>&nbsp;&rsaquo;&nbsp;For Course Staff
</div>

Separate the steps with &nbsp;&rsaquo;&nbsp; ( › ), as Cascade does, so a step never starts a new line with the arrow.

Content and Sidebar

.content lays out its direct children as columns. Put the page in one <div> inside it, and for a sidebar, add a second div.sidebar beside it; on phones the sidebar drops below.

An Equipment Checkout page: the page's text on the left, and a sidebar on the right with a Reserve a Camera Kit button, a blue Quick Links box, a gold Holiday Hours note and a Questions note with a line beside it and a link to email the desk.
A page with a sidebar.
<div class="content">
  <div>
    <h1>Equipment Checkout</h1>
    <p class="cmu-lead">Cameras, lights, microphones and tripods for any CMU course, free for up to a&nbsp;week.</p>
    <p>Reserve a kit online, then pick it up at the checkout desk…</p>
    <p>Return kits to the desk by closing time on their due date…</p>
  </div><div class="sidebar">
    <div class="simple">
      <a class="btn wide" href="#">Reserve a Camera Kit</a>
    </div>
    <div class="list blue invert">
      <h1>Quick Links</h1>
      <ul>
        <li><a href="#">Browse Equipment</a></li>
        <li><a href="#">My Reservations</a></li>
        <li><a href="#">Loan Policies</a></li>
      </ul>
    </div>
    <div class="gold">
      <h2>Holiday Hours</h2>
      <p>The desk closes Dec. 19 and reopens Jan. 12.</p>
    </div>
    <div class="left-rule">
      <h2>Questions?</h2>
      <p>The checkout desk answers email within one business&nbsp;day.</p>
      <p><a class="cta" href="#">Email the Checkout Desk</a></p>
    </div>
  </div>
</div>
  • Leave no space between the page's </div> and <div class="sidebar">, as above. The two columns fill the width exactly, so even a line break between them pushes the sidebar below the page. It's the same trap as a logo in the header.
  • Without wide, the page takes about 60% of the width, leaving room for the sidebar. Add wide to give it the full width when there's no sidebar.
  • Several .content blocks can follow one another, for a page in bands.

See the Sidebar Boxes

Scripts

Just before </body>, from the template, in this order. Without them the page still works, with the navigation as a list in the footer. 

<script src="https://www.cmu.edu/common/standard-v6/js/list.min.js"></script>
<script src="https://www.cmu.edu/common/standard-v6/js/jquery-1.10.1.min.js"></script>
<script src="https://www.cmu.edu/common/standard-v6/js/main.6.7.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/cmu-web/cmu-web-kit@0.1.0/js/cmu-app.js"></script>  <!-- for copy buttons and countdowns -->

On a page with copy buttons or countdowns, the kit's cmu-app.js comes last, after the template's.

Besides the navigation, the template's script removes style="" from spans, and opens and closes the template's .collapsed headings.

Navigation, Tabs or Sidebar?

  • Pages of the site go in the navigation: Browse, My Courses, Help.
  • Views of one page go in tabs (cmu-tabs) at the top of the content, such as one tab for each semester of the same list of courses.
  • Sections of one long page go in an On This Page box at the top of the sidebar, as on Conventions. Leave it off pages short enough to see at a glance.
  • Where you are goes in the breadcrumbs, when a page sits below another.

Template Quirks to Know

  • Tables are display: block so they scroll on phones, which stops them stretching. Add cmu-full to stretch one to full width from 768px up.
  • The template's script removes style="" from spans. Use a div when you need an inline style, such as a bar's width.
  • .content lays out its direct children as columns, so put one wrapper <div> inside it.
  • A logo in the header must follow the site name's <div> with no space between them, or it drops below the name.
  • A sidebar must follow the page's <div> in .content the same way, </div><div class="sidebar">, or it drops below the page.
  • A formatter such as Prettier, run on your HTML or templates, can put a line break between those two pairs, and the logo or sidebar drops. Put <!-- prettier-ignore --> right before the site name's <div> and before the .content block, so it leaves them as written.
  • .btn and other classes that set display override a bare hidden attribute. The kit makes hidden always hide.
  • The template's script turns every in-page link (href="#id") into javascript:void(0) and scrolls with its own animation, so the address never shows the section and Back doesn't return. With cmu-app.js, the links stay real: the address shows the section, and Back works.