@mutoe/unocss-preset

A UnoCSS preset that provides enhanced flex layout utilities and padding/margin utilities.

Features

• Enhanced flex layout utilities with intuitive positioning
• Flexible padding and margin utilities with support for different directions
• Support for !important modifier
• Compatible with UnoCSS directives

Installation

pnpm add -D @mutoe/unocss-preset

Usage

Add the preset to your UnoCSS configuration:

import { defineConfig } from 'unocss'
import presetMutoe from '@mutoe/unocss-preset'

export default defineConfig({
  presets: [
    presetMutoe(),
  ],
})

Utilities

Flex Layout

The preset provides enhanced flex layout utilities with intuitive positioning:

<!-- Basic flex container -->
<div class="flex-row"></div>
<div class="flex-col"></div>
<div class="flex-column"></div>

<!-- With reverse direction -->
<div class="flex-row-reverse"></div>
<div class="flex-column-reverse"></div>

<!-- With justify and align -->
<div class="flex-row-center"></div>
<div class="flex-column-start-end"></div>

<!-- With !important -->
<div class="flex-row-center-center!"></div>

Number Positioning System

<!-- With number positioning (1-9) -->
<div class="flex-row-5"></div>
<div class="flex-column-7"></div>

The preset includes a number-based positioning system (1-9) for quick flex layout positioning:

Row Direction:     Column Direction:
============>
╔═══╦═══╦═══╗      ║  ╔═══╦═══╦═══╗
║ 1 ║ 4 ║ 7 ║      ║  ║ 1 ║ 2 ║ 3 ║
╠═══╬═══╬═══╣      ║  ╠═══╬═══╬═══╣
║ 2 ║ 5 ║ 8 ║      ║  ║ 4 ║ 5 ║ 6 ║
╠═══╬═══╬═══╣      ║  ╠═══╬═══╬═══╣
║ 3 ║ 6 ║ 9 ║      ║  ║ 7 ║ 8 ║ 9 ║
╚═══╩═══╩═══╝      V  ╚═══╩═══╩═══╝

Available justify/align values:

• start
• center
• end
• stretch
• between
• around
• evenly

Padding & Margin

The preset provides padding and margin utilities with support for different directions:

<!-- Two values (y-x) -->
<div class="p-1-2"></div>  <!-- padding: 0.25rem 0.75rem -->
<div class="m-1-2"></div>  <!-- margin: 0.25rem 0.75rem -->

<!-- Three values (t-x-b) -->
<div class="p-1-2-3"></div>  <!-- padding: 0.25rem 0.75rem 0.75rem -->
<div class="m-1-2-3"></div>  <!-- margin: 0.25rem 0.75rem 0.75rem -->

<!-- Four values (t-r-b-l) -->
<div class="p-1-2-3-4"></div>  <!-- padding: 0.25rem 0.75rem 0.75rem 1rem -->
<div class="m-1-2-3-4"></div>  <!-- margin: 0.25rem 0.75rem 0.75rem 1rem -->

<!-- With !important -->
<div class="p-1-2-3-4!"></div>
<div class="m-1-2-3-4!"></div>

Note: All values are divided by 4 to convert to rem units (e.g., 1 = 0.25rem, 2 = 0.5rem, etc.).

License

MIT