https://github.com/vkea/pridecss

BEM-compliant SCSS library for adding pride flags as gradient backgrounds.
https://github.com/vkea/pridecss

bem css lgbt lgbtq pride-flags sass sass-framework scss scss-framework scss-library

Last synced: about 20 hours ago
JSON representation

BEM-compliant SCSS library for adding pride flags as gradient backgrounds.

• Host: GitHub
• URL: https://github.com/vkea/pridecss
• Owner: VKEA
• License: other
• Created: 2019-08-29T15:52:24.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-10-13T07:22:09.000Z (12 months ago)
• Last Synced: 2024-09-21T18:19:59.812Z (4 days ago)
• Topics: bem, css, lgbt, lgbtq, pride-flags, sass, sass-framework, scss, scss-framework, scss-library
• Language: CSS
• Homepage: https://www.npmjs.com/package/@vkea/pridecss
• Size: 1.13 MB
• Stars: 18
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
## PrideCSS, a BEM-compliant SCSS library for adding pride flags

[![GitHub license](https://img.shields.io/badge/licence-anti--fascist-blue)](https://github.com/VKEA/PrideCSS/blob/master/LICENSE)

[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/VKEA/PrideCSS/issues)

[![Build Status](https://travis-ci.com/VKEA/PrideCSS.svg?branch=master)](https://travis-ci.com/VKEA/PrideCSS)

[![Codacy Badge](https://app.codacy.com/project/badge/Grade/2543248deaf74fab817ff52cabc1ee84)](https://www.codacy.com/gh/VKEA/PrideCSS/dashboard?utm_source=github.com&utm_medium=referral&utm_content=VKEA/PrideCSS&utm_campaign=Badge_Grade)

[![Known Vulnerabilities](https://snyk.io/test/github/VKEA/PrideCSS/badge.svg)](https://snyk.io/test/github/VKEA/PrideCSS?targetFile=package.json)

PrideCSS is a SCSS library for adding pride flags to your HTML elements.

SCSS source can be found in the `scss`folder, compiled CSS can be found inside the`css` folder.

![a screenshot of the different flags](sample.png)

## Installation

npm

```

npm i @vkea/pridecss

```

yarn

```

yarn add @vkea/pridecss

```

jsdelivr - pride.css

```

```

jsdelivr - pride-lite.css

```

```

unpkg - pride.css

```

```

unpkg - pride-lite.css

```

```

## Usage

PrideCSS 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.

PrideCSS class names start with the word `pride`, followed by Block Element Modifier (BEM) modifiers.

Example

```html



```


You can use different modifiers like `horizontal`, `radial` or `bottomleft` to specify the direction of the pride gradient.

Examples

```html







```


## Modifiers

### Pride flags

| Flag           | Type     |

|----------------|---------:|

| agender        | standard |

| agender2       | standard |

| androgyne      | standard |

| androgyne2     | standard |

| aro            | standard |

| aro2           | standard |

| aro3           | standard |

| aroace         | standard |

| ace            | standard |

| ace2           | standard |

| bear           | standard |

| bi             | standard |

| demiboy        | standard |

| demigender     | standard |

| demigirl       | standard |

| demisexual     | complex  |

| gay            | standard |

| genderfluid    | standard |

| genderqueer    | standard |

| gilbertbaker   | standard |

| intersex       | radial   |

| intersex2      | standard |

| lesbian        | standard |

| lesbian2       | standard |

| lesbian3       | standard |

| maverique      | standard |

| mlm            | standard |

| mlm2           | standard |

| mlm3           | standard |

| neutrois       | standard |

| nb             | standard |

| nb2            | standard |

| nb3            | standard |

| omnisexual     | standard |

| pan            | standard |

| philadelphia   | standard |

| polygender     | standard |

| polysexual     | standard |

| quasar         | complex  |

| sapphic        | standard |

| trans          | standard |

| twink          | standard |

### Gradient directions

| Direction                   | Compatibility             |

|-----------------------------|--------------------------:|

| {name}                      | standard, radial, complex |

| horizontal--{name}          | standard                  |

| topleft--{name}             | standard                  |

| topright--{name}            | standard                  |

| bottomright--{name}         | standard                  |

| bottomleft--{name}          | standard                  |

| radial--{name}              | standard, radial          |

| radial--top--{name}         | standard, radial          |

| radial--bottom--{name}      | standard, radial          |

| radial--left--{name}        | standard, radial          |

| radial--right--{name}       | standard, radial          |

| radial--topleft--{name}     | standard, radial          |

| radial--topright--{name}    | standard, radial          |

| radial--bottomright--{name} | standard, radial          |

| radial--bottomleft--{name}  | standard, radial          |

| border--thin--{name}        | standard                  |

| border--thin--{name}        | standard                  |

| border--thick--{name}       | standard                  |

| border--dummythicc--{name}  | standard                  |

## Contributing

Flags 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.

Run `npm i` to install Grunt, SCSS and Stylelint packages.

If you have the Grunt CLI, you can run `grunt`, which automatically compiles and lints your changes.