{"id":17531262,"url":"https://github.com/Julien-R44/unocss-preset-heropatterns","last_synced_at":"2025-03-06T10:32:20.085Z","repository":{"id":57700007,"uuid":"510808930","full_name":"Julien-R44/unocss-preset-heropatterns","owner":"Julien-R44","description":"🏁 UnoCSS preset that integrates Hero Patterns.","archived":false,"fork":false,"pushed_at":"2023-05-22T16:29:28.000Z","size":404,"stargazers_count":27,"open_issues_count":1,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-10-21T21:49:26.585Z","etag":null,"topics":["hero-patterns","unocss"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Julien-R44.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["julien-r44"],"polar":"Julien-R44"}},"created_at":"2022-07-05T16:12:50.000Z","updated_at":"2024-10-08T07:43:29.000Z","dependencies_parsed_at":"2024-10-26T09:12:11.730Z","dependency_job_id":"6c500323-48f8-4da8-a074-ac88ad1d0601","html_url":"https://github.com/Julien-R44/unocss-preset-heropatterns","commit_stats":{"total_commits":8,"total_committers":1,"mean_commits":8.0,"dds":0.0,"last_synced_commit":"b2c5ac5d62cec86e725779041a8c13d0b3e235e3"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Julien-R44%2Funocss-preset-heropatterns","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Julien-R44%2Funocss-preset-heropatterns/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Julien-R44%2Funocss-preset-heropatterns/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Julien-R44%2Funocss-preset-heropatterns/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Julien-R44","download_url":"https://codeload.github.com/Julien-R44/unocss-preset-heropatterns/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242191592,"owners_count":20087010,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hero-patterns","unocss"],"created_at":"2024-10-20T17:23:24.037Z","updated_at":"2025-03-06T10:32:19.643Z","avatar_url":"https://github.com/Julien-R44.png","language":"TypeScript","funding_links":["https://github.com/sponsors/julien-r44","https://polar.sh/Julien-R44"],"categories":["Community","Presets"],"sub_categories":["Presets"],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/8337858/188330902-8da839c9-162b-4028-a70e-3b0295f3bcf3.png\"\u003e\n\u003c/p\u003e\n\n# unocss-preset-hero-patterns\n\n🏁 [UnoCSS](https://github.com/unocss/unocss) preset that integrates [Hero Patterns](https://heropatterns.com/)\n\n## Installation\n```\npnpm add -D @julr/unocss-preset-heropatterns\n```\n\n## Usage\n\n```ts\nimport { defineConfig } from 'unocss'\nimport { presetHeroPatterns } from '@julr/unocss-preset-heropatterns'\n\nexport default defineConfig({\n  presets: [\n    presetHeroPatterns()\n  ],\n})\n```\n\nThis preset add 2 rules\n\n### `bg-hero-${patternName}-${color}`\n\nIt 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:\n\n```html\n\u003cdiv class=\"bg-hero-rain-red-500\"\u003e\u003c/div\u003e \u003c!-- this will render the rain pattern with color red-500 --\u003e\n\u003cdiv class=\"bg-hero-rain-red-500/70\"\u003e\u003c/div\u003e \u003c!-- this will render the rain pattern with color red-500 and 70% opacity --\u003e\n\u003cdiv class=\"bg-hero-rain-[#fff]\"\u003e\u003c/div\u003e \u003c!-- this will render the rain pattern with color #fff --\u003e\n\u003cdiv class=\"bg-hero-rain-white-500 bg-dark-500\"\u003e\u003c/div\u003e \u003c!-- it is also possible to combine it with a background color --\u003e\n```\n\n\n### `bg-mask-hero-{patternName}`\n\nWe 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 :\n\n```html\n\u003cdiv class=\"bg-mask-hero-rain bg-red-500 opacity-70\"\u003e\u003c/div\u003e\n```\n\n## List of patterns\n- \"jigsaw\"\n- \"overcast\"\n- \"formal-invitation\"\n- \"topography\"\n- \"texture\"\n- \"jupiter\"\n- \"architect\"\n- \"cutout\"\n- \"hideout\"\n- \"graph-paper\"\n- \"yyy\"\n- \"squares\"\n- \"falling-triangles\"\n- \"piano-man\"\n- \"pie-factory\"\n- \"dominos\"\n- \"hexagons\"\n- \"charlie-brown\"\n- \"autumn\"\n- \"temple\"\n- \"stamp-collection\"\n- \"death-star\"\n- \"church-on-sunday\"\n- \"i-like-food\"\n- \"overlapping-hexagons\"\n- \"four-point-stars\"\n- \"bamboo\"\n- \"bathroom-floor\"\n- \"cork-screw\"\n- \"happy-intersection\"\n- \"kiwi\"\n- \"lips\"\n- \"lisbon\"\n- \"random-shapes\"\n- \"steel-beams\"\n- \"tiny-checkers\"\n- \"x-equals\"\n- \"anchors-away\"\n- \"bevel-circle\"\n- \"brick-wall\"\n- \"fancy-rectangles\"\n- \"heavy-rain\"\n- \"overlapping-circles\"\n- \"plus\"\n- \"rounded-plus-connected\"\n- \"volcano-lamp\"\n- \"wiggle\"\n- \"bubbles\"\n- \"cage\"\n- \"connections\"\n- \"current\"\n- \"diagonal-stripes\"\n- \"flipped-diamonds\"\n- \"floating-cogs\"\n- \"glamorous\"\n- \"houndstooth\"\n- \"leaf\"\n- \"lines-in-motion\"\n- \"moroccan\"\n- \"morphing-diamonds\"\n- \"rails\"\n- \"rain\"\n- \"skulls\"\n- \"squares-in-squares\"\n- \"stripes\"\n- \"tic-tac-toe\"\n- \"zig-zag\"\n- \"aztec\"\n- \"bank-note\"\n- \"boxes\"\n- \"circles-squares\"\n- \"circuit-board\"\n- \"curtain\"\n- \"diagonal-lines\"\n- \"endless-clouds\"\n- \"eyes\"\n- \"floor-tile\"\n- \"groovy\"\n- \"intersecting-circles\"\n- \"melt\"\n- \"overlapping-diamonds\"\n- \"parkay-floor\"\n- \"pixel-dots\"\n- \"polka-dots\"\n- \"signal\"\n- \"slanted-stars\"\n- \"wallpaper\"\n\n## License\n\n[MIT](./LICENSE.md) License © 2022 [Julien Ripouteau](https://github.com/Julien-R44)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJulien-R44%2Funocss-preset-heropatterns","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJulien-R44%2Funocss-preset-heropatterns","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJulien-R44%2Funocss-preset-heropatterns/lists"}