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.
Set up Freyja
- Clone the Freyja repository.
- Open your terminal and go to your app root (Midgard) repository.
npm install freyja-uito 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);
$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
styles.scss. These are the properties that you can customize:
Freyja offers the following classes:
Classes for the three levels of background:
.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:
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:
.mx(margin x-axis - left and right),
.my(margin y-axis - top and bottom)
The same classes exist for padding, e.g.,