Skip to content

A Sass function that helps you to define a perfectly responsive value without any effort

License

Notifications You must be signed in to change notification settings

Faboolea/fab-unit

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

A Sass function that helps you to define a perfectly responsive value without any effort

Topics

Resources

License

Stars

Watchers

Forks

Languages