This is a
playground to test code. It runs a full
Node.js environment and already has all of
npm’s 400,000 packages pre-installed, including
@coopdigital/foundations-typography with all
npm packages installed. Try it out:
This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.
Baseline typographic setup for all Co-op's web projects.
$ npm install @coopdigital/foundations-typography --save $ yarn add @coopdigital/foundations-typography
Here's a bunch of examples, showing how you can integrate this CSS module in your project, based on most popular types of project. You can either use a post-processed and pre-built CSS form the
dist directory, ot use PostCSS sources from the
The latter have two dependencies, which should be consumed by your frontend toolkit to postprocess the CSS correctly.
In Vue, you can just reference it from a global component like so:
<style> /* Import PostCSS source */ @import "~@coopdigital/foundations-typography/src/typography.pcss"; /* Import postprocessed distributable CSS */ @import "~@coopdigital/foundations-typography/dist/typography.css"; </style>