FabUnit 🪄

FabUnit is a Sass function that helps you to define a perfectly responsive value without any effort. It takes a minimum and an optimum value, spits out a calculation to your css property, considering the screen width, aspect ratio and the specified anchor points. No media queries, no break points, no design jumps. A formula that controls and synchronises your whole project.

fab-unit(12, 16); 🪄

↓ Features
↓ Install
↓ Use
↓ Options
↓ Links

💚 Features

• takes min and opt value
• 4 customisable anchor points
• improved tablet view (stretch opt screen)
• auto max size, depending on the last anchor point (wrapper)
• considers aspect ratio

size
|                                     ○ • • •
|                               •     |
|                 ○ • • • ◉           |
|           •     |       |           |
| • • ◉           |       |           |
|     |           |       |           |
|     |     ≈     |       |     ≈     |
■---min---fluid---opt---opt---fluid---max----- screen
          m=auto               m=1
      |            |      |           |
      Mobile              Desktop     Wrapper
      Design              Design      (optional)

→ FabUnit Visualiser

📀 Install

npm i fab-unit

@import "fab-unit";

html {
  font-size: calc(100% * (#{strip-units($fab-rem-base)} / 16)); // px to rem
}

🚀 Use

body {
    font-size: fab-unit(16, 22); // min, opt
}

→ Example CodeSandbox

🍬 Options

| Variable | Description | Default | | -------- | ----------- | ------- | | $fab-screen-min | anchor point mobile | 375 | $fab-screen-opt-start | anchor point desktop (from …) | 1024 | $fab-screen-opt-end | anchor point desktop (… to) | 1440 | $fab-screen-max | anchor point max layout wrapper | 1800* | $fab-aspect-ratio | aspect ratio factor (improvement for wider screens) | math.div(16, 9)

* set to false if no max wrapper is needed (elastic upwards)

→ FabUnit Visualiser

Overwrite default values globally

$fab-screen-min: 300;
$fab-screen-opt-start: 768;
$fab-screen-opt-end: 1024;
$fab-screen-max: 2000;
$fab-aspect-ratio: math.div(3, 2);

body {
    font-size: fab-unit(16, 22); // min, opt
}

h1 {
  font-size: fab-unit(36, 60);
  margin-block: fab-unit(10, 16);
}

.wrapper {
  max-width: rem($fab-screen-max);
  margin-inline: auto;
}

→ Example CodeSandbox

Set custom arguments locally (exceptionally)

.thing {
    /* min, opt, custom anchor points, aspect ratio 🪄 */
    height: fab-unit(16, 22, 300, 768, 1024, 2000, math.div(4, 3));
}

🔥 Links

→ FabUnit Visualiser
→ Example CodeSandbox
→ Article Smashing Magazine