@invisionag/iris-generic

JS Version

import generic from '@invisionag/iris-generic';

generic is a styled-components wrapper around a couple of shared stylings:

• box-sizing
• typography
• normalization

Usage: Somewhere in your code, you want to inject the exported styling like so:

 import { injectGenerics } from '@invisionag/iris-generic';
 
 injectGenerics();

Deal with injection yourself

In case you aren't using styled components, you can import the styling directly and implement your own injection method:

 import generic from '@invisionag/iris-generic';
 import { injectGlobally } from 'styled-components';
 
 injectGlobally`
  ${generic};
 `;

Selective styling

It's also possible to attach parts of the generic package separately. We are exporting all three parts individually, so you can just use those if you - for example - only need typography:

import { typography, boxSizing, normalize } from '@invisionag/iris-generic';
import styled from 'styled-components';
import App from './my-root-component';

const AppWithGeneric = styled(App)`
  ${typography};
  ${boxSizing};
  ${normalize};
`;

render(<AppWithGeneric />)

SCSS Version

Import the generic file in your sass bundle:

@import '~@invisionag/iris-generic/generic.scss';