Getting started with PIE Web Components

PIE Web Component - Prerequisites Guide

If you want to start using the PIE Web Components, it's important to know a few things up front.

This guide will go through the dependencies that you'll need in order to start using them in your application.

Expected Dependencies

In order for PIE components to display correctly when importing them into your application, you'll need to ensure you have a couple of things:

1. The pie-css library

pie-css is a styling library that provides a minimal set of styles to help the PIE Web Components display as intended.

It also includes the PIE design tokens CSS variables (and HSL colour variants), as these variables are used across the component styles.

To see the current styles that are included, see the current pre-compiled CSS file. It's important to note that the CSS variables imported on lines 1 and 2 are inlined by Postcss as part of the build process when pie-css is deployed to NPM.

For more information on how to install and import PIE CSS, check out the package README

2. JETSansDigital

Although the components should work completely fine without it, they have been designed alongside the JETSansDigital font.

It's expected that projects using the PIE Web Components will also be using the JETSansDigital fontpack. Importing the font can be done in a number of ways, but we'd recommend following the guide on the pie.design docs site.

This guide goes into detail about the typeface and fontpack, how the fontpack has been optimised, as well as giving our recommended way of loading the fonts from the JET shared CDN. If you have any questions at all about how to use JETSansDigital in your application, please reach out to the Design System team for help.

General Quick start guide

1. Install @justeattakeaway/pie-css and import @justeattakeaway/pie-css/dist/index.css into your application.
2. Follow our typography setup guide to install the correct JET fonts.
3. Install the @justeattakeaway/pie-webc package.
4. Check out our framework-specific integration guides for any general setup needed.
5. Check individual component readmes to see how to use them. Such as PIE Button.