Skip to content

Latest commit

 

History

History
141 lines (123 loc) · 3.15 KB

README.md

File metadata and controls

141 lines (123 loc) · 3.15 KB
Raw

unocss-preset-hero-patterns

🏁 UnoCSS preset that integrates Hero Patterns

Installation

pnpm add -D @julr/unocss-preset-heropatterns

Usage

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; color can be any valid unoCSS color pattern, so it is possible to directly control also the opacity with it; some examples:

<div class="bg-hero-rain-red-500"></div> <!-- this will render the rain pattern with color red-500 -->
<div class="bg-hero-rain-red-500/70"></div> <!-- this will render the rain pattern with color red-500 and 70% opacity -->
<div class="bg-hero-rain-[#fff]"></div> <!-- this will render the rain pattern with color #fff -->
<div class="bg-hero-rain-white-500 bg-dark-500"></div> <!-- it is also possible to combine it with a background color -->

bg-mask-hero-{patternName}

We use 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 :

<div class="bg-mask-hero-rain bg-red-500 opacity-70"></div>

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

MIT License © 2022 Julien Ripouteau