The atoms from which all our visual design is built. They may be used with any CSS-in-JS library.
This package is part of the Source design system.
Foundations are installed as a JavaScript package via Yarn:
$ yarn add @guardian/source-foundations
or:
$ npm install @guardian/source-foundations
Guardian colours can be found in the palette
documentation.
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 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 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;
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;
// }