Getting started

Here's what you need to get going.

The RFUI library is hosted as a Deno Third Party Module.

You'll probably want to use Import Maps. Add the following to the "imports" object in deno.json:

"rfui": "https://deno.land/x/rfui@v0.1.21/mod.ts"

Something like this:

<link rel="stylesheet" href="https://rfui.deno.dev/rfui.css" />

See the Stylesheet page for more information.

Something like:

import { Button } from "rfui";

<Button>Example</Button>

It is usually a good idea to decide upfront on how serious or playful you want the tone of your website to be. See "Choose a personality".

Various RFUI components use heroicons. If you end up having a need for more icons, to maintain a consistent look and feel, you probably will want to use heroicons in your project as well.

In your project's eg. app.css file do something like this to override the CSS variables that were defined in RFUI's stylesheet that you set up in step two.

:root {
  --default-roundedness: var(--rounded-lg);
}

See the "CSS variables" page for more information.

If you want syntax highlighting for RFUI's CodeBlock component, you'll have to do a little bit more work.

1. Generate a prism.js and prism.css file here. Make sure you include whatever languages and plugins you need. Ie. if you want to let users copy the code to their clipboard, you'll need to include the "Copy to Clipboard Button" plugin.
2. If you want stuff in code blocks to wrap (you probably do), change white-space:pre inprism.css to white-space:pre-wrap.
3. Load them by adding something like:

   <script src="/prism.js"></script>

   and:

   <link rel="stylesheet" href="/prism.css" />