Starforst 是一个现代化、轻量级的 CSS 框架，专为快速构建响应式网站和 Web 应用而设计。它提供了超过 40 个精心设计的 UI 组件和实用工具类，同时保持极小的文件体积（仅 36KB）。Starforst 采用 CSS 变量实现主题定制，支持一键切换深色/浅色模式，让开发者可以轻松创建美观且一致的界面。
- 🚀 轻量高效：JS与CSS核心文件共仅有 42KB
- 🎨 主题系统：基于 CSS 变量的主题系统，支持深色/浅色模式一键切换
- 📱 响应式设计：完美适配移动设备到桌面设备
- 🧩 组件丰富：提供 40+ 开箱即用的 UI 组件
- 🛠️ 实用工具：包含大量实用工具类，加速开发流程
- 布局系统（网格、容器、响应式工具）
- 按钮（多种样式和尺寸）
- 卡片（带悬停效果）
- 表单控件（输入框、选择框、复选框等）
- 表格（条纹、边框等样式）
- 图像（响应式、圆形等样式）
- 导航栏（固定顶部）
- 侧边栏（响应式）
- 面包屑导航
- 分页组件
- 标签页
- 下拉菜单
- 警告框
- 工具提示
- 弹出框（Popover）
- 徽章
- 标签
- 时间线
- 步骤条
- 模态框
- 进度条
- 加载动画
- 骨架屏（内容加载占位）
- 折叠面板
- 手风琴
- 轮播图
- 列表组
- 分割线
- 信息提示（Toast）
- 页脚
- 阴影工具
- 圆角工具
- 间距工具
- 边框工具
- 浮动工具
- 文本工具（对齐、截断等）
- 背景工具
- 显示工具（display）
- 位置工具
- 溢出工具
下载本地使用：
<link rel="stylesheet" href="starfrost.min.css">
<link rel="stylesheet" href="starfrost.min.js">
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Starforst 示例</title>
<link rel="stylesheet" href="starfrost.css">
</head>
<body>
<nav class="sf-navbar">
<!-- 导航内容 -->
</nav>
<div class="sf-container">
<!-- 页面内容 -->
</div>
</body>
</html>
Starforst 支持深色/浅色主题一键切换：
<button class="sf-btn sf-theme-toggle" id="themeToggle">
<i class="fas fa-moon"></i>
</button>
<script>
document.getElementById('themeToggle').addEventListener('click', () => {
document.documentElement.classList.toggle('sf-theme-dark');
});
</script>
在 标签添加类名：
<html class="sf-theme-dark">
- 简单设计：通过组合简单工具类创建复杂界面
- 移动优先：所有组件从移动端开始设计，逐步增强到大屏幕
- 主题定制：通过覆盖 CSS 变量轻松自定义主题
- 一致性：所有组件共享相同设计和间距系统
支持所有现代浏览器：
- Chrome (最新版)
- Firefox (最新版)
- Safari (最新版)
- Edge (最新版)
不支持 IE11 及更旧版本 (毕竟IE太难适配了 —— 新雨)
Starforst 基于 MIT 许可证发布，可免费用于个人和商业项目。
欢迎贡献代码或报告问题： GitHub 仓库