@fylgja/elevation

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

Usage no npm install needed!

<script type="module">
  import fylgjaElevation from 'https://cdn.skypack.dev/@fylgja/elevation';
</script>

README

Fylgja - Elevation

NPM version license

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

Material Fylgja Description, For example
dp0 z0 same as none
dp1 z1 Cards, Searchbars
dp2 z2 Floating Btn's
dp4 z3 Navbar, Fixed header
dp6 z4 Popup, FAB
dp8 z5 Bottom Navbar, Floating/picked up Component
dp12 z6 Offcanvas, Modal

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