prewindcss 1.2.1 → 1.2.3
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 +22 -12
- package/example-site/css/styles.css +145 -0
- package/example-site/css/theme.css +103 -0
- package/example-site/index.html +87 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
A lightweight CSS utility library with no build step. Prewind provides the most useful utilities for everyday styling while encouraging a simpler, more maintainable approach to CSS. The entire library is ~7KB gzipped. No build step, no purging, no tree-shaking — just one CSS file.
|
|
4
4
|
|
|
5
|
+
If you know Tailwind, you already know Prewind. The utilities you reach for every day — flex, padding, margin, text color, background, borders, rounded corners, shadows — they're all here with the same class names. The only difference: use t-shirt sizes (`p-md`, `gap-lg`) instead of arbitrary numbers. Skip the animations and complex state variants, and you'll find that most of what you actually type in Tailwind works exactly the same way.
|
|
6
|
+
|
|
5
7
|
Created by [Codepilot](https://codepilot.com). Inspired by [Tailwind CSS](https://tailwindcss.com) and [Utopia](https://utopia.fyi).
|
|
6
8
|
|
|
7
9
|
## Philosophy: Global First
|
|
@@ -25,14 +27,18 @@ Prewind works with the platform, not around it. CSS already has a cascade, varia
|
|
|
25
27
|
Load Prewind from a CDN or host it yourself:
|
|
26
28
|
|
|
27
29
|
```html
|
|
28
|
-
<link rel="stylesheet" href="https://unpkg.com/prewindcss@1.2.
|
|
30
|
+
<link rel="stylesheet" href="https://unpkg.com/prewindcss@1.2.3" />
|
|
29
31
|
```
|
|
30
32
|
|
|
31
|
-
### 2.
|
|
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
|
|
32
38
|
|
|
33
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.
|
|
34
40
|
|
|
35
|
-
You can
|
|
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.
|
|
36
42
|
|
|
37
43
|
```css
|
|
38
44
|
:root {
|
|
@@ -45,19 +51,18 @@ You can copy the [default theme](https://github.com/codepilotsf/prewind/blob/mai
|
|
|
45
51
|
|
|
46
52
|
However you organize it, just make sure these variables are defined somewhere in your CSS.
|
|
47
53
|
|
|
48
|
-
###
|
|
54
|
+
### 4. Set up CSS layers
|
|
49
55
|
|
|
50
|
-
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
|
|
51
|
-
|
|
52
|
-
```css
|
|
53
|
-
@layer reset, styles, prewind;
|
|
54
|
-
```
|
|
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.
|
|
55
57
|
|
|
56
|
-
|
|
58
|
+
Your main CSS file should declare the layer order first, then import your theme and Prewind, then define your styles:
|
|
57
59
|
|
|
58
60
|
```css
|
|
59
61
|
@layer reset, styles, prewind;
|
|
60
62
|
|
|
63
|
+
@import url("https://unpkg.com/prewindcss");
|
|
64
|
+
@import url("theme.css");
|
|
65
|
+
|
|
61
66
|
@layer styles {
|
|
62
67
|
.nav-link {
|
|
63
68
|
color: var(--brand-1);
|
|
@@ -71,6 +76,12 @@ Put this at the top of your main CSS file. Then wrap all of your own styles in t
|
|
|
71
76
|
}
|
|
72
77
|
```
|
|
73
78
|
|
|
79
|
+
Then your HTML only needs a single stylesheet link:
|
|
80
|
+
|
|
81
|
+
```html
|
|
82
|
+
<link rel="stylesheet" href="css/styles.css" />
|
|
83
|
+
```
|
|
84
|
+
|
|
74
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`.
|
|
75
86
|
|
|
76
87
|
## Theming
|
|
@@ -114,10 +125,9 @@ To generate custom fluid sizes for your project:
|
|
|
114
125
|
```bash
|
|
115
126
|
npx prewindcss text # Generate fluid typography scale
|
|
116
127
|
npx prewindcss space # Generate fluid spacing scale
|
|
117
|
-
npx prewindcss theme # Get default theme CSS variables
|
|
118
128
|
```
|
|
119
129
|
|
|
120
|
-
|
|
130
|
+
Each command launches an interactive configurator where you can adjust:
|
|
121
131
|
|
|
122
132
|
- Viewport range (min/max)
|
|
123
133
|
- Base size at each viewport
|
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
@layer reset, styles, prewind;
|
|
2
|
+
|
|
3
|
+
@import url("theme.css");
|
|
4
|
+
@import url("https://unpkg.com/prewindcss");
|
|
5
|
+
|
|
6
|
+
@layer styles {
|
|
7
|
+
body {
|
|
8
|
+
font-family: var(--font-body);
|
|
9
|
+
color: var(--black);
|
|
10
|
+
background: var(--white);
|
|
11
|
+
line-height: 1.5;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
h1,
|
|
15
|
+
h2,
|
|
16
|
+
h3 {
|
|
17
|
+
font-family: var(--font-heading);
|
|
18
|
+
font-weight: var(--font-bold);
|
|
19
|
+
line-height: 1.2;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
a {
|
|
23
|
+
color: var(--link);
|
|
24
|
+
text-decoration: underline;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
a:hover {
|
|
28
|
+
color: var(--brand-2);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/* Layout */
|
|
32
|
+
.site-container {
|
|
33
|
+
max-width: 1200px;
|
|
34
|
+
margin-inline: auto;
|
|
35
|
+
padding-inline: var(--space-lg);
|
|
36
|
+
padding-block: var(--space-xl);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
header {
|
|
40
|
+
margin-bottom: var(--space-xl);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
header h1 {
|
|
44
|
+
font-size: var(--text-3xl);
|
|
45
|
+
margin-bottom: var(--space-sm);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
header p {
|
|
49
|
+
font-size: var(--text-lg);
|
|
50
|
+
color: var(--midtone);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
main {
|
|
54
|
+
display: flex;
|
|
55
|
+
flex-direction: column;
|
|
56
|
+
gap: var(--space-lg);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
footer {
|
|
60
|
+
margin-top: var(--space-xl);
|
|
61
|
+
padding-top: var(--space-md);
|
|
62
|
+
border-top: var(--border) solid var(--light);
|
|
63
|
+
text-align: center;
|
|
64
|
+
color: var(--midtone);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/* Sections */
|
|
68
|
+
.section {
|
|
69
|
+
padding: var(--space-md);
|
|
70
|
+
border-radius: var(--rounded-lg);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.section-title {
|
|
74
|
+
font-size: var(--text-xl);
|
|
75
|
+
margin-bottom: var(--space-sm);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* Cards */
|
|
79
|
+
.card-grid {
|
|
80
|
+
display: flex;
|
|
81
|
+
flex-direction: column;
|
|
82
|
+
gap: var(--space-md);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
@media (min-width: 768px) {
|
|
86
|
+
.card-grid {
|
|
87
|
+
flex-direction: row;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.card {
|
|
92
|
+
flex: 1;
|
|
93
|
+
padding: var(--space-md);
|
|
94
|
+
background: var(--white);
|
|
95
|
+
border-radius: var(--rounded);
|
|
96
|
+
box-shadow: var(--shadow);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.card h3 {
|
|
100
|
+
font-size: var(--text-lg);
|
|
101
|
+
margin-bottom: var(--space-xs);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.card p {
|
|
105
|
+
color: var(--midtone);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
/* Buttons */
|
|
109
|
+
.button {
|
|
110
|
+
display: inline-block;
|
|
111
|
+
padding: var(--space-sm) var(--space-md);
|
|
112
|
+
border-radius: var(--rounded);
|
|
113
|
+
font-weight: var(--font-bold);
|
|
114
|
+
text-decoration: none;
|
|
115
|
+
cursor: pointer;
|
|
116
|
+
border: none;
|
|
117
|
+
color: var(--white);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.button-group {
|
|
121
|
+
display: flex;
|
|
122
|
+
flex-wrap: wrap;
|
|
123
|
+
gap: var(--space-sm);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
/* Typography demo */
|
|
127
|
+
.type-scale {
|
|
128
|
+
display: flex;
|
|
129
|
+
flex-direction: column;
|
|
130
|
+
gap: var(--space-xs);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
/* Color swatches */
|
|
134
|
+
.swatch-group {
|
|
135
|
+
display: flex;
|
|
136
|
+
flex-wrap: wrap;
|
|
137
|
+
gap: var(--space-sm);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.swatch {
|
|
141
|
+
padding: var(--space-xs) var(--space-sm);
|
|
142
|
+
border-radius: var(--rounded);
|
|
143
|
+
color: var(--white);
|
|
144
|
+
}
|
|
145
|
+
}
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
/*
|
|
2
|
+
----------------------------------------
|
|
3
|
+
Theme - Utility classes
|
|
4
|
+
----------------------------------------
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
/* Fonts */
|
|
8
|
+
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800&display=swap");
|
|
9
|
+
|
|
10
|
+
:root {
|
|
11
|
+
/* Fonts */
|
|
12
|
+
--font-body: "Inter", system-ui, sans-serif;
|
|
13
|
+
--font-heading: "Inter", system-ui, sans-serif;
|
|
14
|
+
--font-normal: 400;
|
|
15
|
+
--font-bold: 700;
|
|
16
|
+
|
|
17
|
+
/* Brand Colors */
|
|
18
|
+
--brand-1: #0284c7; /* Sky blue */
|
|
19
|
+
--brand-1-light: #e0f2fe;
|
|
20
|
+
--brand-2: #0c4a6e; /* Blue */
|
|
21
|
+
--brand-2-light: #bae6fd;
|
|
22
|
+
--brand-3: #0f766e; /* Teal */
|
|
23
|
+
--brand-3-light: #99f6e4;
|
|
24
|
+
--brand-4: #a21caf; /* Fuchsia */
|
|
25
|
+
--brand-4-light: #f5d0fe;
|
|
26
|
+
|
|
27
|
+
/* Neutral Colors */
|
|
28
|
+
--black: #09090b;
|
|
29
|
+
--darker: #27272a;
|
|
30
|
+
--dark: #3f3f46;
|
|
31
|
+
--midtone: #71717a;
|
|
32
|
+
--light: #d4d4d8;
|
|
33
|
+
--lighter: #f4f4f5;
|
|
34
|
+
--white: #ffffff;
|
|
35
|
+
|
|
36
|
+
/* Semantic Colors */
|
|
37
|
+
--success: #16a34a; /* Green */
|
|
38
|
+
--success-light: #dcfce7;
|
|
39
|
+
--info: #2563eb; /* Blue */
|
|
40
|
+
--info-light: #dbeafe;
|
|
41
|
+
--warning: #ea580c; /* Orange */
|
|
42
|
+
--warning-light: #ffedd5;
|
|
43
|
+
--error: #b91c1c; /* Red */
|
|
44
|
+
--error-light: #fee2e2;
|
|
45
|
+
--link: #2563eb; /* Blue */
|
|
46
|
+
--highlight: #fef08a; /* Yellow */
|
|
47
|
+
|
|
48
|
+
/* Border & Outline Widths */
|
|
49
|
+
--border: 1px;
|
|
50
|
+
--border-sm: 0.5px;
|
|
51
|
+
--border-lg: 2px;
|
|
52
|
+
|
|
53
|
+
/* Border Radius */
|
|
54
|
+
--rounded: 0.25rem;
|
|
55
|
+
--rounded-sm: 0.125rem;
|
|
56
|
+
--rounded-lg: 0.5rem;
|
|
57
|
+
|
|
58
|
+
/* Shadow */
|
|
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);
|
|
64
|
+
|
|
65
|
+
/* Width Constraints */
|
|
66
|
+
--max-w-text: 80ch;
|
|
67
|
+
--max-w-form: 40rem;
|
|
68
|
+
|
|
69
|
+
/* Fluid Text Scale – Generated with: `npx prewindcss text`
|
|
70
|
+
Min viewport: 320px
|
|
71
|
+
Max viewport: 1600px
|
|
72
|
+
Min base size: 14px
|
|
73
|
+
Max base size: 18px
|
|
74
|
+
Min ratio: 1.25 - Major Third
|
|
75
|
+
Max ratio: 1.414 - Augmented Fourth
|
|
76
|
+
*/
|
|
77
|
+
--text-sm: clamp(0.7rem, 0.6761rem + 0.1195vw, 0.7956rem);
|
|
78
|
+
--text-base: clamp(0.875rem, 0.8125rem + 0.3125vw, 1.125rem);
|
|
79
|
+
--text-lg: clamp(1.094rem, 0.9695rem + 0.6212vw, 1.591rem);
|
|
80
|
+
--text-xl: clamp(1.367rem, 1.147rem + 1.103vw, 2.249rem);
|
|
81
|
+
--text-2xl: clamp(1.709rem, 1.341rem + 1.839vw, 3.181rem);
|
|
82
|
+
--text-3xl: clamp(2.136rem, 1.546rem + 2.951vw, 4.497rem);
|
|
83
|
+
--text-4xl: clamp(2.67rem, 1.748rem + 4.611vw, 6.359rem);
|
|
84
|
+
|
|
85
|
+
/* Fluid Space Scale – Generated with: `npx prewindcss space`
|
|
86
|
+
Min viewport: 320px
|
|
87
|
+
Max viewport: 1600px
|
|
88
|
+
Min sm size: 12px
|
|
89
|
+
Max sm size: 18px
|
|
90
|
+
Min ratio: 1.333 - Perfect Fourth
|
|
91
|
+
Max ratio: 1.667 - Major Sixth
|
|
92
|
+
*/
|
|
93
|
+
--space-3xs: clamp(0.3166rem, 0.3351rem + -0.09224vw, 0.2429rem);
|
|
94
|
+
--space-2xs: clamp(0.4221rem, 0.4264rem + -0.02156vw, 0.4048rem);
|
|
95
|
+
--space-xs: clamp(0.5626rem, 0.5346rem + 0.1403vw, 0.6749rem);
|
|
96
|
+
--space-sm: clamp(0.75rem, 0.6563rem + 0.4688vw, 1.125rem);
|
|
97
|
+
--space-md: clamp(0.9997rem, 0.7808rem + 1.095vw, 1.875rem);
|
|
98
|
+
--space-lg: clamp(1.333rem, 0.8843rem + 2.242vw, 3.126rem);
|
|
99
|
+
--space-xl: clamp(1.776rem, 0.9177rem + 4.294vw, 5.211rem);
|
|
100
|
+
--space-2xl: clamp(2.368rem, 0.7881rem + 7.899vw, 8.688rem);
|
|
101
|
+
--space-3xl: clamp(3.157rem, 0.3252rem + 14.16vw, 14.48rem);
|
|
102
|
+
--space-4xl: clamp(4.208rem, 0.7758rem - 24.92vw, 24.14rem);
|
|
103
|
+
}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>Prewind Example</title>
|
|
7
|
+
<link rel="stylesheet" href="css/styles.css" />
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div class="site-container">
|
|
11
|
+
<header>
|
|
12
|
+
<h1>Prewind Example</h1>
|
|
13
|
+
<p>A simple example site using Prewind CSS.</p>
|
|
14
|
+
</header>
|
|
15
|
+
|
|
16
|
+
<main>
|
|
17
|
+
<section class="section bg-lighter">
|
|
18
|
+
<h2 class="section-title">Cards</h2>
|
|
19
|
+
<div class="card-grid">
|
|
20
|
+
<div class="card">
|
|
21
|
+
<h3>Card One</h3>
|
|
22
|
+
<p>This is a simple card component styled with global CSS.</p>
|
|
23
|
+
</div>
|
|
24
|
+
<div class="card">
|
|
25
|
+
<h3>Card Two</h3>
|
|
26
|
+
<p>
|
|
27
|
+
Most styling lives in your stylesheet, not in class attributes.
|
|
28
|
+
</p>
|
|
29
|
+
</div>
|
|
30
|
+
<div class="card">
|
|
31
|
+
<h3>Card Three</h3>
|
|
32
|
+
<p>Use utility classes only for one-offs and tweaks.</p>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
</section>
|
|
36
|
+
|
|
37
|
+
<section class="section bg-brand-1-light">
|
|
38
|
+
<h2 class="section-title">Buttons</h2>
|
|
39
|
+
<div class="button-group">
|
|
40
|
+
<button class="button bg-brand-1 hover:bg-brand-2">Primary</button>
|
|
41
|
+
<button
|
|
42
|
+
class="button bg-white text-brand-1 border border-brand-1 hover:bg-brand-1-light"
|
|
43
|
+
>
|
|
44
|
+
Secondary
|
|
45
|
+
</button>
|
|
46
|
+
<button class="button bg-success">Success</button>
|
|
47
|
+
<button class="button bg-error">Error</button>
|
|
48
|
+
</div>
|
|
49
|
+
</section>
|
|
50
|
+
|
|
51
|
+
<section class="section border">
|
|
52
|
+
<h2 class="section-title">Typography</h2>
|
|
53
|
+
<div class="type-scale">
|
|
54
|
+
<p class="text-4xl">Text 4XL</p>
|
|
55
|
+
<p class="text-3xl">Text 3XL</p>
|
|
56
|
+
<p class="text-2xl">Text 2XL</p>
|
|
57
|
+
<p class="text-xl">Text XL</p>
|
|
58
|
+
<p class="text-lg">Text LG</p>
|
|
59
|
+
<p class="text-base">Text Base</p>
|
|
60
|
+
<p class="text-sm">Text SM</p>
|
|
61
|
+
</div>
|
|
62
|
+
</section>
|
|
63
|
+
|
|
64
|
+
<section class="section bg-darker text-white">
|
|
65
|
+
<h2 class="section-title">Colors</h2>
|
|
66
|
+
<div class="swatch-group">
|
|
67
|
+
<span class="swatch bg-brand-1">Brand 1</span>
|
|
68
|
+
<span class="swatch bg-brand-2">Brand 2</span>
|
|
69
|
+
<span class="swatch bg-brand-3">Brand 3</span>
|
|
70
|
+
<span class="swatch bg-brand-4">Brand 4</span>
|
|
71
|
+
<span class="swatch bg-success">Success</span>
|
|
72
|
+
<span class="swatch bg-warning">Warning</span>
|
|
73
|
+
<span class="swatch bg-error">Error</span>
|
|
74
|
+
<span class="swatch bg-info">Info</span>
|
|
75
|
+
</div>
|
|
76
|
+
</section>
|
|
77
|
+
</main>
|
|
78
|
+
|
|
79
|
+
<footer>
|
|
80
|
+
<p>
|
|
81
|
+
Built with
|
|
82
|
+
<a href="https://github.com/codepilotsf/prewind">Prewind CSS</a>
|
|
83
|
+
</p>
|
|
84
|
+
</footer>
|
|
85
|
+
</div>
|
|
86
|
+
</body>
|
|
87
|
+
</html>
|