{"id":15041412,"url":"https://github.com/vkea/pridecss","last_synced_at":"2025-04-14T20:17:19.843Z","repository":{"id":39763025,"uuid":"205198699","full_name":"VKEA/PrideCSS","owner":"VKEA","description":"BEM-compliant SCSS library for adding pride flags as gradient backgrounds.","archived":false,"fork":false,"pushed_at":"2023-10-13T07:22:09.000Z","size":1187,"stargazers_count":20,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-14T20:17:13.478Z","etag":null,"topics":["bem","css","lgbt","lgbtq","pride-flags","sass","sass-framework","scss","scss-framework","scss-library"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@vkea/pridecss","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/VKEA.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-29T15:52:24.000Z","updated_at":"2025-02-09T15:50:41.000Z","dependencies_parsed_at":"2023-02-08T09:16:43.877Z","dependency_job_id":null,"html_url":"https://github.com/VKEA/PrideCSS","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VKEA%2FPrideCSS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VKEA%2FPrideCSS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VKEA%2FPrideCSS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VKEA%2FPrideCSS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/VKEA","download_url":"https://codeload.github.com/VKEA/PrideCSS/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248952358,"owners_count":21188427,"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":["bem","css","lgbt","lgbtq","pride-flags","sass","sass-framework","scss","scss-framework","scss-library"],"created_at":"2024-09-24T20:46:04.543Z","updated_at":"2025-04-14T20:17:19.818Z","avatar_url":"https://github.com/VKEA.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"## PrideCSS, a BEM-compliant SCSS library for adding pride flags\n\n[![GitHub license](https://img.shields.io/badge/licence-anti--fascist-blue)](https://github.com/VKEA/PrideCSS/blob/master/LICENSE)\n[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/VKEA/PrideCSS/issues)\n[![Build Status](https://travis-ci.com/VKEA/PrideCSS.svg?branch=master)](https://travis-ci.com/VKEA/PrideCSS)\n[![Codacy Badge](https://app.codacy.com/project/badge/Grade/2543248deaf74fab817ff52cabc1ee84)](https://www.codacy.com/gh/VKEA/PrideCSS/dashboard?utm_source=github.com\u0026amp;utm_medium=referral\u0026amp;utm_content=VKEA/PrideCSS\u0026amp;utm_campaign=Badge_Grade)\n[![Known Vulnerabilities](https://snyk.io/test/github/VKEA/PrideCSS/badge.svg)](https://snyk.io/test/github/VKEA/PrideCSS?targetFile=package.json)\n\nPrideCSS is a SCSS library for adding pride flags to your HTML elements.\n\nSCSS source can be found in the `scss`folder, compiled CSS can be found inside the`css` folder.\n\n![a screenshot of the different flags](sample.png)\n\n## Installation\n\nnpm\n\n```\nnpm i @vkea/pridecss\n```\n\nyarn\n\n```\nyarn add @vkea/pridecss\n```\n\njsdelivr - pride.css\n\n```\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@vkea/pridecss@3.4.0/css/pride.css\"\u003e\n```\n\njsdelivr - pride-lite.css\n\n```\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@vkea/pridecss@3.4.0/css/pride-lite.css\"\u003e\n```\n\nunpkg - pride.css\n\n```\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/@vkea/pridecss@3.4.0/css/pride.css\"\u003e\n```\n\nunpkg - pride-lite.css\n\n```\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/@vkea/pridecss@3.4.0/css/pride-lite.css\"\u003e\n```\n\n\n## Usage\n\nPrideCSS comes in two flavours: a full version and a light version. If you don't need to use directional modifiers for your flags, it is recommended to use the light version `pride-lite`, which contains all different pride flags, but without directional modifiers.\n\nPrideCSS class names start with the word `pride`, followed by Block Element Modifier (BEM) modifiers.\n\nExample\n\n```html\n\u003cdiv class=\"pride--nb\"\u003e\u003c/div\u003e\n```\n\nYou can use different modifiers like `horizontal`, `radial` or `bottomleft` to specify the direction of the pride gradient.\n\nExamples\n\n```html\n\u003cdiv class=\"pride--radial--lesbian\"\u003e\u003c/div\u003e\n\u003cdiv class=\"pride--horizontal--gay\"\u003e\u003c/div\u003e\n\u003cdiv class=\"pride--topright--ace\"\u003e\u003c/div\u003e\n```\n\n## Modifiers\n\n### Pride flags\n\n| Flag           | Type     |\n|----------------|---------:|\n| agender        | standard |\n| agender2       | standard |\n| androgyne      | standard |\n| androgyne2     | standard |\n| aro            | standard |\n| aro2           | standard |\n| aro3           | standard |\n| aroace         | standard |\n| ace            | standard |\n| ace2           | standard |\n| bear           | standard |\n| bi             | standard |\n| demiboy        | standard |\n| demigender     | standard |\n| demigirl       | standard |\n| demisexual     | complex  |\n| gay            | standard |\n| genderfluid    | standard |\n| genderqueer    | standard |\n| gilbertbaker   | standard |\n| intersex       | radial   |\n| intersex2      | standard |\n| lesbian        | standard |\n| lesbian2       | standard |\n| lesbian3       | standard |\n| maverique      | standard |\n| mlm            | standard |\n| mlm2           | standard |\n| mlm3           | standard |\n| neutrois       | standard |\n| nb             | standard |\n| nb2            | standard |\n| nb3            | standard |\n| omnisexual     | standard |\n| pan            | standard |\n| philadelphia   | standard |\n| polygender     | standard |\n| polysexual     | standard |\n| quasar         | complex  |\n| sapphic        | standard |\n| trans          | standard |\n| twink          | standard |\n\n### Gradient directions\n| Direction                   | Compatibility             |\n|-----------------------------|--------------------------:|\n| {name}                      | standard, radial, complex |\n| horizontal--{name}          | standard                  |\n| topleft--{name}             | standard                  |\n| topright--{name}            | standard                  |\n| bottomright--{name}         | standard                  |\n| bottomleft--{name}          | standard                  |\n| radial--{name}              | standard, radial          |\n| radial--top--{name}         | standard, radial          |\n| radial--bottom--{name}      | standard, radial          |\n| radial--left--{name}        | standard, radial          |\n| radial--right--{name}       | standard, radial          |\n| radial--topleft--{name}     | standard, radial          |\n| radial--topright--{name}    | standard, radial          |\n| radial--bottomright--{name} | standard, radial          |\n| radial--bottomleft--{name}  | standard, radial          |\n| border--thin--{name}        | standard                  |\n| border--thin--{name}        | standard                  |\n| border--thick--{name}       | standard                  |\n| border--dummythicc--{name}  | standard                  |\n\n## Contributing\n\nFlags and CSS generation are split. `scss/flags` is where the flags are defined, `scss/logic` is where the CSS generation logic is, `pride.scss` and `pride-lite.scss` are output files.\n\nRun `npm i` to install Grunt, SCSS and Stylelint packages.\n\nIf you have the Grunt CLI, you can run `grunt`, which automatically compiles and lints your changes.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvkea%2Fpridecss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvkea%2Fpridecss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvkea%2Fpridecss/lists"}