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}	₃₇₅
_{$fab-screen-opt-start}	_{anchor point desktop (from …)}	₁₀₂₄
_{$fab-screen-opt-end}	_{anchor point desktop (… to)}	₁₄₄₀
_{$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

bummzack / fab-unit