如何快速上手Siimple：从零开始构建清爽UI界面的入门教程

如何快速上手Siimple：从零开始构建清爽UI界面的入门教程

【免费下载链接】siimpleThe minimal and themeable CSS toolkit for flat and clean designs项目地址: https://gitcode.com/gh_mirrors/si/siimple

Siimple是一款极简且支持主题定制的CSS工具包，专为扁平化和简洁设计打造。本教程将帮助新手快速掌握Siimple的安装配置和基础使用，轻松构建出清爽美观的UI界面。

📦 三种安装方式，总有一款适合你

1. npm快速安装（推荐）

最常用的安装方式，只需在终端运行以下命令：

$ npm install siimple --save

确保你的电脑已安装npm，若未安装可参考npm官方安装指南。Node.js版本需14或更高。

2. Yarn替代方案

如果你习惯使用Yarn，执行：

$ yarn add siimple --save

Yarn的安装方法可参考Yarn官方文档。

3. 直接引入CDN（无需构建工具）

不想配置开发环境？直接在HTML中引入：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/siimple/siimple.css" />

这种方式适合快速原型开发，但无法自定义主题和模块。

Siimple提供丰富的图标系统，可轻松集成到各类UI组件中

⚙️ 5分钟完成基础配置

创建配置文件

在项目根目录新建siimple.config.js：

import colors from "@siimple/colors"; import base from "@siimple/preset-base"; export default { useRootStyles: true, useBorderBox: true, prefix: "", ...base, colors: { ...base.colors, primary: colors.blue["500"], secondary: colors.mint["600"], text: colors.gray["800"], background: "#fff", muted: colors.gray["200"], }, fonts: { body: "'Roboto',sans-serif", heading: "'Montserrat',sans-serif", code: "monospace", }, };

这个配置文件定义了基础颜色、字体和核心设置，完整配置说明见docs/configuration.mdx。

生成CSS文件

运行以下命令生成自定义CSS：

$ npx siimple -c ./siimple.config.js -o ./output.css

生成的output.css包含所有配置的样式，直接引入到HTML即可使用。

注意：Siimple使用ECMAScript模块，需在package.json中设置"type": "module"或使用.mjs扩展名。

🚀 快速上手核心功能

使用预设主题

Siimple提供多种预设主题，如深色模式、ice主题等，可直接引入使用：

import dark from "@siimple/preset-dark"; import ice from "@siimple/preset-ice"; export default { ...dark, // 应用深色主题 // ...其他配置 };

预设主题文件位于packages/preset-dark/和packages/preset-ice/。

应用UI组件

Siimple提供丰富的预定义UI组件，如按钮、卡片、表单等，直接添加类名即可使用：

<!-- 按钮组件 --> <button class="button button-primary">点击我</button> <!-- 卡片组件 --> <div class="card"> <h3 class="card-title">卡片标题</h3> <p class="card-text">这是一个简单的卡片示例</p> </div>

完整组件列表及用法参见docs/elements.mdx。

响应式设计

内置响应式工具类，轻松实现不同屏幕尺寸的适配：

<div class="container"> <div class="row"> <div class="col col-12 col-md-6 col-lg-4"> 响应式列 </div> </div> </div>

响应式设计详细说明见docs/responsive.mdx。

💡 实用技巧与资源

自定义颜色模式

启用暗色模式只需在配置中添加：

export default { useColorModes: true, colorModes: { dark: { background: "#1a1a1a", text: "#f5f5f5", // ...其他暗色模式颜色 }, }, };

然后在HTML标签上添加data-color-mode="dark"即可切换。

探索示例项目

项目提供多个示例页面，可直接参考学习：

• examples/hero.html - 英雄区域示例
• examples/navbar.html - 导航栏示例
• examples/pricing.html - 价格表示例

使用Playground实时预览

通过项目中的Playground可以实时编辑和预览样式：

cd playground npm install npm start

打开浏览器访问http://localhost:8080即可使用。

🎯 总结

Siimple作为一款轻量级CSS工具包，通过简单的配置和直观的类名，让开发者能够快速构建出干净、现代的UI界面。无论是小型项目还是大型应用，Siimple的灵活性和可定制性都能满足你的需求。

现在就通过以下命令开始你的Siimple之旅吧：

git clone https://gitcode.com/gh_mirrors/si/siimple cd siimple npm install

更多高级用法和详细文档，请查阅项目的docs/目录。

【免费下载链接】siimpleThe minimal and themeable CSS toolkit for flat and clean designs项目地址: https://gitcode.com/gh_mirrors/si/siimple