@fission-suite/kit

    2.2.0 • Public • Published

    UI Kit

    License Built by FISSION Discord Discourse

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

    🎨 Styleguide
    📖 Documentation

    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
    • 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/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" ]

    📖 Documentation

    Install

    npm i @fission-suite/kit

    DownloadsWeekly Downloads

    12

    Version

    2.2.0

    License

    Apache-2.0

    Unpacked Size

    4.54 MB

    Total Files

    108

    Last publish

    Collaborators

    • appcypher
    • icidasset
    • quinnwilton
    • bgins-fission
    • expede
    • walkah
    • philipp-fission