https://github.com/tobua/optica
Responsively scaling CSS style properties for JavaScript.
https://github.com/tobua/optica
Last synced: 3 months ago
JSON representation
Responsively scaling CSS style properties for JavaScript.
- Host: GitHub
- URL: https://github.com/tobua/optica
- Owner: tobua
- Created: 2024-02-04T17:26:11.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-11T20:26:09.000Z (about 1 year ago)
- Last Synced: 2024-10-22T16:15:16.277Z (7 months ago)
- Language: TypeScript
- Homepage:
- Size: 17.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# optica
Responsively scaling CSS properties for JavaScript, successor to [wasser](https://github.com/tobua/wasser). Linearly scales a value between a minimum and a maximum breakpoint. Requires only the CSS [`clamp`](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp) function, no breakpoints.
## Usage
```tsx
import React from 'react'
import { createRoot } from 'react-dom/client'
import { scale } from 'optica'
createRoot(document.body).render(
Title
Description
,
)
```
The plugin will convert `scale(15)` into `clamp(10px, calc(8.65px + 0.42vw), 15px)` which will ensure any sized CSS property will linearly scale between `10px` for the `minimumViewport` (320px) and `15px` for the `maximumViewport` (1500px).
## Configuration
By default values will scale between the `320px` and the `1500px` breakpoint with a scaling factor of `1.5`. The `scale` method can additionally receive a custom scaling factor as the second argument.
```tsx
import { configure, scale } from 'optica'
configure({
minimumViewport: 400, // Default 320
maximumViewport: 1200, // Default 1500
scalingFactor: 2, // Default: 1.5
})
const MyCustomText = () => // 9px - 18px instead of 12px - 18px
```
`scale(maximumSize: number, scalingFactorOrMinimumSize: number)` also takes a second argument. Depending on the size it's either a `scalingFactor` or an explicit `minimumSize`.
```ts
scale(18, 3) // scaleFactor of 3: 6px - 18px
scale(18, 1.2) // scaleFactor of 1.2: 15px - 18px
scale(18, 12) // minimumSize of 12: 12px - 18px
scale(18, 16) // minimumSize of 16: 16px - 18px
```