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.

linkBasic structure

The basic structure provides sidebar, content area, footer and header.

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

linkFluid 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.

linkResponsive breakpoints

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

linkContent 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.

Image depicting layout with content area and padding

linkGrid

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