raiponce

Set of tools for responsive and modern designs

Usage no npm install needed!

<script type="module">
  import raiponce from 'https://cdn.skypack.dev/raiponce';
</script>

README

Raiponce

The repo contains a set of functions and utils for SASS.
Plus, a documentation is available with some good practices.

Install

npm install raiponce

In your scss file (with module resolver):

@use 'raiponce';

Getting started

This quick example showcases a fluid font size from 12px to 24px.

/* input.scss */
p {
  font-size: raiponce.lerp((768px: 12px, 1920px: 24px));
}
/* output.css */
p {
    font-size: clamp(12px, 1.0416666667vw + 4px, 24px);
}

Run tests

Tests are made using sass-true.
You can clone this repo and run:

pnpm test

Example

You can run locally the example with:

pnpm example