1.0.6 ā¢ Published 1 year ago
fab-unit v1.0.6
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)
Ā
š 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
}
Ā
š¬ 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)
Ā
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;
}
Ā
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