create-eva-css 2.0.0 → 2.0.6
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/index.js +258 -10
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -157,11 +157,150 @@ body {
|
|
|
157
157
|
`;
|
|
158
158
|
}
|
|
159
159
|
|
|
160
|
-
if (preset === '
|
|
161
|
-
return `// EVA CSS -
|
|
160
|
+
if (preset === 'basic') {
|
|
161
|
+
return `// EVA CSS - Basic Setup
|
|
162
162
|
@use 'eva-css-fluid';
|
|
163
163
|
|
|
164
164
|
// Your custom styles here
|
|
165
|
+
body {
|
|
166
|
+
margin: 0;
|
|
167
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
168
|
+
transition: background 0.3s, color 0.3s;
|
|
169
|
+
}
|
|
170
|
+
`;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
if (preset === 'landing') {
|
|
174
|
+
return `// EVA CSS - Landing Page
|
|
175
|
+
@use 'eva-css-fluid';
|
|
176
|
+
|
|
177
|
+
body {
|
|
178
|
+
margin: 0;
|
|
179
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
180
|
+
transition: background 0.3s, color 0.3s;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.hero {
|
|
184
|
+
text-align: center;
|
|
185
|
+
padding: var(--96) var(--32);
|
|
186
|
+
background: linear-gradient(135deg, var(--brand), var(--accent));
|
|
187
|
+
color: var(--light);
|
|
188
|
+
|
|
189
|
+
h1 {
|
|
190
|
+
font-size: var(--64);
|
|
191
|
+
margin: 0 0 var(--24) 0;
|
|
192
|
+
font-weight: bold;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
p {
|
|
196
|
+
font-size: var(--24);
|
|
197
|
+
margin: 0 0 var(--48) 0;
|
|
198
|
+
opacity: 0.9;
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.button {
|
|
203
|
+
display: inline-block;
|
|
204
|
+
padding: var(--16) var(--32);
|
|
205
|
+
background: var(--light);
|
|
206
|
+
color: var(--brand);
|
|
207
|
+
border: none;
|
|
208
|
+
border-radius: var(--8);
|
|
209
|
+
font-size: var(--18);
|
|
210
|
+
font-weight: 600;
|
|
211
|
+
text-decoration: none;
|
|
212
|
+
transition: transform 0.2s;
|
|
213
|
+
|
|
214
|
+
&:hover {
|
|
215
|
+
transform: translateY(-2px);
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.features {
|
|
220
|
+
max-width: 1200px;
|
|
221
|
+
margin: 0 auto;
|
|
222
|
+
padding: var(--96) var(--32);
|
|
223
|
+
|
|
224
|
+
.grid {
|
|
225
|
+
display: grid;
|
|
226
|
+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
227
|
+
gap: var(--32);
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.card {
|
|
231
|
+
background: var(--light);
|
|
232
|
+
padding: var(--32);
|
|
233
|
+
border-radius: var(--16);
|
|
234
|
+
box-shadow: 0 2px 8px var(--dark___);
|
|
235
|
+
transition: transform 0.2s;
|
|
236
|
+
|
|
237
|
+
&:hover {
|
|
238
|
+
transform: translateY(-4px);
|
|
239
|
+
}
|
|
240
|
+
}
|
|
241
|
+
}
|
|
242
|
+
`;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
if (preset === 'dashboard') {
|
|
246
|
+
return `// EVA CSS - Dashboard
|
|
247
|
+
@use 'eva-css-fluid';
|
|
248
|
+
|
|
249
|
+
body {
|
|
250
|
+
margin: 0;
|
|
251
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
252
|
+
transition: background 0.3s, color 0.3s;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.dashboard {
|
|
256
|
+
display: grid;
|
|
257
|
+
grid-template-columns: 250px 1fr;
|
|
258
|
+
min-height: 100vh;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
.sidebar {
|
|
262
|
+
background: var(--light);
|
|
263
|
+
padding: var(--24);
|
|
264
|
+
border-right: 1px solid var(--light__);
|
|
265
|
+
|
|
266
|
+
nav a {
|
|
267
|
+
display: block;
|
|
268
|
+
padding: var(--12) var(--16);
|
|
269
|
+
color: var(--dark);
|
|
270
|
+
text-decoration: none;
|
|
271
|
+
border-radius: var(--8);
|
|
272
|
+
margin-bottom: var(--8);
|
|
273
|
+
|
|
274
|
+
&:hover {
|
|
275
|
+
background: var(--brand_);
|
|
276
|
+
color: var(--brand);
|
|
277
|
+
}
|
|
278
|
+
}
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
.main-content {
|
|
282
|
+
padding: var(--32);
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
.metrics {
|
|
286
|
+
display: grid;
|
|
287
|
+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
288
|
+
gap: var(--24);
|
|
289
|
+
margin-bottom: var(--32);
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
.metric-card {
|
|
293
|
+
background: var(--light);
|
|
294
|
+
padding: var(--24);
|
|
295
|
+
border-radius: var(--12);
|
|
296
|
+
box-shadow: 0 2px 8px var(--dark___);
|
|
297
|
+
|
|
298
|
+
.value {
|
|
299
|
+
font-size: var(--40);
|
|
300
|
+
font-weight: bold;
|
|
301
|
+
color: var(--brand);
|
|
302
|
+
}
|
|
303
|
+
}
|
|
165
304
|
`;
|
|
166
305
|
}
|
|
167
306
|
|
|
@@ -200,7 +339,7 @@ function generateHtml(projectName, preset) {
|
|
|
200
339
|
</html>
|
|
201
340
|
`;
|
|
202
341
|
|
|
203
|
-
const
|
|
342
|
+
const basicContent = `<!DOCTYPE html>
|
|
204
343
|
<html lang="en">
|
|
205
344
|
<head>
|
|
206
345
|
<meta charset="UTF-8">
|
|
@@ -208,15 +347,112 @@ function generateHtml(projectName, preset) {
|
|
|
208
347
|
<title>${projectName}</title>
|
|
209
348
|
<link rel="stylesheet" href="styles/main.css">
|
|
210
349
|
</head>
|
|
211
|
-
<body class="current-theme theme-
|
|
350
|
+
<body class="current-theme theme-eva _bg-light _c-dark_">
|
|
212
351
|
<div class="p-32">
|
|
213
352
|
<h1 class="fs-32 _c-brand">Welcome to ${projectName}</h1>
|
|
214
|
-
<p class="fs-16
|
|
353
|
+
<p class="fs-16 mt-16">Built with EVA CSS fluid design framework</p>
|
|
215
354
|
|
|
216
355
|
<div class="mt-32 p-24 _bg-brand_ br-16">
|
|
217
|
-
<p
|
|
356
|
+
<p>Fluid responsive design with no breakpoints!</p>
|
|
357
|
+
</div>
|
|
358
|
+
|
|
359
|
+
<button class="p-16 mt-24 _bg-accent _c-light br-8" onclick="document.body.classList.toggle('toggle-theme')">
|
|
360
|
+
Toggle Theme
|
|
361
|
+
</button>
|
|
362
|
+
</div>
|
|
363
|
+
</body>
|
|
364
|
+
</html>
|
|
365
|
+
`;
|
|
366
|
+
|
|
367
|
+
const landingContent = `<!DOCTYPE html>
|
|
368
|
+
<html lang="en">
|
|
369
|
+
<head>
|
|
370
|
+
<meta charset="UTF-8">
|
|
371
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
372
|
+
<title>${projectName} - Landing Page</title>
|
|
373
|
+
<link rel="stylesheet" href="styles/main.css">
|
|
374
|
+
</head>
|
|
375
|
+
<body class="current-theme theme-eva all-grads _bg-light _c-dark_">
|
|
376
|
+
<section class="hero">
|
|
377
|
+
<h1>Welcome to ${projectName}</h1>
|
|
378
|
+
<p>Build amazing products with EVA CSS fluid design framework</p>
|
|
379
|
+
<a href="#features" class="button">Get Started</a>
|
|
380
|
+
</section>
|
|
381
|
+
|
|
382
|
+
<section class="features" id="features">
|
|
383
|
+
<div class="grid">
|
|
384
|
+
<div class="card">
|
|
385
|
+
<h2>Fluid Design</h2>
|
|
386
|
+
<p>Responsive sizing without media queries using CSS clamp() functions</p>
|
|
387
|
+
</div>
|
|
388
|
+
<div class="card">
|
|
389
|
+
<h2>Auto Dark Mode</h2>
|
|
390
|
+
<p>OKLCH color system with automatic lightness inversion</p>
|
|
391
|
+
</div>
|
|
392
|
+
<div class="card">
|
|
393
|
+
<h2>Utility Classes</h2>
|
|
394
|
+
<p>Generated from your design tokens for rapid development</p>
|
|
395
|
+
</div>
|
|
218
396
|
</div>
|
|
397
|
+
</section>
|
|
398
|
+
|
|
399
|
+
<script>
|
|
400
|
+
const savedTheme = localStorage.getItem('eva-theme');
|
|
401
|
+
if (savedTheme === 'dark') document.body.classList.add('toggle-theme');
|
|
402
|
+
</script>
|
|
403
|
+
</body>
|
|
404
|
+
</html>
|
|
405
|
+
`;
|
|
406
|
+
|
|
407
|
+
const dashboardContent = `<!DOCTYPE html>
|
|
408
|
+
<html lang="en">
|
|
409
|
+
<head>
|
|
410
|
+
<meta charset="UTF-8">
|
|
411
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
412
|
+
<title>${projectName} - Dashboard</title>
|
|
413
|
+
<link rel="stylesheet" href="styles/main.css">
|
|
414
|
+
</head>
|
|
415
|
+
<body class="current-theme theme-eva _bg-light_ _c-dark_">
|
|
416
|
+
<div class="dashboard">
|
|
417
|
+
<aside class="sidebar">
|
|
418
|
+
<h1>${projectName}</h1>
|
|
419
|
+
<nav>
|
|
420
|
+
<a href="#" class="active">Dashboard</a>
|
|
421
|
+
<a href="#">Analytics</a>
|
|
422
|
+
<a href="#">Reports</a>
|
|
423
|
+
<a href="#">Settings</a>
|
|
424
|
+
</nav>
|
|
425
|
+
</aside>
|
|
426
|
+
|
|
427
|
+
<main class="main-content">
|
|
428
|
+
<h2>Dashboard Overview</h2>
|
|
429
|
+
|
|
430
|
+
<div class="metrics">
|
|
431
|
+
<div class="metric-card">
|
|
432
|
+
<div class="label">Total Users</div>
|
|
433
|
+
<div class="value">12,543</div>
|
|
434
|
+
</div>
|
|
435
|
+
<div class="metric-card">
|
|
436
|
+
<div class="label">Revenue</div>
|
|
437
|
+
<div class="value">$48,392</div>
|
|
438
|
+
</div>
|
|
439
|
+
<div class="metric-card">
|
|
440
|
+
<div class="label">Active</div>
|
|
441
|
+
<div class="value">892</div>
|
|
442
|
+
</div>
|
|
443
|
+
</div>
|
|
444
|
+
|
|
445
|
+
<button onclick="document.body.classList.toggle('toggle-theme')"
|
|
446
|
+
style="padding: var(--12); background: var(--brand); color: var(--light); border: none; border-radius: var(--8); cursor: pointer;">
|
|
447
|
+
Toggle Theme
|
|
448
|
+
</button>
|
|
449
|
+
</main>
|
|
219
450
|
</div>
|
|
451
|
+
|
|
452
|
+
<script>
|
|
453
|
+
const savedTheme = localStorage.getItem('eva-theme');
|
|
454
|
+
if (savedTheme === 'dark') document.body.classList.add('toggle-theme');
|
|
455
|
+
</script>
|
|
220
456
|
</body>
|
|
221
457
|
</html>
|
|
222
458
|
`;
|
|
@@ -255,7 +491,9 @@ function generateHtml(projectName, preset) {
|
|
|
255
491
|
`;
|
|
256
492
|
|
|
257
493
|
if (preset === 'minimal') return minimalContent;
|
|
258
|
-
if (preset === '
|
|
494
|
+
if (preset === 'basic') return basicContent;
|
|
495
|
+
if (preset === 'landing') return landingContent;
|
|
496
|
+
if (preset === 'dashboard') return dashboardContent;
|
|
259
497
|
return fullContent;
|
|
260
498
|
}
|
|
261
499
|
|
|
@@ -341,7 +579,9 @@ async function createProject(projectName, options = {}) {
|
|
|
341
579
|
} else {
|
|
342
580
|
preset = await select('Select project template:', [
|
|
343
581
|
{ label: 'Minimal', value: 'minimal', description: 'Variables only, no utilities' },
|
|
344
|
-
{ label: '
|
|
582
|
+
{ label: 'Basic', value: 'basic', description: 'Simple utility classes setup' },
|
|
583
|
+
{ label: 'Landing', value: 'landing', description: 'Marketing landing page' },
|
|
584
|
+
{ label: 'Dashboard', value: 'dashboard', description: 'Admin dashboard UI' },
|
|
345
585
|
{ label: 'Full', value: 'full', description: 'Everything + examples' }
|
|
346
586
|
]);
|
|
347
587
|
}
|
|
@@ -466,15 +706,23 @@ Usage:
|
|
|
466
706
|
npx create-eva-css <project-name> [options]
|
|
467
707
|
|
|
468
708
|
Options:
|
|
469
|
-
--preset <type> Template preset (minimal|
|
|
709
|
+
--preset <type> Template preset (minimal|basic|landing|dashboard|full)
|
|
470
710
|
--sizes <sizes> Comma-separated size values
|
|
471
711
|
--font-sizes <sizes> Comma-separated font size values
|
|
472
712
|
--package-manager <pm> Package manager (npm|pnpm|yarn)
|
|
473
713
|
--help, -h Show this help
|
|
474
714
|
|
|
715
|
+
Templates:
|
|
716
|
+
minimal - Variables only, no utilities
|
|
717
|
+
basic - Simple setup with utility classes
|
|
718
|
+
landing - Marketing landing page template
|
|
719
|
+
dashboard - Admin dashboard UI template
|
|
720
|
+
full - Everything + examples
|
|
721
|
+
|
|
475
722
|
Examples:
|
|
476
723
|
npm init eva-css my-project
|
|
477
|
-
npx create-eva-css my-app --preset
|
|
724
|
+
npx create-eva-css my-app --preset landing
|
|
725
|
+
npx create-eva-css my-dashboard --preset dashboard
|
|
478
726
|
npx create-eva-css my-site --sizes "16,24,32,64" --font-sizes "16,24,32"
|
|
479
727
|
`);
|
|
480
728
|
process.exit(0);
|