Contacts and appointments module
Kupfer contact and appointment service (Django)
Kupfer document client (Angular)
Kupfer document service (Django)
Location service (Django)
Products client (Angular)
Products service (Django)
- Contacts and appointments module
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.
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
- Clone the Freyja repository.
- Open your terminal and go to your app root (Midgard) repository.
npm install freyja-uito 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);
$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.,