# 简介

## 前言

如你从名称中可以提取到的直观信息，这又是一个 UI 相关的项目。

现如今 UI 框架们已经繁如星海，有些已经在业界占据极其稳固的位置，像 `mui`/`antd`/`element`/`vuetify`，几乎变成了 `react`/`vue`中首先考虑的框架。

那为什么还要写这样一个 `@icestack/ui` 呢？

## 什么是 `@icestack/ui`

`@icestack/ui` 本质上不是一个 UI 框架，它的本质是一个 `UI CSS 范式` 管理生成器，它由大量的编译`CSS`的插件组成，你可以理解成一套样式工具链。

比如 `tailwindcss` 里最流行的框架是 `daisyui`，你可以通过 `@icestack/ui` 定制生成无数个属于你自己的 `daisyui`

例如我们可以利用它，构建出一套 `daisyui` 的适配微信小程序的版本([点击此处跳转演示小程序](./usage/mp#演示小程序)):

没错！也就是通过它，你可以快速的生成一套属于你自己的 `CSS` 框架！当然你可以使用内部提供的一套默认 `范式`, 并对它进行覆盖或者扩展。

你也可以根据配置项，自由的去操纵所有 `CSS`范式的表现性状，包括不但限于:

### (添加/减少/覆盖/修改)颜色种类给所有的组件

比如: 按钮默认有 `default`, `primary`,`success`,`warning`,`error` ... 你可以添加个更多的颜色种类，并声明它们`hover/focus/active`等等状态

### (添加/减少/覆盖/修改)组件的大小，形状，样式...

比如: 按钮默认的尺寸有`xs`,`sm`,`md`,`lg` 四种尺寸，你可以再往里面添加 `xl`,`2xl`,`3xl` 等等的大小尺寸，或者有 `round`,`circle` 这种形状，你再添加个 `square`...

### (添加/减少/覆盖/修改)系统主题

比如: 默认情况下只有 `light`/`dark` **2**种系统主题，你可以添加更多主题进行统一管理。

### 添加新的`CSS`组件到这套体系中来

你可以方便的添加你自己的组件进这套体系中。

而且，这个生成器生成的 `CSS` 结果入侵性非常小。默认情况下，它不会携带任何的 `css reset/normalize/preflight` 样式，只会全局注入一些计算出的 `CSS` 变量。

它的生成结果也非常的直观，你可以使用它自定义出想要的 `UI` 行为后，进行二次封装，或者提取成 `preset`, 从而在多个项目中共享。

## 编写动机

这个项目是我在使用 `daisyui` 的时候诞生出来的一个想法，我想对所有的样式，主题，以及组件样式统一管理，并随时进行扩展与覆盖。

于是 `IceStack` 项目就诞生了，所以内置的默认预设写法上和 `daisyui` 是类似的，因为它的确非常好用！

## 收到启发的项目

本项目收到了 `tailwindcss`,`daisyui`,`sass`,`postcss`,`antd` 等等项目和思想的启发。
