App guidelines

Applications submitted to the Garden should adhere to the guidelines below. These provide end users with a consistent experience between the market, dashboard, and in-application usage. Applications will never be rejected from the open garden, but for your application to be successful, the adherence to these guidelines should be followed.

Application Meta Information

Required Information

All applications submitted shall provide the following:

• A human readable name
• A GUID. A globally unique id to determine if two applications are the same.
• A description. Plain text.
• Homepage URL
• Submitter Name. This can be a person, or organization.
• Submitter email. This can be a person, or organization.
• Images of the following size (png or jpg recommended) :
  • 700px X 345px banner image. This will be used on in the market details page for the application.
  • 210px x 150px image. This will be used for dashboard and market listing pages for the application.
  • 16px x 16px icon. Application Icon. Small format.
  • 20px x 20px icon. Application Icon. Medium format.
  • 32px x 32px icon. Application Icon. Large format.
  • 64px x 64px icon. Application Icon. Extra Large format.
  • 124px x 124px icon. Application Icon. Extra-large format.

Optional Information

The following information is optional:

• A list of screenshots. Format is 437px x 262px.
• A video link. (Youtube url)

Application Style

Style Sheets

Use Twitter Bootstrap, which is available as a Kanso package. It is popular, well tested, and will provided a consistent look across applications.

Fixed Topbar

You application should have a twitter bootstrap style fixed topbar for navigation. The far left of this will be an icon for the garden dashboard, which will return the user back to the garden dashboard. This will make a consistent way for a user to navigate from your application back to the dashboard.

Here is an example image of the navigation top bar, with the garden icon

Here is the sample html and css. note: this is a bit broken having absolute position as resizing the window causes overlay with the project name. Better CSS will be provided.

     <a id="garden-navigation" title="Garden Dashboard" href="/dashboard/_design/dashboard/_rewrite/">
        <img src="static/img/kanso_icon_20.png" />
    </a>

We will have to find a consistent way to resolve the dashboard url from within the app.

 #garden-navigation {
  z-index: 30000;
  position: absolute;
  top: 5px;
  left: 15px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}