Views & Layout

Layout describes how Patterns, like the Main Menu, Headers, Footers and Content are arranged on the view. Basic Bootstrap layouting is described under Components.

View With Vertical Menu

This is the most common view. It required changes to the bootstrap RWD scaffolding. The application menu is wrapped in a fixed position sidebar with a fixed width.

Reasons Against a Scrollable Sidebar:

  • Hard constraint on amount of L1, L2 elements.
    It is not advisable to populate an application suite menu with an ever-increasing amount of applications, nor application functions.
    Don't wrap layout around bad structure. This will result in reduced UX quality.
  • Sidebar with its own scrollbar is a bad solution.
  • Static sidebar that scrolls with the page has a gradient of accessibility for it's population of elements. This is not a solution, it's a problem.

The basic layout is constructed directly within the body node. It contains two sections, .sidebar and .content. .sidebar is a wrapper for a responsive navbar with completely custom css. .content wraps a responsive applogo for small screens, a content wrapper .content-warp and the footer. The CSS guarantees full RWD scaffolding, as well as a properly positioned footer. (The footer is glued to the bottom of the viewport when .content-wrap's height is smaller than the viewport. This does not use any JS.)

Within the content wrapper, each instance of this view requires a page heading. Exceptions to this rule are listed below:

View Without Vertical Menu

This layout is a branch of the view with vertical menu, and the only discerning factor is the absence of the section.sidebar. this view does not have it's own optimized RWD breakpoints, because that would reduce the reusability of patterns between views with and without sidebar to near zero. It's a tradeoff geared towards compatibility, at the cost of whitespace.

Popup View

Popups don't have an application menu, or a footer. they consist of a full-width container, and a header.

Modal View

Modals don't have an application menu, or a footer. they consist of a full-width container, and a header.

eMail HTML View

...