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

All classes and ids in TowTruck must be prefixed with towtruck-.

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>

towtruck-cancel applies the styling, but does not do anything. To automatically dismiss whatever the button is contained in (menu, window, etc), add a towtruck-dismiss class as well.

Input

There are only two inputs: the share link, and names.

For these: <input type="text" class="towtruck-share-link"> and <input type="text" class="towtruck-name">

Peer information

When referring to a peer, use specific classes depending on the information:

<!-- This will give the avatar with a colored border: -->
<div class="towtruck-person"></div>
<!-- The avatar, plus an overlay with the status of the person (idle/etc): -->
<div class="towtruck-person towtruck-person-status"></div>
<!-- Just the name: -->
<span class="towtruck-person-name"></span>
<!-- The name, maybe abbreviated (e.g., "me"): -->
<span class="towtruck-person-name-abbrev"></span>
<!-- Color the background of the box (and the foreground for contrast): -->
<div class="towtruck-person-bgcolor"></div>
<!-- Color the background and add a darkened color border: -->
<div class="towtruck-person-swatch"></div>
<!-- The name of the status: -->
<span class="towtruck-person-status">(status goes here)</span>
<!-- The name of the role (Creator or Participant): -->
<span class="towtruck-person-role">(role goes here)</span>
<!-- The URL where the person is at: -->
<a class="towtruck-person-url" href="(replaced)">Not Replaced</a>
<!-- The URL, with a replaced title: -->
<a class="towtruck-person-url towtruck-person-url-title" href="(replaced)">(replaced)</a>

Additionally you can add the class name with -self to any element to style it for the current user (you must include the original classname too! Like <div class="towtruck-person towtruck-person-self"></div>)

Note that there are no conditionals, e.g., to hide the URL when the person is at the same URL as you.

Times

Times should be formatted like:

<span class="towtruck-timestamp">
  <span class="towtruck-time">HH:MM</span> <span class="towtruck-ampm">AM/PM</span>
</span>