The Washington Post Design System utilizes the css-in-js library, Stitches, to optimize app performance and dev experience. For more context about why we use Stitches, check out this post by the WPDS team.
Stitches functions make creating and styling components easy. Below, we’ll dive into the functions most useful to a user of our UI Kit, but check out Stitches’ other functions if you’re curious.
styled function is used to simply create React components with styles. The arguments to the function are:
- either an HTML element or a react component
Component variants may also be specified. For example:
css function can be used to create reusable styles through the application of a class name or used inline to style individual elements. Here’s an example of inline use, utilizing the already defined
FancyButton from before:
And below demonstrates the application of css through the classname property:
**note: style property names use camel case in these functions (example:
Another function available in Stitches is the
keyframes function. Using the keyframe animation technique, Stitches allows the creation of global CSS keyframe rules, which lets transitions be easily reused across code. Below is an example of a simple fading-out animation:
Theme object and tokens
The theme object contains useful token data that can be applied when styling an element. WPDS specifies its own tokens for many attributes, which can be explored throughout the foundations section of our documentation. Tokens can be accessed in code by using the
theme object, which is is preferred over using the
$ reference symbol because it provides additional checks. For more information about using our theme tokens, check out this tutorial.
const WPDSis pre-defined in the UI Kit's
Stitches is also capable of defining breakpoints, which are reusable media queries useful for responsive styling. The WPDS UI Kit supports a variety of size breakpoints and custom themes, which can be explored in the kit's
stitches.config.ts file. The button in the example below would be uniquely styled when the viewport is smaller than
"@light" media queries are responsive only to OS preferences, so styles specified with these will not affect elements based on the theme toggled in the application. To style an element based on local theme, consider stying based on the parent
html element using the syntax:
[".<className> &"]. For example:
Utils allow the creation of custom shortcuts to write certain styling properties. For example, the WPDS ui kit has defined utils
py, which affect horizontal and vertical padding, respectively.
px could then be used in place of
padding-right when styling elements. Check out the other utils WPDS supports defined in the config file.
Another feature of the UI Kit that provides greater consistency is
globalStyles. In the
globalStyles definition, default styles for certain properties are specified by using Stitches’
globalCSS function. A
darkModeGlobalStyles modification is also specified, which alters default color styles in dark mode.
The WPDS UI Kit currently supports a light and a dark theme. Using the Stitches function
createTheme, tokens specified in the
theme object can be overwritten to create custom themes. In the case of our UI Kit, the dark theme is employed when the breakpoint
dark is toggled.
If your team would benefit from an additional util, breakpoint, or something else, please reach out to the WPDS team!