Vision Component Library


Vision is Flywheel's Design System with the goal of unifying the look and feel of all applications throughout Flywheel. This is a collection of scss styles and angular components for aiding and simplifying frontend work.

Installation

To use vision first install it from npm

``bash
$ npm install --save @flywheel-io/vision
`

Then you need to do some scss setup, in your global scss stylesheet add:

`scss
@use '@flywheel-io/vision' as vision;

@include vision.icons; // adds the icon font face and glyph classes
@include vision.colors; // defines the colors vision relies on

// optional inclusions
@include vision.mat-theme; // uses the vision angular material theme
@include vision.global-typography; // adds global styles for text elements
`

For more info on colors and theming check out the colors docs

And just like that, you're ready to use vision! 🥳

Using Components

To use the components, you just need to import their module into the module you're working in

`ts
import { FwAlertComponent } from '@flywheel-io/vision';

@NgModule({
imports:
FwAlertComponent,
...anyOtherFwComponentsYouMightNeed,
...
`

Then add it to your html

`html

``

For more details on using specific components, including their module name and selector, you can check out its docs page in [the storybook