Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thedroelfi/postcss-responsive-css-values
This PostCSS plugin provides you with a function that allows you to use dynamic values instead of static CSS values, which are automatically reduced from a defined breakpoint.
https://github.com/thedroelfi/postcss-responsive-css-values
css css-values postcss postcss-plugin responsive-design responsive-web-design
Last synced: about 20 hours ago
JSON representation
This PostCSS plugin provides you with a function that allows you to use dynamic values instead of static CSS values, which are automatically reduced from a defined breakpoint.
- Host: GitHub
- URL: https://github.com/thedroelfi/postcss-responsive-css-values
- Owner: thedroelfi
- License: mit
- Created: 2025-02-13T09:53:15.000Z (2 days ago)
- Default Branch: main
- Last Pushed: 2025-02-13T14:16:19.000Z (2 days ago)
- Last Synced: 2025-02-13T15:13:42.620Z (2 days ago)
- Topics: css, css-values, postcss, postcss-plugin, responsive-design, responsive-web-design
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/postcss-responsive-css-values
- Size: 11.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# PostCSS Responsive CSS Values
This PostCSS plugin provides you with the `res-val()` function, which allows you to use dynamic values instead of static CSS values that are automatically reduced from a certain breakpoint.
The function receives three values: Min, Max and a breakpoint. As long as the page width is greater than or equal to the breakpoint, it outputs the max value. As soon as the page width falls below the breakpoint, the value is scaled proportionally to the width until the Min value is reached.
> The function currently only works with pixel values.
## Example & Usage
In the `res-val()` function, the **first** value is always the `minimum value (Min)`, the **second** value is the `maximum value (Max)`. The **third** value is the `breakpoint`, which will be discussed below.
**In your CSS input file:**
```css
.heading {
font-size: res-val(32, 60, 1200);
}
```
**The CSS output:**
```css
.heading {
font-size: clamp(32px, 100vw * (60 / 1200), 60px);
}
```
This causes the `.heading` class to have a font size of `60px`. As soon as the page width is smaller than `1200px`, the font size is reduced in relation to the page width until a size of `32px` is reached.
The function can of course be used on all CSS specifications that can work with pixel values. Width, Height, Margin, Pudding etc. All values that are needed to smoothly scale a layout smaller without media queries.
## Installation
To use the plugin, it can either be installed via npm or the `index.js` must be inserted into the development environment.
If the script is inserted manually, the `index.js` script must be renamed to `postcss-responsive-css-values.js`.
### PostCSS registration
In order for the plugin to be used in the PostCSS build process, it must be registered in the PostCSS config file.
```js
export default {
plugins: {
"postcss-responsive-css-values": {},
}
}
```
## Breakpoints
The `default breakpoint` for the script is `769px`. This default breakpoint is always used if no separate breakpoint is specified in the respective `res-val()` function.
If a breakpoint is specified in a `res-val()` function, it is only used for this function.
### Function without its own breakpoint
This function will use the default breakpoint
```css
.wrapper {
width: res-val(1000, 1600);
}
```
### Function with its own breakpoint
```css
.wrapper {
width: res-val(1000, 1600, 1300);
}
```
### Overwrite default breakpoint
You can also define the default breakpoint yourself. This must be specified in the PostCSS config as follows:
```js
export default {
plugins: {
'postcss-responsive-css-values': { breakpoint: '1920' },
}
}
```
In this example, the breakpoint would be set to 1920px.