typographics 3.2.0-dev.0 → 3.2.0
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 +67 -20
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -5,22 +5,21 @@
|
|
|
5
5
|
[](https://www.npmjs.com/package/typographics)
|
|
6
6
|
[](https://github.com/ux-ui-pro/typographics)
|
|
7
7
|
[](https://www.npmjs.org/package/typographics)
|
|
8
|
-
|
|
9
8
|
</div>
|
|
10
9
|
|
|
11
10
|
<p align="center">typographics provides flexible and adaptive typography primitives. It fluidly scales root font size between breakpoints and maintains a consistent vertical rhythm using a baseline grid.</p>
|
|
12
11
|
<p align="center"><a href="https://codepen.io/ux-ui/pen/BavYXRz">Demo</a></p>
|
|
13
|
-
<br>
|
|
14
12
|
|
|
15
|
-
|
|
13
|
+
<br>
|
|
16
14
|
|
|
15
|
+
# Install
|
|
17
16
|
```console
|
|
18
17
|
$ yarn add typographics
|
|
19
18
|
```
|
|
20
|
-
<br>
|
|
21
19
|
|
|
22
|
-
|
|
20
|
+
<br>
|
|
23
21
|
|
|
22
|
+
# Import
|
|
24
23
|
```javascript
|
|
25
24
|
import 'typographics/dist/index.css';
|
|
26
25
|
```
|
|
@@ -28,27 +27,64 @@ import 'typographics/dist/index.css';
|
|
|
28
27
|
```scss
|
|
29
28
|
@use "typographics/dist/index.css" as *;
|
|
30
29
|
```
|
|
30
|
+
|
|
31
31
|
<br>
|
|
32
32
|
|
|
33
|
-
|
|
33
|
+
# Quick start
|
|
34
|
+
|
|
35
|
+
Start by defining your fluid range (breakpoints) and the body/heading size endpoints on `:root`:
|
|
36
|
+
|
|
37
|
+
```css
|
|
38
|
+
:root {
|
|
39
|
+
/* Fluid range (px) */
|
|
40
|
+
--t-font-scale-min-width: 600;
|
|
41
|
+
--t-font-scale-max-width: 1440;
|
|
42
|
+
|
|
43
|
+
/* Base fluid sizes (scales of 1rem) */
|
|
44
|
+
--t-body-font-size-min-scale: 0.875;
|
|
45
|
+
--t-body-font-size-max-scale: 1.125;
|
|
46
|
+
--t-heading-font-size-min-scale: 1;
|
|
47
|
+
--t-heading-font-size-max-scale: 1.25;
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
If you need “make everything smaller/bigger” without changing endpoints, use `--t-body-scale` / `--t-heading-scale` globally or per-container.
|
|
52
|
+
|
|
53
|
+
<br>
|
|
54
|
+
|
|
55
|
+
# Settings
|
|
34
56
|
|
|
35
57
|
The following CSS Custom Properties control the behavior of the system.
|
|
36
58
|
|
|
37
|
-
###
|
|
59
|
+
### Fluid range (breakpoints)
|
|
38
60
|
|
|
39
|
-
| Variable
|
|
40
|
-
|
|
41
|
-
| `--t-
|
|
42
|
-
| `--t-font-
|
|
43
|
-
| `--t-font-size-max-scale` | `1` | Maximum root font-size scale (end of fluid range). |
|
|
44
|
-
| `--t-font-scale-min-width` | `600` | Viewport width (px) where scaling starts. |
|
|
45
|
-
| `--t-font-scale-max-width` | `1440` | Viewport width (px) where scaling stops. |
|
|
46
|
-
| `--t-line-height-body` | `1.5` | Default line-height for body text. |
|
|
47
|
-
| `--t-line-height-heading` | `1.3` | Line-height for headings (unitless). |
|
|
61
|
+
| Variable | Default | Description |
|
|
62
|
+
|:----------------------------|:-------:|:-------------------------------------------|
|
|
63
|
+
| `--t-font-scale-min-width` | `600` | Viewport width (px) where scaling starts. |
|
|
64
|
+
| `--t-font-scale-max-width` | `1440` | Viewport width (px) where scaling stops. |
|
|
48
65
|
|
|
49
|
-
> The library computes `--t-font-size-clamp` from these values to fluidly scale
|
|
66
|
+
> The library computes `--t-body-font-size-clamp` and `--t-heading-font-size-clamp` from these values to fluidly scale typography between breakpoints.
|
|
50
67
|
>
|
|
51
|
-
> Viewport units:
|
|
68
|
+
> Viewport units: scaling uses `100vw` by default and switches to `100lvw` in supporting browsers for more stable mobile behavior.
|
|
69
|
+
|
|
70
|
+
### Typography defaults
|
|
71
|
+
|
|
72
|
+
| Variable | Default | Description |
|
|
73
|
+
|:--------------------------|:-----------------------------------------------------------------------------------:|:-------------------------------------|
|
|
74
|
+
| `--t-base-font-family` | `system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif` | Base font-family for body text. |
|
|
75
|
+
| `--t-line-height-body` | `1.5` | Default line-height for body text. |
|
|
76
|
+
| `--t-line-height-heading` | `1.3` | Line-height for headings (unitless). |
|
|
77
|
+
|
|
78
|
+
### Base fluid sizes (body/headings)
|
|
79
|
+
|
|
80
|
+
These variables define the endpoints of the fluid range for body text and headings. They are expressed as scales of `1rem`.
|
|
81
|
+
|
|
82
|
+
| Variable | Default | Description |
|
|
83
|
+
|:-----------------------------------|:-------:|:-------------------------------------------------|
|
|
84
|
+
| `--t-body-font-size-min-scale` | `0.875` | Minimum body font-size scale (at min width). |
|
|
85
|
+
| `--t-body-font-size-max-scale` | `1.125` | Maximum body font-size scale (at max width). |
|
|
86
|
+
| `--t-heading-font-size-min-scale` | `1` | Minimum heading font-size scale (at min width). |
|
|
87
|
+
| `--t-heading-font-size-max-scale` | `1.25` | Maximum heading font-size scale (at max width). |
|
|
52
88
|
|
|
53
89
|
### Typography scaling (global/local)
|
|
54
90
|
|
|
@@ -59,7 +95,9 @@ These variables allow you to tweak overall typography sizes (e.g. “everything
|
|
|
59
95
|
| `--t-body-scale` | `1` | Multiplier for body/paragraph/list/font-size rules. |
|
|
60
96
|
| `--t-heading-scale` | `1` | Multiplier for heading font-size rules. |
|
|
61
97
|
|
|
62
|
-
|
|
98
|
+
<br>
|
|
99
|
+
|
|
100
|
+
# Examples
|
|
63
101
|
|
|
64
102
|
Global scale:
|
|
65
103
|
|
|
@@ -95,6 +133,15 @@ Example for `.headline-medium`:
|
|
|
95
133
|
}
|
|
96
134
|
```
|
|
97
135
|
|
|
136
|
+
**Note on `--t-heading-scale`:** When you provide `--t-<key>-min/max`, you override the computed endpoints, so `--t-heading-scale` will not automatically affect that style. If you want the global scale to apply, multiply it yourself:
|
|
137
|
+
|
|
138
|
+
```css
|
|
139
|
+
.headline-medium {
|
|
140
|
+
--t-headline-medium-min: calc(28px * var(--t-heading-scale, 1));
|
|
141
|
+
--t-headline-medium-max: calc(34px * var(--t-heading-scale, 1));
|
|
142
|
+
}
|
|
143
|
+
```
|
|
144
|
+
|
|
98
145
|
Available keys:
|
|
99
146
|
|
|
100
147
|
- `display-large`, `display-medium`, `display-small`
|
|
@@ -149,6 +196,6 @@ These properties customize fenced code blocks (`pre`):
|
|
|
149
196
|
| `--t-code-block-border-radius` | `0.6rem` | Corner radius. |
|
|
150
197
|
<br>
|
|
151
198
|
|
|
152
|
-
|
|
199
|
+
# License
|
|
153
200
|
|
|
154
201
|
typographics is released under the MIT license.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "typographics",
|
|
3
|
-
"version": "3.2.0
|
|
3
|
+
"version": "3.2.0",
|
|
4
4
|
"description": "typographics provides flexible and adaptive styles for typography on web pages. This package allows you to automate the resizing of fonts based on screen width, ensuring good readability on any device.",
|
|
5
5
|
"author": "ux-ui.pro",
|
|
6
6
|
"license": "MIT",
|