https://github.com/faboolea/fab-unit
A Sass function that helps you to define a perfectly responsive value without any effort
https://github.com/faboolea/fab-unit
css fab-unit responsive scss
Last synced: about 1 year ago
JSON representation
A Sass function that helps you to define a perfectly responsive value without any effort
- Host: GitHub
- URL: https://github.com/faboolea/fab-unit
- Owner: Faboolea
- License: mit
- Created: 2022-11-25T13:54:49.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-12-06T06:45:48.000Z (over 3 years ago)
- Last Synced: 2025-03-23T18:50:18.663Z (over 1 year ago)
- Topics: css, fab-unit, responsive, scss
- Language: SCSS
- Homepage: https://www.npmjs.com/package/fab-unit
- Size: 10.7 KB
- Stars: 30
- Watchers: 2
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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.
```scss
fab-unit(12, 16); 🪄
```
[↓ Features](#-features)
[↓ Install](#-install)
[↓ Use](#-use)
[↓ Options](#-options)
[↓ Links](#-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](https://codepen.io/Faboolea/live/yLvGMqZ/ed43660a7931e55b2fb2ec35d18e7f8c)
## 📀 Install
```bash
npm i fab-unit
```
```scss
@import "fab-unit";
html {
font-size: calc(100% * (#{strip-units($fab-rem-base)} / 16)); // px to rem
}
```
## 🚀 Use
```scss
body {
font-size: fab-unit(16, 22); // min, opt
}
```
[→ Example CodeSandbox](https://codesandbox.io/s/fabunit-ow8wjr?file=/src/styles.scss)
## 🍬 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](https://codepen.io/Faboolea/live/yLvGMqZ/ed43660a7931e55b2fb2ec35d18e7f8c)
### Overwrite default values globally
```scss
$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](https://codesandbox.io/s/fabunit-ow8wjr?file=/src/styles.scss)
### Set custom arguments locally (exceptionally)
```scss
.thing {
/* min, opt, custom anchor points, aspect ratio 🪄 */
height: fab-unit(16, 22, 300, 768, 1024, 2000, math.div(4, 3));
}
```
## 🔥 Links
[→ FabUnit Visualiser](https://codepen.io/Faboolea/live/yLvGMqZ/ed43660a7931e55b2fb2ec35d18e7f8c)
[→ Example CodeSandbox](https://codesandbox.io/s/fabunit-ow8wjr?file=/src/styles.scss)
[→ Article Smashing Magazine](https://www.smashingmagazine.com/2022/12/fabunit-smart-way-control-synchronize-typo-space/)