Skip to content
Mesh

Develop

Get up to speed quickly and start building better experiences for your users using the mesh design system.

Our philosophy

Our design principles underlie the way we do design at nib.

Components

Components are the building-blocks for all nib experiences. Our primary implementation of the components are buiilt 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 appilcation 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};
`;

See all selectors

Outside of the components

Utilities

We use two open source packages for media query-based responsiveness. These libraries are styled-components-breakpoint and styled-components-spacing. These libraries are designed to be used together and will automatically look for breakpoints and spacing sizes from our theme.

jsx
import breakpoint from 'styled-components-breakpoint';
import {p, mt, Padding} from 'styled-components-spacing';
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 often utilised another open source package, styled-components-grid, to define Grid layouts on pages. This is still acceptable, however with the introduction of our layout components, we recommend their use over Grid wherever possible.

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), as well as Internet Explorer 11.

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!

Be sure to:

  • 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
  • Add a Skip to content link
  • Usearia- attributes to add context or hide noise

HTML5 provides us with a range of elements to be descriptive in our markup. Landmarks like aside, main, header, nav, footer, article, figure, and section should be used appropriately. Not everything should be a div! A div is a generic container that tells a screenreader nothing about the nature of content within.

Pages should follow a logical, semantic heading hierarchy. Correct form markup should be used. This is one of the easiest areas to trip up on because interactivity adds complexity. Buttons and links are different things. Buttons should perform an action, links should take a user somewhere. Do not use a button element to do a links job, or vice versa. And never make a div/i/li/whatever actionable!

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.

Resources