Fozzie is Just Eat's UI Component Framework, built to help modularise and share the UI code we write across all of our teams at Just Eat.
To see a full description of what Fozzie is, see the 'What is Fozzie?' section of this documentation.
To help with importing fozzie SCSS styles, we use a tool called Eyeglass.
Essentially, Eyeglass lets us import modules in our Sass by referencing the name of the module, rather than having to provide absolute paths into the node_modules folder.
For example, say you have a project and want to include the base fozzie module in your Sass build, you can do the following:
yarn add @justeat/fozzie
Setup Eyeglass.
If you are using the fozzie gulp build tasks, then Eyeglass is automatically ready to use as part of the Sass compilation task.
If not, then check out these integration recipes for Gulp and WebPack.
Within your project Sass files, you will then be able to import the base fozzie module like so:
@import 'fozzie';
When your Sass is compiled, it will include the Sass from the fozzie module as well.
If you want to check what @import keyword you need to include to import a module, you can check out the Eyeglass config which is located in each modules package.json.
Fozzie and its associated components have been setup to allow for multiple themes to be generated from the same base set of styles.
Currently, there are two themes available. The base Just Eat theme and the alternative Menulog theme (used on the Australia/New Zealand platforms).
Technically, this is done by specifying two colour palettes via the fozzie-colour-palette module; one that defines the default colour palette for the Just Eat platform and a set of colour overrides specified in a separate Menulog palette wrapped inside a Sass mixin.
Inside the base fozzie module, we can then do a check on a globally defined $theme variable to check whether we need to include these theme overrides or not:
// The colour variables are imported from https://www.npmjs.com/package/@justeat/fozzie-colour-palette
// If a custom theme is specified, it applies a set of colour overrides to the base theme depending on the $theme
@import 'fozzie-colour-palette';
@if ($theme == 'ml') {
@include applyScheme-menulog;
}
By doing this, a project using fozzie can now generate CSS files based on these two themes.
By not defining a $theme variable, fozzie will default to the base Just Eat colour palette and the stylesheet produced will be themed in line with the default theme. However, by setting the $theme variable to 'ml' the Menulog theme overrides will be activated and these overrides will be applied to the resulting stylesheet.
$theme: 'ml';
//importing fozzie now will mean the Menulog theme is applied to fozzie components
@import 'fozzie';
Component authors will need to hook onto the $theme variable to apply theme overrides to a component. The base component should always be defined with the default JE theme, with overrides for a theme applied via variables in a Sass @if directive.
For example, in the f-header module the following code overrides some of the components default colours:
$nav-text-color : $blue;
$nav-text-color--hover : $blue;
$nav-toggleIcon-color : $blue;
$nav-icon-color : $blue;
$nav-trigger-focus-color : $blue;
$nav-trigger-focus-bg : $blue--offWhite;
// Menulog theme overrides
@if ($theme == 'ml') {
$nav-text-color : $green;
$nav-text-color--hover : $green--dark;
$nav-toggleIcon-color : $brand--green;
$nav-icon-color : $brand--green;
$nav-trigger-focus-color : $green;
$nav-trigger-focus-bg : $green--offWhite;
}
It's convention in fozzie to define the default variables at the top of a component SCSS file, followed by any theme specific overrides.