Quillet
Menu
Menu

The shell

6 min read

Every screen of a project in the Quillet dashboard sits in one frame, the shell: a header across the top, section tabs under it, a panel on the left where a section needs one, and a page bar above the work.

Why every screen keeps the same frame

A content manager moves between a handful of places all day: a document, the list of unfinished work, the media library, then back to the document. If each of those screens had a layout of its own, every move would start with finding your bearings again. The shell keeps two kinds of thing in the same place on every screen: what tells you where you are, and what you reach for most. The project and the environment are always named at the top, so you never edit the wrong copy of the site by accident. Save and Publish are always in the same corner.

A content manager's first day introduces the shell in passing. This page is the full map, including what each part does on a narrow window and on a phone.

What each part of the frame holds

The header

From left to right, the header holds:

  • The Quillet mark, a link to All projects: the list of every project you belong to.
  • The project switcher, which shows your project's name. Its menu lists your other projects, then All projects and New project. Choosing another project opens its Content page in its default environment.
  • The environment, a select with the project's environments, such as Prod and Staging. Switching keeps you on the same page: if a document is open, the same document opens in the other environment.
  • Search content, which opens a search box that finds a document by its title or its key and also lists the five sections. ⌘K on a Mac and Ctrl K elsewhere open it from anywhere in the project, except while you are typing in a text field such as the editor. There the shortcut belongs to the field, so press the button instead.
  • The theme, a menu with Light, Dark and System. System follows your computer's setting and is the default.
  • The account menu, the round button with your initials. It shows your name and email, then Account and Sign out. Your account covers the Account page.

The section tabs

The tabs are Content, Media, Components, Promote and Settings. Content managers spend most of the day in the first two. Components is where engineers build the shapes that structured documents follow, and Promote moves changes between environments; see Environments and promotion for why it exists. Settings holds the project's own settings, and what you can change there depends on your role.

The panel

Three sections have a panel on the left:

  • Content: the project's documents as a tree, in four groups: Pages, Documents, Component instances and Schemas. A folder opens into its documents, and Up one level goes back. A group with nothing in the current folder says None here.
  • Media: the folders of the media library, starting at All files, with New folder under them.
  • Settings: the settings pages.

Media has no environment of its own. Files are shared by every environment, so the media library looks the same whichever environment the header shows.

The page bar

The page bar sits above an open document. It holds where the document is (guides / House style), its status, the locale select, History, Preview, Save and Publish. When you are looking at an old version, only the locale and History remain, because an old version cannot be saved or published as it is.

On a narrow window and on a phone

  • Narrower than 1280 pixels, History and Preview in the page bar show only their icons.
  • Narrower than 1024 pixels, the panel folds away, and a button at the start of the section tabs opens it as a sheet: Show Content, Show Media or Show Settings.
  • Narrower than 640 pixels, the environment select and Search content move into the account menu, at the top, above your name.

The address

The browser's address records what you are looking at: the project, the document, the environment (when it is not the default one) and the locale. Copy the address to send a colleague exactly what you see. The browser tab is named after the page too, such as "House style · Handbook · Quillet", so a row of open tabs stays readable.

How to

Switch to another project

  1. Press the project's name in the header.
  2. Choose another project from the list, or All projects to see them all.

Work in another environment

  1. Open the Environment select in the header. On a phone, open the account menu instead.
  2. Choose the environment, such as Staging.
  3. Check the select before you save or publish. Until you switch back, everything you do happens in that environment.

Open a document by name

  1. Press Search content in the header, or press ⌘K or Ctrl K when the cursor is not in a text field.
  2. Type part of the document's title or key.
  3. Press Enter on the document under Documents, or on a section under Sections.

Use the tree from the keyboard

  1. Press Tab until the tree has focus. On any page, the first Tab reaches Skip to content, which jumps past the header and the tabs straight to the page.
  2. Move with the arrow keys, and press Enter to open a document or a folder.
  3. On a document, press F2 to rename it, Delete to delete it, or Shift+F10 to open its menu. Writing a document explains what renaming and deleting do.

Choose light or dark

  1. Press the theme button beside the account menu.
  2. Choose Light, Dark or System.

Limits

  • Search content matches titles and keys, not the words inside a document. Searching the text of drafts from the dashboard is not built, and the delivery search that a site can offer its readers covers published content only.
  • The shortcut ⌘K or Ctrl K does nothing while the cursor is in a text field. Press Search content instead.
  • The dashboard's own labels and messages are in English only. Your content can be in any locale the project has.
  • Only Content, Media and Settings have the panel. The other sections use the full width.
  • Switching project always lands on that project's Content page in its default environment. An environment you chose in one project never carries over to another, because each project has environments of its own.
  • Your role in the project decides which tabs and settings pages work for you. A viewer can read everything and change nothing, an editor writes and publishes, and only an owner manages keys, members and the project itself.

Last updated