Layout

The page layout is the foundation of an application. It provides the overall structure and helps helps organise content consistently by using uniform elements.

Visit the layout demo page.

Basic structure

The basic structure is comprised of sidebar, header, content area and footer:

The sidebar contains the elements used for main navigation.
Elements such as branding, submenu, account settings and search are positioned in header.
The content area represents the canvas of the application, and it holds content of each page.
The footer is an additional navigation element and can contain links, company or copyright information, etc.

Fluid page layout

The fluid page layout is the default layout in SUSE. It provides the right screen real estate for content by allowing it to stretch and contract relative to the screen size.

Responsive breakpoints

greater than 1336px
770px - 1335px
770px - 1335px

Content area

The main container has a maximum width of 1116px. When the screen size is greater than the container's maximum width, the margin: auto property is used to center it. Margins and paddings are used to create space around elements. Margins are used for space between elements while paddings are used for space within an element. The default padding is a fixed value and it is 32px.

Grid

EOS uses Bootstrap's grid system. It uses a series of rows, containers and columns to arrange and align content. It’s fully responsive.