🚀 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>