我如何用纯 HTML/CSS/JS 构建 SaaS UI Kit

Source: Dev.to

在一个被 React、Vue 以及其他十几种框架主导的世界里，我决定退一步，仅使用最基础的技术来打造一些高品质的东西。这就是 Lumina Kit 的背后故事——一个仅凭纯 HTML、CSS 和原生 JavaScript 构建的高端 SaaS UI 套件。

点此查看！

🎨 设计过程

我的目标是让页面在第一次加载时就产生“惊艳”效果。我从现代的“线性风格”设计和玻璃拟态（glassmorphism）趋势中汲取灵感。

配色方案： 我使用了特定的 HSL 值，以确保深邃、和谐的暗色调与充满活力的蓝‑紫渐变相结合。

玻璃拟态： 实现层次感是关键。我使用了细腻的 backdrop-filter 效果和半透明边框，让组件看起来像漂浮在背景之上。

排版： 我选择了 Inter，因为它在数字屏幕上的可读性极佳，并通过紧凑的字间距营造出高级的“SaaS”氛围。

💻 代码片段

实现“玻璃”外观的核心出奇地简单，但需要精细调校：

.glass-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}