prewindcss 1.2.2 → 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 +19 -10
- 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
|
@@ -27,14 +27,18 @@ Prewind works with the platform, not around it. CSS already has a cascade, varia
|
|
|
27
27
|
Load Prewind from a CDN or host it yourself:
|
|
28
28
|
|
|
29
29
|
```html
|
|
30
|
-
<link rel="stylesheet" href="https://unpkg.com/prewindcss@1.2.
|
|
30
|
+
<link rel="stylesheet" href="https://unpkg.com/prewindcss@1.2.3" />
|
|
31
31
|
```
|
|
32
32
|
|
|
33
|
-
### 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
|
|
34
38
|
|
|
35
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.
|
|
36
40
|
|
|
37
|
-
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.
|
|
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.
|
|
38
42
|
|
|
39
43
|
```css
|
|
40
44
|
:root {
|
|
@@ -47,19 +51,18 @@ You can get the default theme by running `npx prewindcss theme` (copies to clipb
|
|
|
47
51
|
|
|
48
52
|
However you organize it, just make sure these variables are defined somewhere in your CSS.
|
|
49
53
|
|
|
50
|
-
###
|
|
51
|
-
|
|
52
|
-
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:
|
|
54
|
+
### 4. Set up CSS layers
|
|
53
55
|
|
|
54
|
-
|
|
55
|
-
@layer reset, styles, prewind;
|
|
56
|
-
```
|
|
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
57
|
|
|
58
|
-
|
|
58
|
+
Your main CSS file should declare the layer order first, then import your theme and Prewind, then define your styles:
|
|
59
59
|
|
|
60
60
|
```css
|
|
61
61
|
@layer reset, styles, prewind;
|
|
62
62
|
|
|
63
|
+
@import url("https://unpkg.com/prewindcss");
|
|
64
|
+
@import url("theme.css");
|
|
65
|
+
|
|
63
66
|
@layer styles {
|
|
64
67
|
.nav-link {
|
|
65
68
|
color: var(--brand-1);
|
|
@@ -73,6 +76,12 @@ Put this at the top of your main CSS file. Then wrap all of your own styles in t
|
|
|
73
76
|
}
|
|
74
77
|
```
|
|
75
78
|
|
|
79
|
+
Then your HTML only needs a single stylesheet link:
|
|
80
|
+
|
|
81
|
+
```html
|
|
82
|
+
<link rel="stylesheet" href="css/styles.css" />
|
|
83
|
+
```
|
|
84
|
+
|
|
76
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`.
|
|
77
86
|
|
|
78
87
|
## Theming
|
|
@@ -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>
|