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. A CMS 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 It

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
Account Status
Extras

The Parts

  • Roof: CMU's wordmark strip, in red invert, darkgrey invert or white, with no color class. Cascade sets it in the setup block.
  • Logo: beside the site's name; below it on phones. See Site Name.
  • Search: left of the menu button. See Search.
  • Account: Sign In or the user's name in the roof; in the menu only on phones. See Account Status.
  • Acting as another user: frames the window. See Acting as Another User.

Site Name Template

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. It can also be a slogan, as on these docs.

The Seminars & Workshops header: the CMU roof, then the name with Eberly Center under it.
The Seminars & Workshops header, from the Eberly Center.
<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 (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.

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.
<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 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 site's ID (in Cascade, its Cascade site 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>
  • A CMS site gets it from the site's settings, as in Cascade; 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.
  • 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 current page's tab 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 to about six top-level items so the tabs fit on one row. To show the signed-in person beside the menu button, see Account Status.

Style

Keep menu labels short, in Title Case.

Navigation, Tabs or Sidebar?

Pages of the site go in the navigation, which the template shows as tabs in the header: Browse, My Courses, Help.

The header tabs on these docs, with Components in red as the current section.

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.

Tabs for Spring 2027, Fall 2026 and Summer 2026, with Spring 2027 underlined in red, and a 2 More link.

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.

The top of these docs' Conventions page: the content on the left, and on the right an On This Page box listing its sections, starting with AP Style, CMU Names and Terms and Headings.

The current page goes in the breadcrumbs, when a page sits below another.

Tabs App

Links between views of the same page, such as semesters. Mark the current one with aria-current="page". Use a div with role="navigation", not a nav: the template takes the borders off every link in a nav, including the underline that marks the current tab. To fold a long row, put the rest in a details.cmu-more.cmu-tabs-more at the end, like a folded list: a "2 More" link stays at the end of the first row, and when it opens, the rest wrap onto the next line and the link says Show Fewer. Keep the current tab out of the folded part, so it always shows.

cmu-tabs, cmu-tabs-more

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 Template

.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

Home Page for a Service Description

A service description is a site that explains an app or service and sends people to it, built in Cascade, another CMS or plain HTML. Nothing about its home page is required, but if you're not sure where to start, this order works well for most services. Use the sections your service needs. Skip path cards if everyone follows the same route, and explain how it works only if people need that context. Let recurring questions guide what you add.

  1. 1. Hero

    A tagline, a sentence about the service, a button into it and a screenshot.

    See Hero

  2. 2. Path Cards

    One for each kind of person who uses it (students, instructors, administrators), each leading to a page of its own.

    See Path Cards

  3. 3. How It Works

    Three or four short steps, with a callout under them for the one thing people most need to know.

    See How It Works

  4. 4. FAQ Teaser

    A few common questions, with a link to the full FAQ.

    See FAQ Teaser

A service description's home page, top to bottom: a hero with a sign-in button and a screenshot, three path cards, three numbered steps over a callout, and four common questions.
Select the screenshot to enlarge it.

Panels for Framed Pages App

For pages inside another tool (body.cmu-framed): plain and left-aligned, since the host already frames them, with the actions at the bottom: the main one first, on the left, like every other row of buttons.

cmu-panel, cmu-panel-header, cmu-panel-body, cmu-panel-footer

Choose a Page

Pages in this Canvas course.

Pages
Cancel

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 components that need it -->

On a page with components that need a script, 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.

The Whole Page

All the parts above in one page, with every optional extra in place and marked: the app stylesheet and cmu-app, icons, search, Sign In, a sidebar and the kit's script. Leave out what you don't use. 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>Open Office Hours - Office Hours Queue - 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 -->
  <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 -->
  <!-- Optional: Bootstrap Icons, if the page uses icons -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css" rel="stylesheet">
  <!-- Your own stylesheet, last -->
  <link href="/css/your-site.css" rel="stylesheet">
</head>
<body class="no-js cmu-app">  <!-- cmu-app in apps only -->
<div id="container">
  <header>
    <div class="roof red invert">
      <div>
        <a class="wordmark" href="https://www.cmu.edu/">Carnegie Mellon University</a>
        <!-- Optional: search cmu.edu; set "your-site-id" to your Cascade site ID -->
        <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>
        <!-- Optional: Sign In, or the signed-in person's name, before the menu button -->
        <a class="cmu-account" href="/login">Sign In</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">
      <span class="sitetitle"><a href="/">Office Hours Queue</a></span>
      <h2>Your Office</h2>
    </div>
  </header>

  <main id="content">
    <div class="breadcrumbs">
      <a href="/">Office Hours Queue</a>&nbsp;&rsaquo;&nbsp;<a href="/help">Help</a>&nbsp;&rsaquo;&nbsp;<a href="/help/staff">For Course Staff</a>&nbsp;&rsaquo;&nbsp;Open Office Hours
    </div>
    <!-- Optional: a sidebar; it must touch the page's </div>, or it drops below the page -->
    <div class="content">
      <div>
        <h1>Open Office Hours</h1>
        <p>The page.</p>
      </div><div class="sidebar">
        <div class="simple">
          <a class="btn wide" href="/queues/new">Open a Queue</a>
        </div>
      </div>
    </div>
  </main>

  <footer class="grid column3 invert">
    <div>
      <p>Office Hours Queue<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">
        <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>
        </ul>
      </nav>
    </div>
  </footer>
</div>

<!-- The template's scripts, in this order -->
<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>
<!-- The kit's script, last, for copy buttons, countdowns and screenshots that enlarge -->
<script src="https://cdn.jsdelivr.net/gh/cmu-web/cmu-web-kit@0.1.0/js/cmu-app.js"></script>
</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).

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.