The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.
Consequently, we have decided to not include support for IE in the Design Library website.
A grid system is used to harmonize negative space in a layout
In short, our grid system is a structure containing rows and columns to layout and align content such as elements, text, imagery, graphics, and data within our channels, in a structured and consistent way. Our grid also provides guidelines to maintain a responsive, uniform visual presence within our channels.
Columns, margins, and gutters depend on the actual width of a browser's viewport, to adapt content to any possible screen size with set UI breakpoints. The grid is based on Bootstrap and modified to align with the SEB experience.
The grid is based on a fluid 12-column grid. If there is a sidebar, it is fixed and excluded from the 12 columns in the grid. SEB works with a fluid grid which is defined by the specified number of columns that are proportional to the browser's viewport width or height, instead of fixed pixel dimensions. For example; when a browser window is resized, the elements within will adjust their widths and/or heights accordingly to their container.
As designers, we need to think of our components as dynamic and not static pixels. However, some objects, such as text fields and forms, have a maximum width to comply with accessibility. Communicate with your developer if you have components with a maximum width. At our smallest viewports, every pixel counts, but when we look at viewports that are 1920px and above it might be a good idea to not fill the entire viewport.
There might be a grid inside a grid, this happens when a component has a grid of its own and is placed in the big grid. A widget placed on a dashboard is a good example of this.
It is common to think of the breaking points as specific devices, but at SEB we think of breaking points and resolution as an area of space that is not necessarily tied to one specific device. The main reason for this is that one breakpoint can be a possible viewport for several devices. For example, a user can resize the browser window on a desktop to fit several browser windows in one screen.
Even though the viewport has a size of e.g 1200 pixels, the area that can be used for design is less because there is a scrollbar. The size of the scrollbar differs depending on the browser but you should always leave at least 1,875 rem (30px) on the right-hand side.
* There are 12 columns, but no element should be narrower than a fourth of the grid (3 columns).
The base unit in our system is 16 pixels for both font-size as well as spacing. This equals 1 rem. This unit is used to create space, margins, and dimensions within our grid and layout, but also dimensions of our components and patterns. To do this, we use multiples or divided parts of the base unit to ensure coherency and consistency.
If needed, the base unit can be divided into 2, for instance in our spacing scale for elements, due to the size of the elements that demand smaller values.
Example: 8, 16, 24, 32, 40 pixels, etc.
Are you designing for our common logged-in channels (Business Arena, Nexus, and the Private Internetbank)? Go to Shell > Common channels > Grid & Responsiveness for information specifically about the layout in those channels.
Navigational components might change from visible to hidden instead of resizing when the viewport is changed, this applies to the side menu, application bar, and footer.
What is rem?
The grid only applies for the placement of objects horizontally, the placement of objects horizontally is fixed and communicated with rem. See examples below for the amount of space between different objects.
1 rem is our most common measure for the margin between objects or content and the edge of the component (e.g. the margin between the edge of a button and the button text or the margin between the edge of a card and the content inside the card).
Above: Spacing and typographic size details in a form/wizard
What is rem?