Skip to content
Mesh

Develop

Get up to speed quickly and start building better experiences for your users using the Mesh Design System.

Design principles

As a developer, it is essential that you have an understanding of what it takes to design an experience for a user. It is not only the role of the designer to have an understanding of design principles, as these principles apply to all aspects of development.

Please refer to the design principles that underlie design at nib.

Components

Components are the building-blocks for all nib experiences. Our primary implementation of the components are built with React and distributed as individual npm packages.

For documentation on the components, see the Component overview page.

Theme is king

Our theme is integral to how we build experiences at nib. Our design system is built upon it, and many of the components will break when not rendered within the ThemeProvider. Ensure that you wrap the root of your application with our ThemeProvider component and pass in the brand for which you are building.

jsx
import ThemeProvider, {nib} from '@nib-components/theme';


const App = props => (
  <ThemeProvider theme={nib}>
    <div>Themed page</div>
  </ThemeProvider>
);


export default App;

This is required and should only be done once per application.

Selectors

Our theme also exports selectors for easily grabbing properties from the theme object.

jsx
import styled from 'styled-components';
import {colorLightest} from '@nib-components/theme';


const Box = styled.div`
  background-color: ${colorLightest};
  {/* instead of /*}
  background-color: ${props => props.theme.colors.shades.lightest};
`;

Outside of the components

Utilities

Our layout package provides mixins for spacing and responsive styling based on the open source libraries styled-components-breakpoint and styled-components-spacing.

These utilities will automatically look for breakpoints and spacing sizes from our theme.

jsx
import {breakpoint, p, mt} from '@nib/layout';


const Example = styled.div`
  ${p(4)};


  ${breakpoint('md')`
    display: none;
  `}


  > * + * {
    ${mt({xs: 2, md: 4})};
  }
`;

For more information, visit our foundation pages for both Spacing and Breakpoints.

In the past we have utilised another open source package, styled-components-grid, to define layouts on pages. However, since the introduction of our Layout components, we no longer recommend Grid for use building new pages and experiences.

The layout components are:

Browser support

Browser support should be determined from your actual users. Check google analytics for your pages and applications to determine what level of legacy browser support is required for your audience.

Generally, we support the latest 2 versions of all modern browsers (Google Chrome, Mozilla Firefox, Safari, Microsoft Edge).

We use BrowserStack to check your projects on devices and browsers you do not have access to.

There are also a number of test mobile devices in the Newcastle office available for you to test your projects on real devices.

For more details, see the Browser Support page.

Accessibility and semantic markup

Accessibility should be baked in to how we build experiences at nib. Our design system should provide you with accessible bricks to fit together, but it is your responsibility to ensure the mortar is also inclusive. Projects will always have a variable "brick to mortar" ratio and having accessible bricks does not guarantee an accessible end user experience. Make sure you test, test, test!

Some of the more basic accessibility considerations are:

  • Ensure sufficient color contrast (AA rating) in your layouts.
  • Unplug your mouse and try to navigate around your site - can you reach everywhere?
  • Practise good focus management, with our standard focus styling.
  • Use landmarks appropriately (e.g. main, aside, nav). Not everything should be a div as it tells a screenreader nothing about the nature of content within.
  • Pages should follow a logical, semantic heading hierarchy.
  • Add a Skip to content link (see our Skip Link component).
  • Usearia- attributes to add context or hide noise.

For a more detailed understanding on what we expect for accessibility, refer to the Accessibility Checklist.

Think fluidly

The web is not static, it is fluid. Think hard before setting a fixed height or width on anything. What impacts will that have on different screen sizes, with different content lengths or number of elements. CSS is powerful and there is probably a more flexible solution to your problem.

A note on our tech stack

The Mesh design system is built using React and Styled Components. If you are looking to build something for the nib group outside of this tech stack we do offer an atomic CSS Framework based on Tailwind that will enable you to build things that "look like" our design system components.

Styled Components gives us tremendous theming capability, which powers our entire library of components, and many different brands.

RSC support

Efforts have been made to enable usage of Mesh components within an RSC project. See React Server Components (RSC) compatibility for more information.

Resources

Edit this page