Internet Explorer is not supported by Design Library

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.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.

Micro-frontend

When you are going to create a micro-frontend page, you need know what guidelines there are for an internal or/and an external shell.

Guidelines

Use the shell guidelines

  • Use the same grid & responsiveness as the current channels.
  • The shells are responsible for the first level in the navigation, the Micro frontend owner are responsible for the second level (when you click on the first level) and the structure for the navigation. It’s important to collaborate between the other Micro frontend owners if you are under the same first level.
  • Think about what page type you are building and use the taxonomy & page types for help.
  • Present the information in the right order, read about the page anatomy & zones.
  • Use these Figma templates when designing responsive Micro frontend pages for common shells: Templates for common shells

Shell functionality

The shells share common functionality as much as possible if they have the same need, but there is also separate functionality for each shell.

Common components

Navigation

The navigation structure is used by all shells, but Nexus are also using the navigation to view out the customer holdings.

  • The shell is responsible for the navigation component
  • Read more about Navigation.

Profile selector

The Profile selector is used by all shells. When you expand the Profile selector, you’ll find settings for the customer/employee.

  • The shell is responsible for the Profile selector component. 

Language selector

You’ll find the Language selector under the Profile selector. This is a common functionality for all shells. The customer/employee selects a language and the selection appears on all connected Micro frontend pages. It’s the Micro frontend owner’s responsibility to build the language choices that connects to the shells Language selector.

  • The shell is responsible for the Language selector component.
  • See guidelines and specifications for Language selector

Nexus components

Customer selector

Customer selector is a feature of the Nexus shell where SEB employees can search for SEB customers. The component is placed within the search input field the top of the Nexus shell.

Behaviour

Start to write a name or social security number for SEB customer to start the search. You can search for several things, like "Anna Alingsås" and see all Anna's in Alingsås. Select a customer by clicking on the row of the customer's name in the customer selector. The customer selector will show 30 customers at a time. To load more customers, you scroll down.

Desktop

Desktop

Tablet

Tablet

Mobile

Mobile

 

Page design

Start page

Nexus is collaborating with other teams like Advisory to find the best content for our employee needs.

  • The shell is responsible for the information on the start page. 

Breadcrumbs

  • The shell is responsible for the breadcrumbs.
  • See guidelines and specifications for Breadcrumbs.

Header tags

Implementation of headings is especially important for people using assistive technologies. Web content must be semantically structured to be programmatically determinable in a meaningful way.

  • Heading level 1 will be provided by the shells, but the micro-frontend owner is responsible for the name of the heading level 1.
  • Headings from level 2 and higher is up to the micro-frontend owner.
  • Read more about this in WCAG Layers of Guidance.

Footer links

  • The shell is responsible for the footer links.

Slide-out

  • The shell is responsible to develop a Slide-out for the Micro frontend pages, so they can call on this function when it’s needed.
  • See guidelines and specifications for Slide-out.

Take-over

  • The shell is responsible to develop a Take-over for the Micro frontend pages, so they can call on this function when it’s needed.
  • See guidelines and specifications for Take-over.

FAQ

CSS

Q: What is the recommendation from the shells when it comes to making sure that any CSS spills over from a MFE up to the shell?

To prevent unintended styling of components, either in the shells or in the MFEs, both the shell-sites and the MFEs need to implement their CSS in a way that prevents CSS leakage. The shell-sites should only apply their styles to the base DOM nodes (body, header, nav, main and footer) and the components used within those nodes. The MFEs should only apply their styles to nodes/components within their MFE and not apply any styling to any of the base DOM nodes. This can be done in different ways, for example style encapsulation or wrapping the entire stylesheet in a base class and only apply styles within that class.

 

Fonts

Q: Should each Micro Frontend provide its own fonts?

MFEs should not rely on the shell-sites to provide common assets such as fonts, stylesheets (e.g. SEB Bootstrap), etc. The shell-sites will include some of these common assets, but the MFEs should be portable and include the assets it needs to be rendered properly. The shell-sites can change, URLs can move, things can break. MFEs should rely on their own assets.

Read more about fonts on https://github.com/sebgroup/fonts.

 

Front-end framework

Q: Are there any recommended front-end frameworks? Ex Angular, React.

To prevent any type of incompatibility or versioning issues within the same front-end framework, the shell-sites should be built completely framework-independent, e.g. the will only use vanilla JavaScript to handle their logic. MFEs on the other hand can choose whichever framework they prefer to build their MFE in and it should be compatible with any of the shell-sites. Note though, that a lot of the modern frameworks can bring a lot of unnecessary weight to your MFE. Make sure to pick one that suits your needs, not just because it's easy to set up.

The shell-sites are built completely framework-independent, they are only using vanilla JavaScript to handle the logic. This is implemented by design, to prevent any type of incompatibility or versioning issues between the shell-sites and MFEs.

MFEs can be built using a front-end framework. The recommended JavaScript frameworks are Angular (https://github.com/sebgroup/ng-components) or React (https://github.com/sebgroup/react-components), as there are plenty of SEB components for these frameworks. The recommended CSS frameworks are SEB Bootstrap (https://github.com/sebgroup/bootstrap) or SEB Vanilla (https://github.com/sebgroup/vanilla-pattern-library).

Using a front-end framework can bring a lot of weight to your applications bundle size, so make sure to only use a framework if it's useful and/or optimize your imports from the framework that you choose.

 

Navigation

Q: Who is responsible for the navigation?

The shells are responsible for the first level in the navigation. The sub-levels are up to each Tribe to decide.

 

Nexus

Q: Should our Micro Frontend page be in Nexus?

If you are developing a Micro Frontend page for employees at SEB, you should probably be part of the Nexus shell. Contact Nexus Channel Manager Robert Skoglund for more information.

 

Subsections

Page last updated

Feedback

Was this helpful?