@invisionag/iris-react-views

import Views from '@invisionag/iris-react-views';

react-views is a bundle of layout components that wrap other components to standardise pages.

Usage

View

This component provides the outer frame for all content that is being displayed as part of the injixo web applications (excluding text heavy content like the injixo.com website, the blog and injixo docs).

Except the navigation elements of injixo, everything else has to be placed inside this container component.

There are two distinct versions of the container that should cover all usecases. In other words, every single page inside injixo has to use that content container component to ensure consistency across apps.

What to consider

• Content inside the container has to adhere to the inner spacing of 1rem to the container element
• Do not create any additional offsets or layouts inside the container, i.e. place content at top left corner inside the container

Breakpoints for media queries

According to the usage statistics of injixo, there are only two relevant screen widths to consider:

1. Small / Mobile: below 768px
2. Large / Desktop: 768px or wider

Keep in mind, that the mobile usage almost completely comes from injixo Me. This means that injixo Me has to be designed with that target group in mind. Every other injixo component must not be broken on mobile screens but can be designed based on the graceful degradation approach. This means, we deliver a reasonable user experience on mobile devices, but for example with a reduced feature set, read-only view or a reduced information density.

Variants

1. Full width

import { View } from '@invisionag/iris-react-views';

<View>
  This is the page content
</View>

To be used when

• There is a lot of space needed to display relevant information
• Other full width elements such as a toolbar or a sidebar are part of the page
• Screens are small (mobile). It is the only option to display content on mobile screens

Constraints

• This is the only available layout option for small/mobile screens

Characteristics

• There is no offset on either side around the content container

2. Centered

import { View } from '@invisionag/iris-react-views';

<View centered>
  This is the page content
</View>

To be used when

• The space needed is limited, i.e. there would be an inbalance when content is being positioned at the top most left corner and the right section of the page would be almost empty

Constraints

• Screen has to be large/desktop. Centered layout must not be used on mobile screens to avoid loosing limited space

Characteristics

• Content container is limited to 1200px maximum width
• Below 1200px the content consumes 10 out of 12 columns or approx. 80% of the full page width

ViewWithSidebar

Simply pass your view component as a child and your sidebar as a prop to layout your page.

import { ViewWithSidebar } from '@invisionag/iris-react-views';

<ViewWithSidebar sidebar={<SomeDrawer />}>
  This is the page content
</ViewWithSidebar>