Visible Layout: 75 em (1200 px) wide.

Layout & Grid

Colors

Typography

Navigation

Forms

Tables

Dialog Boxes

Information Messages

Panels

Dashboard

Icons

Search

Input Methods

Buttons

Drawer

Drag & Drop

Accordion

Layout & Grid

General Layout Guidelines:

• Wellspring's grid layout will use Flexbox

•  Layout width should take 100% of screen width  up to 75em (1200 px) wide. Larger than that size the layout becomes centered on the screen.

• Screen layout should be responsive to accommodate users who may be working on a vertically oriented tablet device.

• Layout and grid dimensions should be set up in em.

• base-font-size of 1em = 16px

Overall Pattern

Product Branding

14.375 em (230 px) wide

Overall Gutters & Padding:

Cell Padding: 0em

Cell Gutters: .3125 em (5px - this will make 10 px space between items such as panels)

Grid Padding: .625em (10px - this will create a 20 px margin around the entire layout)

Settings & Logout

15 em (240 px) wide

right align content

Navigation

30 em (480 px) wide, 2.25em (36 px) high

Flexible space

15 em (240 px) wide

Global Search

30 em (480 px) wide, 2.25em (36 px) high

Title: 75 em (1200 px) wide, 1.5em  high

Message:

75 em (1200 px) wide

Message box is 60 em wide with 7.5 em padding on either side.


Drawer

15 em (240 px) wide

Details Panel:

30 em (480 px) wide

Flexible height


Elements Panels:

30 em (480 px) wide

Flexible height

"Details" Page

Visible Layout: 75 em (1200 px) wide.

Settings & Logout

15 em (240 px) wide

right align content

Navigation

30 em (480 px) wide, 2.25em (36 px) high

Flexible space

15 em (240 px) wide

Global Search

30 em (480 px, 40% ) wide, 2.25em (36 px) high

Title: 75 em (1200 px, 100%) wide, 1.5em  high

Message:

75 em (1200 px) wide

Message box is 60 em wide with 7.5 em padding on either side.


Details Panel:

44.375 em (710 px) wide

Flexible height

Elements Panels:

30 em (480 px, 40% ) wide

Flexible height


Drawer Handle >>

.625em (10px) wide


With Message (Drawer Collapsed)

Visible Layout: 75 em (1200 px) wide.

Branding

60 em (960 px) wide

Settings & Logout

15 em (240 px) wide

right align content

Navigation

30 em (480 px) wide, 2.25em (36 px) high

Flexible space

15 em (240 px) wide

Global Search

30 em (480 px) wide, 2.25em (36 px) high

Title: 75 em (1200 px) wide, 1.5em  high

Details Panel:

44.375 em (710 px) wide

Flexible height


Elements Panels:

30 em (480 px) wide

Flexible height



Drawer Handle >>

.625em (10px) wide


Without Message (Drawer Collapsed)

Visible Layout: 75 em (1200 px) wide.

Settings & Logout

15 em (240 px) wide

right align content

Navigation

30 em (480 px) wide, 2.25em (36 px) high

Flexible space

15 em (240 px) wide

Global Search

30 em (480 px) wide, 2.25em (36 px) high

Title: 75 em (1200 px) wide, 1.5em  high

Drawer

15 em (240 px) wide

Details Panel:

30 em (480 px) wide

Flexible Height


Elements Panels:

30 em (480 px ) wide

Flexible height

Without Message (Drawer Expanded)

Visible Layout: 75 em (1200 px) wide.

Settings & Logout

15 em (240 px) wide

right align content

Navigation

30 em (480 px) wide, 2.25em (36 px) high

Flexible space

15 em (240 px) wide

Global Search

30 em (480 px) wide, 2.25em (36 px) high

Title: 75 em (1200 px) wide, 1.5em  high

Expanded Panel:

74.375 em (1190 px) wide

Flexible height




Drawer Handle >>

.625em (10px) wide


Panel, Viewed Full-Screen, Drawer Collapsed

Visible Layout: 75 em (1200 px) wide.

Settings & Logout

15 em (240 px) wide

right align content

Navigation

30 em (480 px) wide, 2.25em (36 px) high

Flexible space

15 em (240 px) wide

Global Search

30 em (480 px) wide, 2.25em (36 px) high

Title: 75 em (1200 px) wide, 1.5em  high

Drawer

15 em (240 px) wide

Expanded Panel:

60 em (960 px ) wide

Flexible height


Panel, Viewed Full-Screen, Drawer Expanded

Visible Layout: 75 em (1200 px) wide.

"Lights Out" fill

100% width, 100% height

Full Screen Dialog Boxes

Small Dialog box


Horizontal Indent: 18.75 em (300 px) left and right

Vertical Indent: 8.125 em (130px)

Width: 37.5 em (600px)

Height: Content Dependant


Internal Padding: 20px, all sides


Use When: Presenting a pillar entities such as a Project, IP, Technologies (Inventions), Agreements

Components:

• Drawer of entity components that slides out from the right side of the screen. Contains elements that edit the content of the entity. Elements dragged into the panels area become new panels. Drawer may be opened or closed, impacting the view of the panels (layout below).

• Optional message containing a warning or information.

• "Details" Panel always starts out on the top, left. It may be dragged to other locations by the user. Other panels may be dragged below the Details panel

• Element Panels. These are repositioned using drag and drop and may be either minimized or maximized to take the entire panels area. (layout below)

With Message, drawer open

Information Entry Page

Use When: Any page where the user is making a single set of choices and they need not edit the content of the page by adding elements. E.g. setting permissions.

Components:

• Page does NOT require a drawer because there is no need to add elements.

• Optional message containing a warning or information.

Visible Layout: 75 em (1200 px) wide.

Settings & Logout

15 em (240 px) wide

right align content

Navigation

30 em (480 px) wide, 2.25em (36 px) high

Flexible space

15 em (240 px) wide

Global Search

30 em (480 px) wide, 2.25em (36 px) high

Title: 75 em (1200 px) wide, 1.5em  high

Content Area:

75 em (1200 px ) wide

Flexible height


Information Entry, No Message

Visible Layout: 75 em (1200 px) wide.

Settings & Logout

15 em (240 px) wide

right align content

Navigation

30 em (480 px) wide, 2.25em (36 px) high

Flexible space

15 em (240 px) wide

Global Search

30 em (480 px) wide, 2.25em (36 px) high

Title: 75 em (1200 px) wide, 1.5em  high

Content Area:

75 em (1200 px ) wide

Flexible height


Information Entry, With Message

Message:

75 em (1200 px) wide

Message box is 60 em wide with 7.5 em padding on either side.


Use When: A specific choice or set of choices must be made before the user can proceed any further in their course of action. E.g. when the user has clicked on an item from the main navigation, or when adding a new item into any panel on a "Detail" page.


Components:

• A single dialog box window, centered on screen.

• "Lights out" effect covering the remainder of the screen so that the user's attention is focused. See "Dialog Boxes" page also.

Small Dialog Box

Visible Layout: 75 em (1200 px) wide.

"Lights Out" fill

100% width, 100% height

Large Dialog box


Horizontal Indent: 9.375 em (150 px) left and right

Vertical Indent: vertically centered within browser

Width: 56.25 em (900 px)

Height: Content dependant


Internal Content Padding: 20px, all sides


Large Dialog Box

Welcome Message

45.625 em (730 px) wide

Product Branding

14.375 em (230 px) wide

Welcome Message

45.625 em (730 px) wide

Product Branding

14.375 em (230 px) wide

Welcome Message

45.625 em (730 px) wide

Product Branding

14.375 em (230 px) wide

Welcome Message

45.625 em (730 px) wide

Product Branding

14.375 em (230 px) wide

Welcome Message

45.625 em (730 px) wide

Product Branding

14.375 em (230 px) wide

Welcome Message

45.625 em (730 px) wide

Product Branding

14.375 em (230 px) wide

Welcome Message

45.625 em (730 px) wide