postcss-ruler 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +33 -36
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,8 +2,19 @@
|
|
|
2
2
|
|
|
3
3
|
A PostCSS plugin that generates fluid CSS scales and values using the `clamp()` function. Create responsive typography and spacing that scales smoothly between viewport sizes.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
**Inspired by [Utopia](https://utopia.fyi/)**, but designed for real-world design collaboration. Instead of strict programmatic scales, postcss-ruler lets you define exact min and max pixel values for each size. This gives you the flexibility to match design specs from tools like Figma while still getting fluid scaling behavior.
|
|
6
|
+
|
|
7
|
+
## Why postcss-ruler?
|
|
8
|
+
|
|
9
|
+
Working with design teams often means dealing with sizes that don't follow perfect mathematical ratios. A designer might spec `16px → 24px` for one size and `32px → 56px` for another based on visual harmony rather than a type scale.
|
|
6
10
|
|
|
11
|
+
postcss-ruler embraces this reality. You get:
|
|
12
|
+
- **Fine-tuned control**: Set exact min and max values per size
|
|
13
|
+
- **Design tool compatibility**: Match your Figma specs precisely
|
|
14
|
+
- **Fluid behavior**: Smooth scaling between breakpoints via `clamp()`
|
|
15
|
+
- **Cross pairs**: Generate spacing between any two sizes (explained below)
|
|
16
|
+
|
|
17
|
+
## Installation
|
|
7
18
|
```bash
|
|
8
19
|
npm install postcss-ruler
|
|
9
20
|
```
|
|
@@ -11,7 +22,6 @@ npm install postcss-ruler
|
|
|
11
22
|
## Usage
|
|
12
23
|
|
|
13
24
|
Add the plugin to your PostCSS configuration:
|
|
14
|
-
|
|
15
25
|
```javascript
|
|
16
26
|
// postcss.config.js
|
|
17
27
|
module.exports = {
|
|
@@ -25,26 +35,11 @@ module.exports = {
|
|
|
25
35
|
}
|
|
26
36
|
```
|
|
27
37
|
|
|
28
|
-
Or in `.postcssrc`:
|
|
29
|
-
|
|
30
|
-
```json
|
|
31
|
-
{
|
|
32
|
-
"plugins": {
|
|
33
|
-
"postcss-ruler": {
|
|
34
|
-
"minWidth": 320,
|
|
35
|
-
"maxWidth": 1760,
|
|
36
|
-
"generateAllCrossPairs": false
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
```
|
|
41
|
-
|
|
42
38
|
## Features
|
|
43
39
|
|
|
44
40
|
### 1. At-Rule Mode: Generate Fluid Scale
|
|
45
41
|
|
|
46
42
|
Create multiple CSS custom properties from named size pairs:
|
|
47
|
-
|
|
48
43
|
```css
|
|
49
44
|
@ruler scale({
|
|
50
45
|
minWidth: 320,
|
|
@@ -62,7 +57,6 @@ Create multiple CSS custom properties from named size pairs:
|
|
|
62
57
|
```
|
|
63
58
|
|
|
64
59
|
**Generates:**
|
|
65
|
-
|
|
66
60
|
```css
|
|
67
61
|
--space-xs: clamp(0.5rem, 0.4545vw + 0.3636rem, 1rem);
|
|
68
62
|
--space-sm: clamp(1rem, 0.4545vw + 0.8636rem, 1.5rem);
|
|
@@ -71,19 +65,15 @@ Create multiple CSS custom properties from named size pairs:
|
|
|
71
65
|
--space-xl: clamp(3rem, 0.9091vw + 2.7273rem, 4rem);
|
|
72
66
|
```
|
|
73
67
|
|
|
74
|
-
|
|
68
|
+
### Understanding Cross Pairs
|
|
75
69
|
|
|
76
|
-
|
|
77
|
-
.container {
|
|
78
|
-
padding: var(--space-md);
|
|
79
|
-
gap: var(--space-sm);
|
|
80
|
-
}
|
|
81
|
-
```
|
|
70
|
+
Cross pairs create fluid values between any two sizes in your scale. This is useful for spacing that needs to span multiple steps.
|
|
82
71
|
|
|
83
|
-
|
|
72
|
+
For example, if you have `xs: [8, 16]` and `lg: [32, 48]`, a cross pair `xs-lg` would scale from `8px → 48px`. This gives you a larger range of motion than using `xs` or `lg` alone.
|
|
84
73
|
|
|
85
|
-
|
|
74
|
+
**Without cross pairs**, you only get the sizes you explicitly define.
|
|
86
75
|
|
|
76
|
+
**With `generateAllCrossPairs: true`**, you get every possible combination:
|
|
87
77
|
```css
|
|
88
78
|
@ruler scale({
|
|
89
79
|
prefix: 'space',
|
|
@@ -96,21 +86,29 @@ Enable `generateAllCrossPairs: true` to create additional combinations between a
|
|
|
96
86
|
});
|
|
97
87
|
```
|
|
98
88
|
|
|
99
|
-
**Generates
|
|
89
|
+
**Generates:**
|
|
90
|
+
```css
|
|
91
|
+
/* Your defined pairs */
|
|
92
|
+
--space-xs: clamp(0.5rem, ...);
|
|
93
|
+
--space-md: clamp(1.5rem, ...);
|
|
94
|
+
--space-lg: clamp(2rem, ...);
|
|
95
|
+
|
|
96
|
+
/* All cross combinations */
|
|
97
|
+
--space-xs-md: clamp(0.5rem, 1.3636vw + 0.3636rem, 2rem); /* 8px → 32px */
|
|
98
|
+
--space-xs-lg: clamp(0.5rem, 2.2727vw + 0.3636rem, 3rem); /* 8px → 48px */
|
|
99
|
+
--space-md-lg: clamp(1.5rem, 0.9091vw + 1.3636rem, 3rem); /* 24px → 48px */
|
|
100
|
+
```
|
|
100
101
|
|
|
102
|
+
**Use case**: Section padding that needs more dramatic scaling than your base sizes allow.
|
|
101
103
|
```css
|
|
102
|
-
|
|
103
|
-
--space-md
|
|
104
|
-
|
|
105
|
-
--space-xs-md: clamp(0.5rem, 1.3636vw + 0.3636rem, 2rem);
|
|
106
|
-
--space-xs-lg: clamp(0.5rem, 2.2727vw + 0.3636rem, 3rem);
|
|
107
|
-
--space-md-lg: clamp(1.5rem, 0.9091vw + 1.3636rem, 3rem);
|
|
104
|
+
.hero {
|
|
105
|
+
padding-block: var(--space-md-xl); /* Scales across a wider range */
|
|
106
|
+
}
|
|
108
107
|
```
|
|
109
108
|
|
|
110
109
|
### 2. Inline Mode: Fluid Function
|
|
111
110
|
|
|
112
111
|
Convert individual values directly to `clamp()` functions:
|
|
113
|
-
|
|
114
112
|
```css
|
|
115
113
|
.element {
|
|
116
114
|
/* Uses default minWidth/maxWidth from config */
|
|
@@ -125,7 +123,6 @@ Convert individual values directly to `clamp()` functions:
|
|
|
125
123
|
```
|
|
126
124
|
|
|
127
125
|
**Generates:**
|
|
128
|
-
|
|
129
126
|
```css
|
|
130
127
|
.element {
|
|
131
128
|
font-size: clamp(1rem, 0.4545vw + 0.8636rem, 1.5rem);
|