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.

Freyja demo site

You can see a demo of the Freyja UI components by visiting our demo site.

How to 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.

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