open-index/open-npm huggingface dataset:
npm package: @jackiew/atomcss
Description: <h1 align='center'>jackiew-css
Author: JackieWong
Latest version: 0.0.1-alpha.7

<h1 align='center'>jackiew-css

<h5 align='center'>

atom css engine inspired by [antfu](https://antfu.me/)

</h5>

</h1>

<div align="center">

[![](https://img.shields.io/badge/license-MIT-violet.svg)](https://champyin.com)
[![](https://img.shields.io/badge/package-NPM-blueviolet.svg)](https://champyin.com)

</div>

## Features

- ⚡️ **It's FAST**
- 🧩 On-demand CSS utilities
- 🔥 Hot module replacement (HMR)
- 🎳 Support Variant Groups - e.g. `bg-gray-200 hover:(bg-gray-100 text-red-300)`
- 🌑 Support Dark mode
- 📱 Support Screen BreackPoints

## Documentation

Read the [documentation](https://ui.jackiewongz.com/) for more details.

## install

```javascript
npm install @jackiew/atomcss
```

## Quick Start

In vite.config.ts

```javascript
import { AtomCss } from "./packages/index";

export default defineConfig({
  plugins: [AtomCss({})],
});
```

## Custom Rules

### css rules

```javascript
...
plugins: [
    AtomCss({
      rules: [
        [/^text-big$/, [["font-size", "48px"]]],
        // ignore first parameter
        [/^(?:width|w)-(\d+)%$/, ([, val])=>[["width", `${val}%`]]],
      ],
      // etc..
    }),
  ],
...
```

## Browser Support

| <img src="https://github.com/zhubeijia/source/blob/main/srclogo/icon-edge.06c7aa18.svg?raw=true" width="20px">Edge | <img src="https://github.com/zhubeijia/source/blob/main/srclogo/icon-chrome.99f0b30c.svg?raw=true" width="20px">Chrome | <img src="https://github.com/zhubeijia/source/blob/main/srclogo/icon-safari.1bf88a3e.svg?raw=true" width="20px">Safari |
| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------ |
| Edge                                                                                                                 | Last two versions                                                                                                        | Last two versions                                                                                                        |

## License

MIT License &copy; 2022 [JackieWong](https://github.com/bigJackie)

Looking forward to your suggestion!!
npm package: @jackiew/jui
Description: <div align="center">
Author: JackieWong
Latest version: 0.0.0-alpha.1

<div align="center">

# Jackie-UI

<div>

[![](https://img.shields.io/badge/license-MIT-violet.svg)](https://champyin.com)
[![](https://img.shields.io/badge/package-NPM-blueviolet.svg)](https://champyin.com)

</div>

A UI Toolkit for Web-Apps Based On Vue.js 3.

</div>

## Introduction

Jackie-UI is not only support perfectly on computers but also on cell phones.

> It just a personal project for practice and study.

For more information, please refer our [documentation](https://ui.jackiewongz.com/).

## Features

- 🌈 Self-designed interaction language and visual style
- 📦 Out-of-the-box, high-quality `Vue` components
- 🥇 Developed in `TypeScript` and `Scss`
- ☀️ Friendly API
- 🎨 Sophisticated, beautiful UI
- 📓 With clear demo site and detailed documentation

## TODO

<details><summary>Features</summary>
<p>

- [x] AtomCss
- [x] Internationalization
- [ ] Theme

</p>
</details>

<details><summary>Components</summary>
<p>

- Normal

  - [ ] Avatar
  - [ ] Badge
  - [x] Button
  - [x] Card
  - [ ] Carousel
  - [ ] Divider
  - [x] Icon
  - [ ] Image
  - [x] List
  - [ ] Menu
  - [ ] Paper

- Feedback

  - [ ] Alert
  - [ ] Dialog
  - [ ] Tooltip

- From

  - [ ] Auto Complete
  - [ ] Check Box
  - [ ] Radio
  - [ ] Rate
  - [ ] Select
  - [ ] Slider
  - [ ] Switch
  - [ ] Upload

- Layout

  - [x] Application
  - [ ] Grid
  - [x] Layout

- Navigation

  - [x] App Bar
  - [x] Navigation Bar
  - [ ] Pagination

</p>
</details>

## install

```javascript
npm install @jackiew/jui
```

## Quick Start

```javascript
import JUI from "jackiew-ui";
import "jackiew-ui/jui.css";
Vue.use(JUI);

// or
import {
  JAppBar,
  JButton,
  // ...
} from "jackiew-ui";
Vue.component(JAppBar.name, JAppBar);
Vue.component(JButton.name, JButton);
```

## Browser Support

| <img src="https://github.com/zhubeijia/source/blob/main/srclogo/icon-edge.06c7aa18.svg?raw=true" width="20px">Edge | <img src="https://github.com/zhubeijia/source/blob/main/srclogo/icon-chrome.99f0b30c.svg?raw=true" width="20px">Chrome | <img src="https://github.com/zhubeijia/source/blob/main/srclogo/icon-safari.1bf88a3e.svg?raw=true" width="20px">Safari |
| ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
| Edge                                                         | Last two versions                                            | Last two versions                                            |

## LICENSE

MIT License &copy; 2022 [JackieWong](https://github.com/bigJackie)

Looking forward to your suggestion!!