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

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

SCSS source can be found in the scssfolder, compiled CSS can be found inside thecss folder.

Installation

npm

npm i @vkea/pridecss

yarn

yarn add @vkea/pridecss

jsdelivr - pride.css

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@vkea/[email protected]/css/pride.css">

jsdelivr - pride-lite.css

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@vkea/[email protected]/css/pride-lite.css">

unpkg - pride.css

<link rel="stylesheet" href="https://unpkg.com/@vkea/[email protected]/css/pride.css">

unpkg - pride-lite.css

<link rel="stylesheet" href="https://unpkg.com/@vkea/[email protected]/css/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

<div class="pride--nb"></div>

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

Examples

<div class="pride--radial--lesbian"></div>
<div class="pride--horizontal--gay"></div>
<div class="pride--topright--ace"></div>

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.