Design Document Esthetics

From BOARD18 Project WIKI
Jump to: navigation, search
This page has been updated to comply with Release 2.5.x of BOARD18.
Design Document edit


Like any other application, BOARD18 needs a distinctive look.

Logo and Favicon

Logo.png
The logo displayed to the right will be present in the upper left hand corner of every BOARD18 page. It will be part of the standard header for each such page. In addition, a 32 pixel square icon with a reduced version of the same graphic will be used as the favicon file for this application.

Web Page Color Standards

Body.pngHeader.pngThe background of the header and main areas of all pages will be the color shown on the near left (#FFEEDD). The background of the left sidebar of all pages and any drop-down menus or forms will be the color shown on the far left (#DDFFDD).

Other areas may have modified background colors to enable them to stand out from their surroundings.

Tile Color Standards

The standard shade for each of the four tile colors is given in the following table:

Standard tile colors
COLOR Red Green Blue Hex RGB
Yellow 255 255 0 ffff00
Green 84 216 43 54d82b
Brown 170 114 42 aa722a
Grey 179 179 179 b3b3b3

Page Layout

Window.png
Each BOARD18 page will follow this overall layout. The page will be divided into 3 fixed divisions. The top of page division, the left of page division and the right of page division. These divisions, which are shown in the diagram to the right, are formatted via the style sheets described below.

“Top of Page” Division

This division forms the logo, heading, message and menu areas of the page. It consists of the top 90 pix of the page and it's width fills the width of the enclosing window.

“Left of Page” Division

This division forms the sidebar area of the page. It consists of the left 135 pix of the page and it's hight fills the hight of the enclosing window. The sidebar division scrolls within this division.

“Right of Page” Division

This division forms the main content area of the page. It consists of the remainder of the page and it's hight and width fills the remainder of the enclosing window. The content division scrolls within this division.

Style Sheets

BOARD18 will use cascading style sheets to control all formatting of its pages. There will be an application wide style sheet for all common formatting and another style sheet specific to each BOARD18 page. The application wide style sheet will be named board18com.css. The specific style sheets will have names based on the page with which they are associated (for example board18main.css).

The board18com.css style sheet

This style sheet lays out the overall structure of all BOARD18 pages. This consists of the top of page division, the left of page division and the right of page division. These divisions are described above. This style sheet also formats the header area of all BOARD18 pages. The top level block elements in this style sheet will all use fixed positioning.

All other BOARD18 style sheets

Every BOARD18 page will have a style sheet to format the body of the page. Some of the containing block elements in these style sheets may use absolute positioning.