Front-End Utils

for OIT Svelte-Kit Template

This package provides a Tailwind Preset with BYU color presets and helpful utility classes, as well as some common UI components written in Svelte

Documentation and component preview website.

Usage

To use this preset, import and use it in your tailwind.config.js like this:

import byuPreset from '@byu-oit/fe-utils/tailwind/byuPreset'

export default {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  presets: [
    byuPreset
  ]
}

Colors

The Tailwind Preset provides color utilities for the main and accent colors recommended for use on BYU websites.

Component Classes

This preset includes some classes for common components to help with consistency.

| Class | Use On | Description | | ----- | ------ | ----------- | | card | block container | Creates a large raised container. | | btn | buttons | Provides consistent padding and rounded borders for buttons. | | primary | buttons | Buttons using the primary blue/navy color. | | primary-outline | buttons | Buttons with an outline using the primary blue/navy color. | | secondary | buttons | Buttons using the secondary gray color. | | secondary-outline | buttons | Buttons with an outline using the secondary gray color. | | table | tables | Provides consistent styling for tables. |

Components

This package also provides some svelte components to avoid wheel-reinventing:

• Dialog
• Pagination
• Data Table
• Data Table with Pagination

Preview

To run a site with component previews and preset documentation, install dependencies with npm i, then start the dev server with npm run dev

The documentation is also hosted on github pages.

Building

To build your library:

npm run package

To create a production version of your showcase app:

npm run build

You can preview the production build with npm run preview.

Publishing

To publish your library to npm:

npm publish

You will need to be authenticated to NPM and have rights to publish to the @byu-oit organization.