Feature/scss functions

[lucasvallenet]

Add useful SCSS functions:

—

grid-space() Return value based on grid cell width with possible offset of grid gutter

Usage:

.box {
    width: grid-space(6/12);
    margin-left: grid-space(1/12, 1);
}

—

vh() Return value based of vh, default css vh if no overwrite (by javascript on mobile for example)

Usage:

.box {
    height: vh(100);
}

—

strip-unit() Return a value without unit (used for other function)

—

responsive-type() Clamp min/max px value with a max breakpoint, useful for responsive font sizes

Usage:

.c-heading.-h1 {
    font-size: responsive-type(30px, 60px, 1800);
}
.c-heading.-h2 {
    font-size: responsive-type(20px, 40px, $from-big);
}

Comment: Breakpoint value can be in px or plain number.

[cloudflare-pages[bot]]

Deploying with    Cloudflare Pages

Latest commit:	be71474
Status:	✅  Deploy successful!
Preview URL:	https://91fac348.locomotive-boilerplate.pages.dev
Branch Preview URL:	https://feature-scss-functions.locomotive-boilerplate.pages.dev

View logs