https://github.com/chz/unocss-preset-grid-areas
Grid Areas Preset for UnoCSS
https://github.com/chz/unocss-preset-grid-areas
Last synced: 5 months ago
JSON representation
Grid Areas Preset for UnoCSS
- Host: GitHub
- URL: https://github.com/chz/unocss-preset-grid-areas
- Owner: chz
- License: mit
- Created: 2023-08-19T19:45:18.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-08-24T10:46:53.000Z (over 1 year ago)
- Last Synced: 2024-11-20T04:09:38.247Z (6 months ago)
- Language: TypeScript
- Size: 55.7 KB
- Stars: 9
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-unocss - unocss-preset-grid-areas - preset-grid-areas) - Grid Areas Preset for UnoCSS by [@chz](https://github.com/chz). (Community / Presets)
README
Grid Areas Preset for UnoCSS
A plugin to provide UnoCSS CSS utilities for named grid areas.
---
## Install
```sh
# Using npm
npm install unocss-preset-grid-areas --save-dev
# Using yarn
yarn add unocss-preset-grid-areas -D
# Using pnpm
pnpm add unocss-preset-grid-areas -D
```
## Usage
Import plugin in your unocss.config.(js|ts) file, and define your template areas, along with any row/column specifications:
```js
// unocss.config.(js|ts)
import { defineConfig } from 'unocss'
import { presetGridAreas } from 'unocss-preset-grid-areas'
export default defineConfig({
presets: [
presetUno(),
// ...
presetGridAreas({
gridTemplateAreas: {
'layout': [
'header header header',
'nav main main',
'nav footer footer',
],
},
})
]
})
```
**This will generate the following utilities:**
```plain
grid-areas-layout
grid-in-footer
grid-in-header
grid-in-main
grid-in-nav
col-start-footer
col-start-header
col-start-main
col-start-nav
col-end-footer
col-end-header
col-end-main
col-end-nav
row-start-footer
row-start-header
row-start-main
row-start-nav
row-end-footer
row-end-header
row-end-main
row-end-nav
```
```html
```
> **Note**
> If used with UnoPreset or other similar preset, call `presetGridAreas()` at the bottom
## CSS Globals and Keywords
* .grid-areas-none
* .grid-areas-inherit
* .grid-areas-initial
* .grid-areas-revert
* .grid-areas-revert-layer
* .grid-areas-unset
* .grid-in-auto
* .grid-in-inherit
* .grid-in-initial
* .grid-in-revert
* .grid-in-revert-layer
* .grid-in-unset
## Type of `GridOptions`
```ts
export interface GridOptions {
gridTemplateAreas: {
[key: string]: string[];
};
}
```
## Arbitrary Values
Currently partial supported. But PR welcome :)