UI Kit
The Fission UI Kit,
designed to be used with Tailwind CSS.
Getting Started
Step one, install dependencies.
npm install @fission-suite/kitnpm install tailwindcss- Copy the font files.
npx copy-fission-fonts ./vendor/fonts/ --woff2 - Copt the images.
npx copy-fission-images ./vendor/images/
Step two, configure Tailwind CSS.
We need to configure Tailwind CSS to use the Fission colors, fonts and other things.
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,
extend: {
fontSize: kit.fontSizes
}
},
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/kitimport { 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)}
/>Elm
elm install fission-suite/kitimport Kit.Components
Kit.Components.signIn [ class "bg-purple text-white text-opacity-90" ]