User:TECannon/UI Pattern and Style Guide

This article is a ROUGH DRAFT. The author is still working on this document, so please do not edit this without the author's permission. The content within this article may not yet be verified or valid. This information is subject to change.

This is an guide to the styles used by the WordPress Administration Panel.

Global Styles

@content - intro to global styles here.

Fonts

Primary Font (Sans Serif) - "Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif;

font-size:13px;
line-height:1.4em;

Secondary Font (Serif) - Georgia,"Times New Roman","Bitstream Charter",Times,serif Generally used for... See specific uses for styles

Menu Bar - Title
Administration Menus - Top Level
Administration SubPanel - Top Level Header
Data Tables - Pagination Labels
Administration SubPanel - 3rd level headers of a visual area

1st levels - h2 of the work area, header of a widget-holder, header of a post box, it can be assumed that the top level once inside any area is the 2nd level -- even if there is no top level as in the screen meta tabs.

Icons

Administration icons are only needed for top-level admin-menu items. Sub-level menus and thier pages, used their parent icon in the Work Area Header.

Administration Menu Icons

Box Size: 28px by 28px
Image Size: aprx. 18px square
Use monochrome for top-level admin menu items
Use color version for selected and hover states.

Work Area Header Icons

Box Size: 36px by 36px
Image Size: aprx. 30px square
Monochrome only

Work Area (SubPanels)

Hierarchy & Headings

@content -- intro content

Work Area Header

The h2 header is the title for the screen, so there should be only one h2 header.

Text: Primary Font, 24px (1.5em)
Line Height: 35px (1.4em)
Bold and Italic
Text Shadow: 1px down, no blur, white
Margin: 0
Padding: top-14px; bottom-3px; right-15px; left-0
Header Icon: 36px by 36px square with a 6 pixel margin inserted before the header text.

Secondary Headers [h3]

Used on single form (Settings) screens

Text: Primary Font, 15px (1.17em)
Line Height: 18px (1.4em)
Bold

UI Widget and Postbox Headers [also h3]

Text: Primary Font, 12px
Line Height: 12px (1em)
Bold
Text Shadow: 1px down, no blur, white
Margin: 0
Padding: top and bottom - 7px; left and right - 9px
Height (including padding): 26px
Border: solid, 1px, 6px radius

Text Color: #464646
Text Shadow: 1px down, no blur, white
Background: #DFDFDF gray-grad.png
Border Color: #DFDFDF

Page Organization

Single Form Page: (Ex Settings Pages)

Sectioned Form Page: (Ex Themes, Tools, Updates)

Data Table Page: (Ex Edit Posts)

Tabbed Pages: (Ex New Manage Themes)

Box Layout Page: (Ex Add Post, Dashboard)

Boxes

Basic Box

Tag List Boxes: File:ui-box-tag-list.png

Tabbed Boxes: File:ui-box-tabbed.png; File:ui-box-tabbed-add.png

Publish Box: File:ui-box-publish.png

Is sortable but can't remove it in screen options

Full Form Box

(ex QuickPress)

Parent/Child Box

Data Tables

Form Elements

Text: Primary Font, 12px
Line Height: 15px
Border: solid, 1px, 4px radius (on text input fields)
Padding: 3px
Margin: 1px

Text Color: #333333
Background: #FFFFFF
Border Color: #DFDFDF

Radio and Check-boxes

Vertically aligned middle
Individual item labels appear on the right

Select Elements (Dropdown Lists)

Text: 11px
Height: 22px (2em)
Padding: 2px

Text Inputs and Text Areas

Same styles as Text inputs, but text areas with multiple lines requires a line height.

Line height: 1.4em (apr 17px)

Buttons

Global Button Format

Text: Primary Font, 11px
Line Height: 13px
Border: solid, 1px, 11px radius
Padding: top/bottom - 3px; left/right - 8px
Width: based on text length
Height: aprx 23px

Button and Secondary Buttons (.button, .submit input, .button-secondary)

Text Color: #464646
Text Shadow: 1px down, no blur, white
Background: #F2F2F2 white-grad.png
Border Color: #BBBBBB
Hover - text color:#000000; border color:#666666
Active - text color:#000000; border color:#666666; background:#f2f2f2 white-grad.png
Disabled - text color: #AAAAAA; border color:#DDDDDD

Primary Button (.button-primary)

Text Color: #FFFFFF bold
Text Shadow: 1px up(-1px), no blur, black (30% transparency)
Background: #21759B button-grad.png
Border Color: #298cba
Hover - text color:#eaf2fa; border color: #13455b
Active - text color:#eaf2fa; border color: #13455b; background: #21759B button-grad-active.png
Disabled - text color:#9FD0D5; background: 298CBA

Codex