Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/Julien-R44/unocss-preset-heropatterns

🏁 UnoCSS preset that integrates Hero Patterns.
https://github.com/Julien-R44/unocss-preset-heropatterns

hero-patterns unocss

Last synced: 4 months ago
JSON representation

🏁 UnoCSS preset that integrates Hero Patterns.

Host: GitHub
URL: https://github.com/Julien-R44/unocss-preset-heropatterns
Owner: Julien-R44
License: mit
Created: 2022-07-05T16:12:50.000Z (over 2 years ago)
Default Branch: main
Last Pushed: 2023-05-22T16:29:28.000Z (over 1 year ago)
Last Synced: 2024-08-09T05:50:51.031Z (6 months ago)
Topics: hero-patterns, unocss
Language: TypeScript
Homepage:
Size: 395 KB
Stars: 26
Watchers: 3
Forks: 2
Open Issues: 1
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md

Awesome Lists containing this project

awesome-unocss - unocss-preset-heropatterns - Preset that integrates [Hero Patterns](https://heropatterns.com/). (Presets)
awesome-unocss - unocss-preset-heropatterns - Preset that integrates [Hero Patterns](https://heropatterns.com/). (Presets)

README

# unocss-preset-hero-patterns

🏁 [UnoCSS](https://github.com/unocss/unocss) preset that integrates [Hero Patterns](https://heropatterns.com/)

## Installation
```
pnpm add -D @julr/unocss-preset-heropatterns
```

## Usage

```ts
import { defineConfig } from 'unocss'
import { presetHeroPatterns } from '@julr/unocss-preset-heropatterns'

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

This preset add 2 rules

### `bg-hero-${patternName}-${color}`

It works in a similar way to the tailwind/windicss plugin for heropatterns, it provides `patternName` with the color `color` as a [background-image](https://developer.mozilla.org/en/docs/Web/CSS/background-image); `color` can be any valid unoCSS color pattern, so it is possible to directly control also the opacity with it; some examples:

```html

```

### `bg-mask-hero-{patternName}`

We use [mask-image](https://developer.mozilla.org/en/docs/Web/CSS/mask-image) to display the patterns, so to change the color of the pattern, its opacity, or the background color, you can use the classes you are used to, for example :

```html

```

## List of patterns
- "jigsaw"
- "overcast"
- "formal-invitation"
- "topography"
- "texture"
- "jupiter"
- "architect"
- "cutout"
- "hideout"
- "graph-paper"
- "yyy"
- "squares"
- "falling-triangles"
- "piano-man"
- "pie-factory"
- "dominos"
- "hexagons"
- "charlie-brown"
- "autumn"
- "temple"
- "stamp-collection"
- "death-star"
- "church-on-sunday"
- "i-like-food"
- "overlapping-hexagons"
- "four-point-stars"
- "bamboo"
- "bathroom-floor"
- "cork-screw"
- "happy-intersection"
- "kiwi"
- "lips"
- "lisbon"
- "random-shapes"
- "steel-beams"
- "tiny-checkers"
- "x-equals"
- "anchors-away"
- "bevel-circle"
- "brick-wall"
- "fancy-rectangles"
- "heavy-rain"
- "overlapping-circles"
- "plus"
- "rounded-plus-connected"
- "volcano-lamp"
- "wiggle"
- "bubbles"
- "cage"
- "connections"
- "current"
- "diagonal-stripes"
- "flipped-diamonds"
- "floating-cogs"
- "glamorous"
- "houndstooth"
- "leaf"
- "lines-in-motion"
- "moroccan"
- "morphing-diamonds"
- "rails"
- "rain"
- "skulls"
- "squares-in-squares"
- "stripes"
- "tic-tac-toe"
- "zig-zag"
- "aztec"
- "bank-note"
- "boxes"
- "circles-squares"
- "circuit-board"
- "curtain"
- "diagonal-lines"
- "endless-clouds"
- "eyes"
- "floor-tile"
- "groovy"
- "intersecting-circles"
- "melt"
- "overlapping-diamonds"
- "parkay-floor"
- "pixel-dots"
- "polka-dots"
- "signal"
- "slanted-stars"
- "wallpaper"

## License