@kortin/unocss-preset NPM

@kortin/unocss-preset

Useful preset for UnoCSS to avoid non-essential classes.

Installation

npm i @kortin/unocss-preset --save-dev

Usage

To use this preset, simply include it in your UnoCSS configuration. This preset helps you to avoid writing repetitive and non-essential classes by providing utility classes for common layout patterns.

For Example:

<div class="flex justify-center items-center"></div>
<!-- shortcut to be -->
<div class="flex-center"></div>

Rules & Shortcuts Details

This preset provides the following utility classes:

Center

Class Name	Properties
`flex-center`	`display: flexalign-items: centerjustify-content: center`
`flex-col-center`	`display: flexflex-direction: columnalign-items: centerjustify-content: center`
`absolute-center`	`position: absolutetop: 50%left: 50%transform: translate(-50%, -50%)`
`fixed-center`	`position: fixedtop: 50%left: 50%transform: translate(-50%, -50%)z-index: 99`
`grid-center`	`display: gridplace-items: center`
`inline-center`	`display: inline-flexalign-items: centerjustify-content: center`

Flex

Class Name	Properties
`flex-row`	`display: flexflex-direction: row`
`flex-col`	`display: flexflex-direction: column`
`flex-reverse`	`display: flexflex-direction: row-reverse`
`flex-col-reverse`	`display: flexflex-direction: column-reverse`
`flex-between`	`display: flexjustify-content: space-betweenalign-items: center`
`flex-around`	`display: flexjustify-content: space-aroundalign-items: center`
`flex-evenly`	`display: flexjustify-content: space-evenlyalign-items: center`
`flex-start`	`display: flexjustify-content: flex-startalign-items: center`
`flex-end`	`display: flexjustify-content: flex-endalign-items: center`
`flex-wrap`	`display: flexflex-wrap: wrap`
`flex-nowrap`	`display: flexflex-wrap: nowrap`

Grid

Class Name	Properties
`grid-rows-{n}`	`display: gridgrid-template-rows: repeat(n, minmax(0, 1fr))`
`grid-cols-{n}`	`display: gridgrid-template-columns: repeat(n, minmax(0, 1fr))`

Border

Class Name	Properties
`b-{size}`	`border-width: {size}border-style: solid`
`b-{x/y}-{size}`	Applies border to x (left/right) or y (top/bottom) with specified size
`b-{r/l/t/b/s/e}-{size}`	Applies border to specific direction (right/left/top/bottom/start/end)

Note: For border utilities, if size is not specified, it defaults to 1px. Size can be specified with or without units.

License

unocss unocss-preset kortin unocss-shortcuts unocss-rules

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago