# Utility Classes

These are utility classes that are used in the `next-ui` app and libraries. They are deliberately simple in order to test the adoption within the team.

The starting point for the tooling to generate these classes came from [codyframe](https://github.com/codyhouse/codyframe).
In future we may want to expand on our small set using more of the utility classes that codyframe has, or even use something like [tailwindcss](https://tailwindcss.com/) instead.

The `global.css` file is used to define the utility classes globally and also for intellisense in the editor. If you modify the generator sass then you will need to run `pnpm build:uclasses` from the root of the `/frontend/v2` workspace.

Ensure you have the recommended extension from .vscode workspace settings to get the intellisense.

## Available Classes

### Layout & Display

- **Flex**: `.flex`, `.inline-flex`, `.flex-wrap`, `.flex-nowrap`, `.flex-col`, `.flex-col-reverse`, `.flex-row`, `.flex-row-reverse`, `.flex-center`, `.flex-grow`, `.flex-grow-0`, `.flex-shrink`, `.flex-shrink-0`, `.flex-basis-0`
- **Alignment**: `.justify-[start|end|center|between]`, `.items-[center|start|end|baseline|stretch]`, `.content-[start|end|center|between]`
- **Display**: `.block`, `.inline-block`, `.inline`, `.contents`, `.grid`, `.inline-grid`, `.hidden`
- **Gap**: `.gap-[0|px|0.5|1|1.5|2|2.5|3|3.5|4|5|6|7|8|9|10|11|12|14|16|20|24|28|32|36|40|44|48|52|56|60|64|72]`, `.gap-[x|y]-[sizes]`

### Spacing & Position

- **Margin**: `.m-[auto|0]`, `.m[x|y]-[auto|0]`, `.m[t|r|b|l]-[auto|0]`
- **Padding**: `.p[x|y]-0`, `.p[t|r|b|l]-0`
- **Position**: `.relative`, `.absolute`, `.fixed`, `.sticky`, `.static`, `.inset-0`
- **Z-Index**: `.z-[0|1|2|3]`
- **Width**: `.w-full`
- **Max Width**: `.max-w-[0|px|0.5...72|none|xs|sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|full|min|max|fit|prose|screen-sm|screen-md|screen-lg|screen-xl|screen-2xl]`

### Typography

- **Text**: `.truncate`/`.text-truncate`, `.text-replace`, `.break-word`
- **Transform**: `.uppercase`, `.capitalize`
- **Alignment**: `.text-[center|left|right|justify]`
- **Decoration**: `.line-through`, `.underline`, `.text-decoration-none`
- **Vertical Align**: `.align-[baseline|sub|super|text-top|text-bottom|top|middle|bottom]`

### Other Utilities

- **Cursor**: `.cursor-[pointer|default]`
- **Events**: `.pointer-events-[auto|none]`
- **Height**: `.min-h-[0|full|screen]`, `.max-h-[full|screen]`
- **Opacity**: `.opacity-[0|25|50|75|100]`
- **Overflow**: `.overflow-[visible|hidden|clip|auto]`, `.overflow-[x|y]-[hidden|clip]`
- **Scroll**: `.momentum-scrolling`, `.overscroll-contain`, `.scroll-smooth`
- **Object Fit**: `.object-[contain|cover]`
- **Transform**: `.rotate-[90|180|270]`
- **Transform Origin**: `.origin-[center|top|right|bottom|left|top-left|top-right|bottom-left|bottom-right]`
- **Visibility**: `.visible`, `.invisible`
