A Starting Point for App Developers

The CMU Web Kilt documents what CMU's web template already does, with markup to copy, and adds components it doesn't have, such as status labels, copy buttons and file drop zones.

How It Works

The template supplies the page structure, navigation, type, buttons and links, and the kit builds on those styles. It's plain CSS and JavaScript files, with no build step or required JavaScript framework.

• In a CMS, the template's stylesheets and scripts come built in on CMU's official CMS, Cascade. Add the kit's stylesheet to your site's head code, then paste components into a page's HTML; in Cascade, that's a content section's Source code view.
• In an app, load the kit after CMU's template and use the components in your own pages. Your app handles its own data and actions.
• In a hosted service that lets you add your own styles, such as a form, survey or help-desk tool, the kit's stylesheets can bring its pages closer to CMU's look. How close depends on how much of the page the service lets you change.

Each site or app links one specific release, so its pages don't change until it moves to a newer one.

Install the Kit

Get Help With a Project

We're especially interested in apps that people across the university use: a shared service, a campus resource or a tool many offices rely on. We can help you choose layouts, navigation and forms, and use the kit's components in your app.

We'd also like to help hosted services and vendor apps feel more like part of CMU, even when styling options are limited. Tell us which parts of the page you can change, and we can help or give you some guidance on applying CMU's styles within those limits.

For a department, program or event website, talk to University Communications and Marketing through their Contact Us page.

Tell Us About Your Project

Contributing to the Carnegie Mellon Web Kilt

The GitHub repository has the code and documentation. To report a problem or suggest a component, open an issue or send a pull request.