unocss-preset-haixee

A preset for UnoCSS, tailored for our company's needs.

Installation

yarn add -D unocss @haixee/unocss-preset

npm install --save-dev unocss @haixee/unocss-preset

Usage

Import the preset in your uno.config.* files (e.g. uno.config.ts):

import { presetHaixee } from '@haixee/unocss-preset'
import { defineConfig, presetUno } from 'unocss'

export default defineConfig({
  presets: [
    presetUno(),  // Or other official presets
    presetHaixee(),
  ],
})

CSS Classes

This preset includes an other preset called marumaru, you can refer to its document for more classes that can be used.

Responsive

Responsive classes can be enabled by setting the responsive option to true. You can simply set responsive: true to use the default breakpoints.

const config: Config = {
  responsive: true,  // Enable responsive classes
}


The breakpoints can also be customized by setting the `breakpoints` option.
For example, to enable responsive classes with custom breakpoints:
```ts
const config: Config = {
  responsive: {
    enabled: true,  // Enable responsive classes
    breakpoints: {
      'sm': 640,     // Enable responsive classes from 640px
      'md': 768,     // Enable responsive classes from 768px
      'lg': 1024,    // Enable responsive classes from 1024px
      'xl': 1280,    // Enable responsive classes from 1280px
    },
  },
}

Size

Define size of an element using the size-{value} class. For example, size-4 or size-10% can be used to set the width and height of an element to 1rem and 10% respectively.

size-10

size-2rem

size-5vh

size-20%

Inset Center

Center an element horizontally, vertically, or both using the inset-center-x, inset-center-y, and inset-center classes.

inset-center

inset-center-x

inset-center-y

Gap

Set the gap between columns or rows using the col-gap-{value} and row-gap-{value} classes. And the built-in gap-{value} class can be used to set both column and row gap.

col-gap-4

row-gap-4

gap-4

col-gap-20px