unocss-preset-grid-areas

Grid Areas Preset for UnoCSS

1.0.4
latest
Source
npm

Version published: last year

Maintainers: 1

Created: last year

Source

Grid Areas Preset for UnoCSS

A plugin to provide UnoCSS CSS utilities for named grid areas.

Install

# 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:

// 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:

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

<body class="grid grid-areas-layout grid-cols-[24rem_1fr_2rem] grid-rows-[6rem_3rem_1fr_auto] h-full">
  <header class="grid-in-header"></header>
  <nav class="grid-in-nav"></nav>
  <main class="grid-in-main"></main>
  <footer class="grid-in-footer"></footer>
</body>

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`

export interface GridOptions {
    gridTemplateAreas: {
        [key: string]: string[];
    };
}

Arbitrary Values

Currently partial supported. But PR welcome :)

Keywords

FAQs

What is unocss-preset-grid-areas?

Is unocss-preset-grid-areas well maintained?

Package last updated on 24 Aug 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install