gaydients v1.0.4

gaydients

gaydients is a collection of lgbtqiap+ gradients made with css. they help make the web gay. free and always will be.

view examples at gaydients.lgbt

installation

install with npm:

npm install gaydients --save

install with yarn:

yarn add gaydients

getting started

there's a few ways to use gaydients, depending on your use case.

if you're using any of the css-in-js flavors, the best way is to just import the styles as an object:

import gaydients from 'gaydients';

this gives you access to each of values ready for you to use:

{
  prideFlag: ...
  prideGradient: ...
  transFlag: ...
  transGradient: ...
  enbyFlag: ...
  enbyGradient: ...
  genderqueerFlag: ...
  genderqueerGradient: ...
  aceFlag: ...
  aceGradient: ...
  pansexualFlag: ...
  pansexualGradient: ...
  aroFlag: ...
  aroGradient: ...
  agenderFlag: ...
  agenderGradient: ...
  intersexFlag: ...
  intersexGradient: ...
  bisexualFlag: ...
  bisexualGradient: ...
  rainbowFlag: ...
  rainbowGradient: ...
  blackTransFlag: ...
  blackTransGradient: ...
  genderfluidFlag: ...
  genderfluidGradient: ...
}

you can also just import the ones you need:

import {transFlag, enbyFlag} from 'gaydients';

classes

there's also convenient classes you can use for default flags and gradients.

just import the sass:

@import "~gaydients/gaydients.scss";

you can also set change the .gaydient class prefix by setting $gaydients-class-prefix to whatever you want.

documentation

below are the available functions to build out flags.

gaydient-pride

function used to generate pride flag

these defaults are set through the following variables:

$gaydients-pride-black: ...
$gaydients-pride-brown: ...
$gaydients-pride-red: ...
$gaydients-pride-orange: ...
$gaydients-pride-yellow: ...
$gaydients-pride-green: ...
$gaydients-pride-blue: ...
$gaydients-pride-purple: ...
$gaydients-pride-opacity: ...
$gaydients-pride-degrees: ...
$gaydients-pride-chunk: ...

gaydient-trans

function used to generate trans flag

these defaults are set through the following variables:

$gaydients-trans-blue: ...
$gaydients-trans-pink: ...
$gaydients-trans-white: ...
$gaydients-trans-opacity: ...
$gaydients-trans-degrees: ...
$gaydients-trans-chunk: ...

gaydient-enby

function used to generate non-binary flag

these defaults are set through the following variables:

$gaydients-enby-yellow: ...
$gaydients-enby-white: ...
$gaydients-enby-purple: ...
$gaydients-enby-black: ...
$gaydients-enby-opacity: ...
$gaydients-enby-degrees: ...
$gaydients-enby-chunk: ...

gaydient-genderqueer

function used to generate genderqueer flag

these defaults are set through the following variables:

$gaydients-genderqueer-lavender: ...
$gaydients-genderqueer-white: ...
$gaydients-genderqueer-green: ...
$gaydients-genderqueer-opacity: ...
$gaydients-genderqueer-degrees: ...
$gaydients-genderqueer-chunk: ...

gaydient-ace

function used to generate ace flag

these defaults are set through the following variables:

$gaydients-ace-black: ...
$gaydients-ace-grey: ...
$gaydients-ace-white: ...
$gaydients-ace-purple: ...
$gaydients-ace-opacity: ...
$gaydients-ace-degrees: ...
$gaydients-ace-chunk: ...

gaydient-pansexual

function used to generate pansexual flag

these defaults are set through the following variables:

$gaydients-pansexual-pink: ...
$gaydients-pansexual-yellow: ...
$gaydients-pansexual-blue: ...
$gaydients-pansexual-opacity: ...
$gaydients-pansexual-degrees: ...
$gaydients-pansexual-chunk: ...

gaydient-aro

function used to generate aro flag

these defaults are set through the following variables:

$gaydients-aro-green: ...
$gaydients-aro-lightgreen: ...
$gaydients-aro-white: ...
$gaydients-aro-grey: ...
$gaydients-aro-black: ...
$gaydients-aro-opacity: ...
$gaydients-aro-degrees: ...
$gaydients-aro-chunk: ...

gaydient-agender

function used to generate agender flag

these defaults are set through the following variables:

$gaydients-agender-black: ...
$gaydients-agender-grey: ...
$gaydients-agender-white: ...
$gaydients-agender-green: ...
$gaydients-agender-opacity: ...
$gaydients-agender-degrees: ...
$gaydients-agender-chunk: ...

gaydient-intersex

function used to generate intersex flag

these defaults are set through the following variables:

$gaydients-intersex-yellow: ...
$gaydients-intersex-purple: ...
$gaydients-intersex-opacity: ...
$gaydients-intersex-degrees: ...
$gaydients-intersex-chunk: ...
$gaydients-intersex-flag: ...

gaydient-bisexual

function used to generate bisexual flag

$gaydients-bisexual-pink: ...
$gaydients-bisexual-purple: ...
$gaydients-bisexual-blue: ...
$gaydients-bisexual-opacity: ...
$gaydients-bisexual-degrees: ...
$gaydients-bisexual-chunk: ...

gaydient-rainbow

function used to generate rainbow flag

these defaults are set through the following variables:

$gaydients-rainbow-red: ...
$gaydients-rainbow-orange: ...
$gaydients-rainbow-yellow: ...
$gaydients-rainbow-green: ...
$gaydients-rainbow-blue: ...
$gaydients-rainbow-purple: ...
$gaydients-rainbow-opacity: ...
$gaydients-rainbow-degrees: ...
$gaydients-rainbow-chunk: ...

gaydient-black-trans

function used to generate black trans flag

these defaults are set through the following variables:

$gaydients-black-trans-blue: ...
$gaydients-black-trans-pink: ...
$gaydients-black-trans-black: ...
$gaydients-black-trans-opacity: ...
$gaydients-black-trans-degrees: ...
$gaydients-black-trans-chunk: ...

gaydient-genderfluid

function used to generate genderfluid flag

these defaults are set through the following variables:

$gaydients-genderfluid-pink: ...
$gaydients-genderfluid-white: ...
$gaydients-genderfluid-purple: ...
$gaydients-genderfluid-black: ...
$gaydients-genderfluid-blue: ...
$gaydients-genderfluid-opacity: ...
$gaydients-genderfluid-degrees: ...
$gaydients-genderfluid-chunk: ...

notes

customizing the gradients for your exact specifications probably involves using both the sass to use the built-in functions and importing your custom values to js for best practices.

contributing

there's lots of flags missing! please submit pull requests for new flags, or issues to request specific flags.

license

this is licensed under GNU GPLv3

change log

shout out

shout out to the person who owns gaydients.com. i ran across this after building this trying to get a domain name.