prewindcss 1.2.3 → 1.2.4

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.
Files changed (7) hide show
  1. package/README.md +37 -52
  2. package/example-site/index.html +1 -1
  3. package/example-site/{css/theme.css → theme.css} +8 -6
  4. package/package.json +1 -1
  5. package/prewind.css +2 -2
  6. package/theme.css +6 -5
  7. /package/example-site/{css/styles.css → styles.css} +0 -0
package/README.md CHANGED
@@ -20,69 +20,42 @@ This approach keeps your HTML readable. You won't end up with 30 classes on a si
20
20
 
21
21
  Prewind works with the platform, not around it. CSS already has a cascade, variables, and specificity rules that work well — we don't need to reinvent them.
22
22
 
23
- ## Installation
23
+ ## Getting Started
24
24
 
25
- ### 1. Load Prewind
26
-
27
- Load Prewind from a CDN or host it yourself:
28
-
29
- ```html
30
- <link rel="stylesheet" href="https://unpkg.com/prewindcss@1.2.3" />
31
- ```
32
-
33
- ### 2. The included reset
34
-
35
- Prewind includes a minimal CSS reset in the `reset` layer. It sets `box-sizing: border-box` on all elements, removes default margins and padding, makes images block-level and responsive, inherits fonts on form elements, and removes default button and link styling. You can see the full reset at the top of [prewind.css](https://github.com/codepilotsf/prewind/blob/main/prewind.css).
36
-
37
- ### 3. Define your theme variables
38
-
39
- Prewind's utility classes reference CSS variables for colors, spacing, fonts, and other design tokens. You need to define these variables somewhere in your CSS — either in a separate file, or at the top of your global stylesheet.
40
-
41
- You can get the default theme by running `npx prewindcss theme` (copies to clipboard), or copy it from the [repository](https://github.com/codepilotsf/prewind/blob/main/theme.css) and customize it.
42
-
43
- ```css
44
- :root {
45
- --brand-1: #0284c7;
46
- --font-body: "Inter", system-ui, sans-serif;
47
- --space-md: 1.5rem;
48
- /* ... see Theming section for full list */
49
- }
50
- ```
51
-
52
- However you organize it, just make sure these variables are defined somewhere in your CSS.
53
-
54
- ### 4. Set up CSS layers
55
-
56
- Prewind uses CSS layers to manage the cascade. Utility classes should win over your component styles, so you want to define your layers with `prewind` last.
57
-
58
- Your main CSS file should declare the layer order first, then import your theme and Prewind, then define your styles:
25
+ Create a `styles.css` file that sets up CSS layers, imports your theme and Prewind, and contains your global styles:
59
26
 
60
27
  ```css
61
28
  @layer reset, styles, prewind;
62
29
 
63
- @import url("https://unpkg.com/prewindcss");
64
30
  @import url("theme.css");
31
+ @import url("https://unpkg.com/prewindcss@1.2.4");
65
32
 
66
33
  @layer styles {
67
- .nav-link {
68
- color: var(--brand-1);
69
- font-weight: var(--font-bold);
70
- }
71
-
72
- .card {
34
+ body {
35
+ font-family: var(--font-body);
36
+ color: var(--black);
73
37
  background: var(--white);
74
- border-radius: var(--rounded-lg);
75
38
  }
39
+
40
+ /* Your global styles go here */
76
41
  }
77
42
  ```
78
43
 
79
- Then your HTML only needs a single stylesheet link:
44
+ Then link to it in your HTML:
80
45
 
81
46
  ```html
82
- <link rel="stylesheet" href="css/styles.css" />
47
+ <link rel="stylesheet" href="styles.css" />
83
48
  ```
84
49
 
85
- You can rename the `styles` layer or add more layers between `reset` and `prewind` — just make sure all of your layers are in the middle, between `reset` and `prewind`.
50
+ That's it. The layer order ensures Prewind utility classes override your global styles when you need them to.
51
+
52
+ ### The theme file
53
+
54
+ The `theme.css` import contains CSS variables for colors, spacing, fonts, and other design tokens. Run `npx prewindcss theme` to copy the default theme to your clipboard, then save it as `theme.css` and customize as needed. See the [Theming](#theming) section for details on all available variables.
55
+
56
+ ### The included reset
57
+
58
+ Prewind includes a minimal CSS reset in the `reset` layer. It sets `box-sizing: border-box` on all elements, removes default margins and padding, makes images block-level and responsive, inherits fonts on form elements, and removes default button and link styling. You can see the full reset at the top of [prewind.css](https://github.com/codepilotsf/prewind/blob/main/prewind.css).
86
59
 
87
60
  ## Theming
88
61
 
@@ -173,18 +146,30 @@ Prewind intentionally excludes some things to stay lightweight and encourage bet
173
146
 
174
147
  The goal is useful utilities for most of what you need, most of the time — not coverage of every edge case.
175
148
 
149
+ ### Prewind-Only Classes
150
+
151
+ These utility classes are unique to Prewind or behave differently than their Tailwind counterparts:
152
+
153
+ - **`container`** — Uses CSS `clamp()` for fluid responsive width, unlike Tailwind's breakpoint-based container.
154
+ - **`max-w-text`** — Constrains width for optimal reading measure.
155
+ - **`max-w-form`** — Constrains width for form layouts.
156
+ - **`debug`** — Adds a dashed lime outline and subtle green background to visualize layout boundaries during development.
157
+ - **`revert`** — Resets all CSS properties to browser defaults using `all: revert`.
158
+ - **`bg-opacity-{n}`** — Controls background opacity with values ranging from 0 to 100 in increments of 10.
159
+ - **`font-body`**, **`font-heading`** — Prewind uses semantic font family names instead of Tailwind's `font-sans`, `font-serif`, `font-mono`.
160
+
176
161
  ---
177
162
 
178
163
  ## Reference
179
164
 
180
165
  ### General
181
166
 
182
- | Class | Property |
183
- | ----------------- | ----------------------------------------------------------------------------------------- |
184
- | `container` | `margin-inline: auto; padding-inline: var(--space-lg); width: clamp(360px, 100%, 1600px)` |
185
- | `revert` | `all: revert` |
186
- | `debug` | `outline: 2px dashed lime; outline-offset: -2px; background: rgba(0, 255, 0, 0.05)` |
187
- | `appearance-none` | `appearance: none` |
167
+ | Class | Property |
168
+ | ----------------- | --------------------------------------------------------------------------------------------------------- |
169
+ | `container` | `margin-inline: auto; padding: var(--container-padding); width: clamp(360px, 100%, var(--container-max))` |
170
+ | `revert` | `all: revert` |
171
+ | `debug` | `outline: 2px dashed lime; outline-offset: -2px; background: rgba(0, 255, 0, 0.05)` |
172
+ | `appearance-none` | `appearance: none` |
188
173
 
189
174
  ### Accessibility
190
175
 
package/example-site/index.html CHANGED
@@ -4,7 +4,7 @@
4
4
  <meta charset="UTF-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
  <title>Prewind Example</title>
7
- <link rel="stylesheet" href="css/styles.css" />
7
+ <link rel="stylesheet" href="styles.css" />
8
8
  </head>
9
9
  <body>
10
10
  <div class="site-container">
package/example-site/{css/theme.css → theme.css} RENAMED
@@ -1,10 +1,10 @@
1
1
  /*
2
2
  ----------------------------------------
3
- Theme - Utility classes
3
+ Prewind Theme
4
+ https://github.com/codepilotsf/prewind
4
5
  ----------------------------------------
5
6
  */
6
7
 
7
- /* Fonts */
8
8
  @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800&display=swap");
9
9
 
10
10
  :root {
@@ -57,10 +57,12 @@
57
57
 
58
58
  /* Shadow */
59
59
  --shadow: 0 4px 4px 1px rgb(0 0 0 / 0.15), 0 2px 4px -2px rgb(0 0 0 / 0.25);
60
- --shadow-sm:
61
- 0 2px 3px -0.5px rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
62
- --shadow-lg:
63
- 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
60
+ --shadow-sm: 0 2px 3px -0.5px rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
61
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
62
+
63
+ /* Container */
64
+ --container-max: 1200px;
65
+ --container-padding: 0 var(--space-lg);
64
66
 
65
67
  /* Width Constraints */
66
68
  --max-w-text: 80ch;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "prewindcss",
3
- "version": "1.2.3",
3
+ "version": "1.2.4",
4
4
  "description": "Lightweight, no-build Tailwind alternative",
5
5
  "type": "module",
6
6
  "main": "prewind.css",
package/prewind.css CHANGED
@@ -72,8 +72,8 @@
72
72
  /* Container */
73
73
  .container {
74
74
  margin-inline: auto;
75
- padding-inline: var(--space-lg);
76
- width: clamp(360px, 100%, 1600px);
75
+ padding: var(--container-padding);
76
+ width: clamp(360px, 100%, var(--container-max));
77
77
  }
78
78
 
79
79
  /* Accessibility */
package/theme.css CHANGED
@@ -5,7 +5,6 @@
5
5
  ----------------------------------------
6
6
  */
7
7
 
8
- /* Fonts */
9
8
  @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800&display=swap");
10
9
 
11
10
  :root {
@@ -58,10 +57,12 @@
58
57
 
59
58
  /* Shadow */
60
59
  --shadow: 0 4px 4px 1px rgb(0 0 0 / 0.15), 0 2px 4px -2px rgb(0 0 0 / 0.25);
61
- --shadow-sm:
62
- 0 2px 3px -0.5px rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
63
- --shadow-lg:
64
- 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
60
+ --shadow-sm: 0 2px 3px -0.5px rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
61
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
62
+
63
+ /* Container */
64
+ --container-max: 1200px;
65
+ --container-padding: 0 var(--space-lg);
65
66
 
66
67
  /* Width Constraints */
67
68
  --max-w-text: 80ch;
/package/example-site/{css/styles.css → styles.css} RENAMED
File without changes