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