Style Guide

Visual Styles

• all body copy has a font-size of 14px and a line-height of 20px.
• Font is Open Sans, with a default for Helvetica or sans-serif.
• Cancel controls should look like links, with an underline
• Links in content should not have an underline, except on hover. All such links should open in a new window.
• Flat UI - meaning no gradients or dropshadows (besides behind the windows and dock).

Buttons

• every button should have a default, hover and pressed/active state

Other

• all gfx need to be @2x for retina displays. Also, CSS needs to compensate for retina as well.
• Person who starts the session is the "Creator"
• Person who enters the session is the "Participant"

Text/Copy

• Titles should start with an initial capital, but should not be title case (e.g., "End session" and not "End Session")

Markup

There are four categories of windows:

"Normal" windows

These include a titlebar, close button, and content

Class: towtruck-window

Features:

• Title bar (required):

  <header>Title</header>

• Close button (added automatically)

• Optional below-title-bar extra title-bar-like-info:

  <section class="towtruck-subtitle">Some text</section>

• Content (required):

  <section>Normal content</section>

• A button area (optional, should be last):

  <section class="towtruck-buttons"></section>

• Can be "bound" to another widget, typically something in the dock, using an attribute:

  <div class="towtruck-window" data-bind-to="#widget">

In total:

<div class="towtruck-window" id="towtruck-some-window" data-bind-to="#chat">
  <header>Some window</header>
  <section class="towtruck-subtitle">another note</section>
  <section>Normal content</section>
  <section class="towtruck-buttons">
    <button class="towtruck-follow">Follow</button>
  </section>
</div>

"Modal" windows

These look like normal windows but disable all other interaction with the page.

Class: towtruck-modal

Otherwise it is the same as a normal window, except it cannot be bound (i.e., no data-bind-to).

"Notification" windows, which are transient, and lack a titlebar

Class: towtruck-notification

• You should not have a title
• A close button will be automatically added

In total:

<div class="towtruck-notification">
  <p>A notification about something.</p>
  <p>Perhaps a control: <button>...</button></p>
</div>

Frequently notifications will be based on templates.

"Menu" windows

These have no decorations (these don't feel like windows, but everything is a window!)

Class: towtruck-menu

<div class="towtruck-menu">
  <div class="towtruck-menu-item">An item</div>
  <hr> <!-- a separator -->
</div>

Menus don't need to have only .towtruck-menu-item elements in them, they can also be used for free-form items. Menus close if the user clicks elsewhere on the page.

The Dock

The dock has a relatively simple structure:

<div id="#towtruck-dock">
  <div id="#towtruck-dock-anchor">
    <!-- little draggable dots at the top -->
  </div>
  <button class="towtruck-dock-button" id="towtruck-does-something">...</button>
  ...
</div>

Controls

Individual controls:

Buttons

Primary; what you would normally want to do: (blue)

<button class="towtruck-primary">Normal action</button>

Secondary; an action (i.e., does something), but not the normal action: (grey)

<button class="towtruck-default">Secondary action</button>

Destructive; an action like end session, kick user, that is destructive in some sense: (red)

<button class="towtruck-destructive">Something that ends something</button>

Cancel; perform no action: (looks like a link)

<button class="towtruck-cancel">Cancel</button>