clampography 0.9.7 → 0.9.8
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 +26 -10
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,22 +1,38 @@
|
|
|
1
1
|
# 🙌 Clampography
|
|
2
2
|
|
|
3
|
-
**Clampography** is a CSS
|
|
4
|
-
[Tailwind CSS Typography plugin](https://github.com/tailwindlabs/tailwindcss-typography).
|
|
5
|
-
Instead of fixed sizes, it uses the CSS
|
|
3
|
+
**Clampography** is a pure CSS typography system that uses the
|
|
6
4
|
[clamp()](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/clamp)
|
|
7
|
-
function
|
|
5
|
+
function for fluid, responsive text scaling. It's designed as an alternative to
|
|
6
|
+
[@tailwindcss/typography](https://github.com/tailwindlabs/tailwindcss-typography),
|
|
7
|
+
but works with or without [Tailwind CSS](https://tailwindcss.com/). With
|
|
8
8
|
[94% global browser support](https://caniuse.com/css-math-functions), it works
|
|
9
|
-
on nearly all devices.
|
|
10
|
-
|
|
11
|
-
Built for [Tailwind v4's](https://tailwindcss.com/blog/tailwindcss-v4) CSS-first
|
|
12
|
-
architecture. Zero JavaScript configuration required. Best suited for blogs,
|
|
13
|
-
documentation, and content-heavy websites.
|
|
9
|
+
on nearly all modern devices.
|
|
14
10
|
|
|
15
11
|
- **No default styling:** No colors, borders, transforms, or decorations.
|
|
16
12
|
- **Structure only:** Manages size, spacing, weight, and font-family.
|
|
17
13
|
- **Smart scaling:** Contextual elements use `em` (relative), blocks use
|
|
18
14
|
`clamp()` (fluid).
|
|
19
15
|
|
|
16
|
+
## The purpose
|
|
17
|
+
|
|
18
|
+
CSS resets like [Tailwind's Preflight](https://tailwindcss.com/docs/preflight)
|
|
19
|
+
remove all browser typography defaults, leaving you with unstyled text.
|
|
20
|
+
**Clampography** delivers production-ready text scaling that responds to
|
|
21
|
+
viewport changes automatically, while leaving all aesthetic choices to you.
|
|
22
|
+
Visit the temporary [demo page](https://next.dav.one/clampography/) to see how
|
|
23
|
+
it looks.
|
|
24
|
+
|
|
25
|
+
## Requirements
|
|
26
|
+
|
|
27
|
+
Use [Vite](https://vitejs.dev/), [Webpack](https://webpack.js.org/), or similar
|
|
28
|
+
build tool for CSS bundling. Popular frameworks like
|
|
29
|
+
[Astro](https://astro.build/), [Next.js](https://nextjs.org/),
|
|
30
|
+
[Remix](https://remix.run/), and
|
|
31
|
+
[SvelteKit](https://svelte.dev/docs/kit/introduction) include CSS bundling by
|
|
32
|
+
default and work seamlessly with **Clampography**. Without a build tool, native
|
|
33
|
+
CSS `@import` combined with `@layer` has about 91% browser coverage and only
|
|
34
|
+
works in browsers released since early 2022.
|
|
35
|
+
|
|
20
36
|
## Installation
|
|
21
37
|
|
|
22
38
|
```bash
|
|
@@ -42,7 +58,7 @@ deno install npm:clampography
|
|
|
42
58
|
/* Then import Clampography */
|
|
43
59
|
@import "clampography";
|
|
44
60
|
|
|
45
|
-
/*
|
|
61
|
+
/* Then you can override Clampography's base styles */
|
|
46
62
|
@layer base {
|
|
47
63
|
h1 {
|
|
48
64
|
font-size: clamp(2.35rem, 1.95rem + 1.5vw, 4rem);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "clampography",
|
|
3
|
-
"version": "0.9.
|
|
3
|
+
"version": "0.9.8",
|
|
4
4
|
"description": "Fluid typography system based on CSS clamp() for Tailwind CSS v4. Alternative to Tailwind CSS Typography plugin.",
|
|
5
5
|
"main": "clampography.css",
|
|
6
6
|
"style": "clampography.css",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"type": "git",
|
|
37
37
|
"url": "https://github.com/Avaray/clampography.git"
|
|
38
38
|
},
|
|
39
|
-
"homepage": "https://dav.one/clampography",
|
|
39
|
+
"homepage": "https://next.dav.one/clampography/",
|
|
40
40
|
"author": "Dawid Wąsowski",
|
|
41
41
|
"license": "MIT"
|
|
42
42
|
}
|