Info

General Rules

No native HTML elements

When you're building your page / feature, it is important that you avoid using any native HTML elements. We highly encourage that you use components in bits to utilise any properties that is available (e.g margin inputs).

Examples:

For containers like div, use div

For links, use fl-link

For Typography, use fl-heading and fl-text

For images use fl-picture

Layout

The fl-grid and fl-col component combination offers a 12 column grid system using Flexbox making it easier to build pages without writing your own CSS. It’s fully responsive using a mobile first approach. See Grid System Documentation.

With regards to SPACING, all components in bits extends the BaseComponent which will enable the components to accepts inputs for responsive margins. We are following the Single-Direction Margin approach (right and bottom for us) so we don’t have to worry when we remove or move components around the page. See Spacing Documentation.

Customising bit component’s UI

Everyone should only use components that is already available in bits and should not be customised without consulting the designers and ui-engineering teams first.