UI Kit

The Fission UI Kit,
designed to be used with Tailwind CSS.

Getting Started

Step one, install dependencies.

npm install @fission-suite/kit
npm install tailwindcss
Copy the font files.
npx copy-fission-fonts ./vendor/fonts/ --woff2

Step two, configure Tailwind CSS.

We need to configure Tailwind CSS to use the Fission colors and fonts.

import plugin from "tailwindcss/plugin"
import * as kit from "@fission-suite/kit"
// or kit = require("@fission-suite/kit")

export default {
  purge: [
    ...kit.tailwindPurgeList()
  ],

  theme: {
    colors: kit.dasherizeObjectKeys(kit.colors),
    fontFamily: kit.fonts
  },

  plugins: [
    plugin(function({ addBase }) {
      // this `fontsPath` will be the relative path
      // to the fonts from the generated stylesheet
      kit.fontFaces({ fontsPath: "/fonts/" }).forEach(fontFace => {
        addBase({ "@font-face": fontFace })
      })
    })
  ]
}

See the guide for an example configuration, and how to use the Elm library.

Step three, use the component library.

React

npm install @fission-suite/kit

import { SignInButton } from "@fission-suite/kit/components/react"

<SignInButton
  className="bg-base-900 text-base-50 dark:bg-base-100 dark:text-base-900"
  onClick={() => webnative.redirectToLobby(PERMISSIONS)}
/>

📖 Documentation

Elm

elm install fission-suite/kit

import Kit.Components

Kit.Components.signIn [ class "bg-purple text-white text-opacity-90" ]