Foundations

The Guardian's foundations are the atoms from which all our visual design is built. They are intended for use with a CSS-in-JS library such as Emotion.

Install

$ yarn add @guardian/src-foundations

Use

Palette

import { background } from '@guardian/src-foundations/palette';

const backgroundColor = css`
    background-color: ${background.primary};
`;

Typography

import { headline, body, textSans } from '@guardian/src-foundations/typography';

const h1 = css`
    ${headline.large({ fontWeight: 'bold' })};
`;

const p = css`
    ${body.main()};
`;

const copyright = css`
    ${textSans.xsmall()};
`;

Media queries

import { from, until, between } from '@guardian/src-foundations/mq';

const styles = css`
    padding: 0 10px;

    ${from.mobileLandscape} {
        padding: 0 20px;
    }

    ${between.phablet.and.desktop} {
        padding: 0 32px;
    }

    ${until.wide} {
        padding: 0 40px;
    }
`;

Size

import { width, height } from '@guardian/src-foundations/size';

const checkbox = css`
    width: ${width.inputXsmall}px;
    height: ${height.inputXsmall}px;
`;

Visually Hidden

For elements that should not appear to sighted users, but are useful to assistive technology users.

import { visuallyHidden } from '@guardian/src-foundations/accessibility';

const label = css`
    ${visuallyHidden};
`;

Focus Halo

This mixin provides a clear focus state for elements that may receive keyboard focus.

import { focusHalo } from '@guardian/src-foundations/accessibility';

const input = css`
    ${focusHalo};
    width: 200px;
    height: 44px;
`;

Description Id

A function that takes the ID of an element and generates a new ID. This should be set as the ID of an element that describes the first element. The generated ID should also be passed to the aria-describedby attribute on the first element.

import { descriptionId } from '@guardian/src-foundations/accessibility';

const Form = () => {
    const id = 'first_name';
    return (
        <form>
            <input id={id} type="text" aria-describedby={descriptionId(id)} />
            <p class="error" id={descriptionId(id)} />
        </form>
    );
};