@guardian/src-foundations
    TypeScript icon, indicating that this package has built-in type declarations

    3.12.0 • Public • Published

    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>
        );
    };

    Keywords

    none

    Install

    npm i @guardian/src-foundations

    DownloadsWeekly Downloads

    1,216

    Version

    3.12.0

    License

    Apache-2.0

    Unpacked Size

    297 kB

    Total Files

    206

    Last publish

    Collaborators

    • unmesh_malvankar
    • zekehg
    • rtyley
    • dlawes
    • ghaberis
    • jsherbert
    • david.furey.gu
    • tonymccraeguardian
    • jlieb10
    • guardian-developers
    • simonadcock-gu
    • maxspencer
    • akash1810
    • reetta
    • ajwl
    • tomrf1
    • mchv
    • itsibitzi
    • justinpinner
    • jranks123
    • nicl
    • philmcmahon
    • tjmw
    • thaliasilver
    • sndrs
    • sam.hession
    • jfsoul
    • 0x101
    • frankie_hammond
    • aoifemcl15
    • ioanna0
    • mxdvl
    • mark.addis
    • rhysmills
    • jamie-lynch
    • amyhughes-gu
    • oliverlloyd
    • jacobwinch
    • dskamiotis
    • marjank
    • annabeddow
    • fweddi
    • michaelclapham_gnm
    • olly.namey.guardian