Freyja

Summary

Freyja is a fully customizable frontend component library. Freyja provides a set of common UI components that ensure a consistent look and feel throughout your Walhall app.

You can use Freyja to style Midgard, the frontend of the app, and the individual logic modules used in the app.

Use Freyja

Set up Freyja

  1. Clone the Freyja repository.
  2. Open your terminal and go to your app root (Midgard) repository.
  3. Run npm install freyja-ui to install Freyja.

Freyja demo site

The Freyja repository includes a demo site that you can generate to view a live demo of all of the Freyja UI components with instructions on how to implement them.

To build the demo site, clone the Freyja repository and run ng build in the repo directory. The build artifacts will be stored in the /dist directory. Use the --prod flag for a production build.

Customize the theme

To customize the color scheme of Freyja, open your main styling file (styles.scss) and add the following lines:

@import <node-modules-path>/theming.scss;
@include freyja-theme($theme-colors);

Note that $theme-colors field is optional; if you supply nothing, then the default theme will be used.

In order to change the theme of Freyja, you must define $theme-colors in styles.scss. These are the properties that you can customize:

  • $color-primary
  • $color-background
  • $color-danger
  • $color-disable
  • $color-text-input
  • $color-button-text

Classes

Freyja offers the following classes:

Background classes

Classes for the three levels of background: .bg-1, .bg-2, .bg-3

.bg-1 has the darkest value, and .bg-3 has the lightest.

Margin and padding classes

Classes for defining the size of the margin, in 4-pixel steps: .m1, .m2, .m3.m12

In this case, .m1 would set the margins to 4, and .m2 would set the margins to 8.

Classes for defining margins on single sides:

  • .mr (margin right),
  • .ml (margin left),
  • .mt (margin top),
  • .mb (margin bottom),
  • .mx (margin x-axis - left and right),
  • .my (margin y-axis - top and bottom)

The same classes exist for padding, e.g., .p1, .p2, .pr, .pl