Fylgja component - Elevation

The Elevation component is a util package for shadows, where it offers shadows as CSS variables.

It follows the same principals as Google's material design.

But stay's more small and practical, by focusing only on elevation indexes that are commonly used.

Installation  # 

npm install @fylgja/elevation

Then include the component in to your code via;

@use "@fylgja/elevation";
// Or via PostCSS and other options as plain CSS
@import "@fylgja/elevation/elevation.css";

How to use  # 

The variables can be used on any shadow property that accepts 4 values. For example the box-shadow property.

The elevation component offers 6 layers based on the material design layers.

.example {
box-shadow: var(--elevation-z2);
}

If you plan to just use the SCSS version and don't want the CSS variables. You can disable them via the $enable-elevation boolean.

The SCSS values are available via the map $elevation. Or the SCSS function elevation().

.feeling-sassy {
box-shadow: elevation(2);
}

Config  # 

As with almost all of our components, CSS variables can be configured to add your own look/style.

Want direct control on the base styles, here are the following SCSS variables can you modify.

$enable-elevation: true !default;

$elevation-color: black !default;
$elevation-umbra: rgba($elevation-color, 0.2) !default;
$elevation-penumbra: rgba($elevation-color, 0.14) !default;
$elevation-ambient: rgba($elevation-color, 0.12) !default;
$elevation: (
z1: (
0 2px 1px -1px $elevation-umbra,
0 1px 1px $elevation-penumbra,
0 1px 3px $elevation-ambient
),
z2: (
0 3px 1px -2px $elevation-umbra,
0 2px 2px $elevation-penumbra,
0 1px 5px $elevation-ambient
),
z3: (
0 2px 4px -1px $elevation-umbra,
0 4px 5px $elevation-penumbra,
0 1px 10px $elevation-ambient
),
z4: (
0 3px 5px -1px $elevation-umbra,
0 6px 10px $elevation-penumbra,
0 1px 18px $elevation-ambient
),
z5: (
0 5px 5px -3px $elevation-umbra,
0 8px 10px 1px $elevation-penumbra,
0 3px 14px 2px $elevation-ambient
),
z6: (
0 7px 8px -4px $elevation-umbra,
0 12px 17px 2px $elevation-penumbra,
0 5px 22px 4px $elevation-ambient
)
) !default;

Dept map  # 

This is based on the material design version. See there docs here at material.io

MaterialFylgjaDescription, For example
dp0z0same as none
dp1z1Cards, Searchbars
dp2z2Floating Btn's
dp4z3Navbar, Fixed header
dp6z4Popup, FAB
dp8z5Bottom Navbar, Floating/picked up Component
dp12z6Offcanvas, Modal

There are other frameworks that use this same pattern. E.g. materialize

Noticed a typo or is something unclear? Help us improve this page on GitHub.