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

    4.0.0 • Public • Published

    @guardian/source-foundations

    npm

    The atoms from which all our visual design is built. They may be used with any CSS-in-JS library.

    Install

    Foundations are installed as a JavaScript package via Yarn:

    $ yarn add @guardian/source-foundations

    or:

    $ npm install @guardian/source-foundations

    Colour

    The colour palette comprises colour tokens and global colours.

    Colour tokens (e.g. text.primary) are organised by the context in which they may be used. Where possible, prefer using colour tokens.

    Global colours (e.g. neutral.7) do not specify a context , and should be used only if an appropriate colour token is not available.

    import { text, background } from '@guardian/source-foundations';
    
    const headline = css`
        color: ${text.primary};
        background: ${background.primary};
    `;
    
    // color: #121212;
    // background-color: #ffffff;

    Space

    Our space system is structured as increments of 4px.

    import { space } from '@guardian/source-foundations';
    
    const spaceAfter = css`
        margin-bottom: ${space[3]}px;
    `;
    
    // margin-bottom: 12px;

    Size

    Size units may be used to set the height, max-height, width or max-width of a component.

    import { width, height } from '@guardian/source-foundations';
    
    const checkbox = css`
        width: ${width.inputXsmall}px;
        height: ${height.inputXsmall}px;
    `;
    
    // width: 24px;
    // height: 24px;

    Typography

    Typography is expressed as methods that return snippets of CSS depending on the desired font family and size.

    import { headline } from '@guardian/source-foundations';
    
    const h1 = css`
        ${headline.medium()};
    `;
    
    // font-family: GH Guardian Headline, Georgia, serif;
    // font-size: 2.13rem;

    Media queries

    We provide media queries for each breakpoint in our grid layout.

    import { from, until, between } from '@guardian/source-foundations';
    
    const styles = css`
        padding: 0 10px;
    
        ${from.mobileLandscape} {
            padding: 0 20px;
        }
    
        ${between.phablet.and.desktop} {
            padding: 0 32px;
        }
    
        ${until.wide} {
            padding: 0 40px;
        }
    `;
    
    // padding: 0 10px;
    // @media (min-width: 480px) {
    //   padding: 0 20px;
    // }
    // @media (min-width: 660px) and (max-width: 979px) {
    //   padding: 0 32px;
    // }
    // @media (max-width: 1300px) {
    //   padding: 0 40px;
    // }

    Keywords

    none

    Install

    npm i @guardian/source-foundations

    DownloadsWeekly Downloads

    1,004

    Version

    4.0.0

    License

    Apache-2.0

    Unpacked Size

    323 kB

    Total Files

    11

    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
    • rhysmills
    • jamie-lynch
    • amyhughes-gu
    • oliverlloyd
    • jacobwinch
    • dskamiotis
    • marjank
    • annabeddow
    • fweddi
    • michaelclapham_gnm
    • olly.namey.guardian