🚀 Install

1. The Theme

You can install Preons in one of several ways.

CDN

The fastest way to get started is by using unpkg.

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@200;300;400;500;600;700&amp;family=Martel:wght@200;300;400;600;700;800;900&amp;family=Roboto+Mono:wght@100;300;400;500;700&amp;display=swap">
<link href="https://unpkg.com/preons/dist/reset.css" rel="stylesheet" type="text/css" />
<link href="https://unpkg.com/preons/dist/reset.css" rel="stylesheet" type="text/css" />

Node modules

npm

npm install preons

yarn

yarn add preons

2. Import

You will need both the theme and the reset. Feel free to choose alternative resets for your project.

Webpack js

import '~preons/dist/reset';
import '~preons/dist/preons';

See the Webpack guide for more details

scss

@import '~preons/dist/preons';

css

@import '~preons/dist/preons.css';

3. Font

Include the font system if you haven't already.

https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@200;300;400;500;600;700&family=Martel:wght@200;300;400;600;700;800;900&family=Roboto+Mono:wght@100;300;400;500;700&display=swap

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@200;300;400;500;600;700&amp;family=Martel:wght@200;300;400;600;700;800;900&amp;family=Roboto+Mono:wght@100;300;400;500;700&amp;display=swap">

@import

<style>
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@200;300;400;500;600;700&amp;family=Martel:wght@200;300;400;600;700;800;900&amp;family=Roboto+Mono:wght@100;300;400;500;700&amp;display=swap');
</style>