Nirvana Playing Madonna

    @deidee/dejade

    2.0.0 • Public • Published

    deJade

    Groen is de primaire kleur van de identiteit van deIdee. In tegenstelling tot wat gebruikelijk is bij een huisstijl wordt deze kleur echter niet gedefinieerd door een specifieke kleurcode, maar door een (vrij ruime) bandbreedte. De herkenbaarheid zou in dit geval juist moeten zitten in de variatie. Als verschillende huisstijlelementen naast elkaar worden gebruikt, zoals de blokjes in het logo, is het de bedoeling dat deze van elkaar afwijken. Ook bij verschillende implementaties van dezelfde elementen zou deze variatie terug moeten komen; zo zal het logo op het ene document weer een beetje anders zijn als op het andere document.

    Tot slot kan de kleur worden beïnvloed — uiteraard bínnen de gestelde bandbreedtes — door externe factoren, zoals de tijd van de dag, de positie van de muis op een beeldscherm, of hoe warm het buiten is.

    Definitie

    De originele regel (Python)code, circa 2006:

    fill(random(0, .5), random(.5, 1), random(0, .75), .5)

    Uitkomsten

    De meest „extreme” mogelijkheden zijn als volgt:

    #007f00 #00ff00 #007fbf #00ffbf #7f7f00 #7f7fbf #7f7f00 #7fffbf

    Alle kleuren die tussen deze mogelijkheden kunnen worden geïnterpoleerd zijn ook mogelijk.

    Installatie

    npm i @deidee/dejade

    Gebruik

    deJade kan worden toegepast op een webpagina door een link naar het stijlblad in de head te plaatsen:

    <link rel="stylesheet" href="css/dejade.min.css">

    Vervolgens kan de kleur via een class op verschillende manieren op elementen worden toegepast:

    class beschrijving
    bg-dejade Past deJade toe als achtergrondkleur van en vlak.
    border-dejade Voegt een rand toe aan een vlak en geeft deze deJade als kleur.
    fill-dejade Past deJade toe als vulkleur van een SVG-element.
    stroke-dejade Past deJade toe als omlijning van een SVG-element.
    text-dejade Past deJade toe als tekstkleur.

    Interactie

    deJade komt het best tot z’n recht als het interacties aangaat. Dergelijke interacties zijn buiten de scope van dit pakket, maar het pakket biedt wel aanknopingspunten.

    class data-attribuut CSS-variabele gebruik
    js-degyro data-degyro --dejade-degyro interactie met een gyroscoop
    js-deklik data-deklik --dejade-deklik interactie met een (muis)klik
    js-demuis data-demuis --dejade-demuis interactie met een muis (bijvoorbeeld de positie op het scherm)
    js-deplek data-deplek --dejade-deplek interactie met de geografische locatie van het apparaat
    js-derand data-derand --dejade-derand interactie met willekeur (bijvoorbeeld het herladen van een pagina)
    js-detijd data-detijd --dejade-detijd interactie met tijd

    Door een class of data-attribuut uit deze tabel toe te passen op een element wordt toegang verschaft tot de relevante CSS-variabele die vervolgens middels scripting kan worden beïnvloed.

    Uitbreidingen

    De implementatie van deJade in de identiteit van deIdee gaat via greenius — een algoritme dat ervoor zorgt dat er onder specifieke condities specifieke uitzonderingen worden gemaakt op de kleur. Zo is gedurende de borstkankermaand oktober bijvoorbeeld altijd één van de blokjes van het logo roze in plaats van groen.

    Publiceren

    Publiceren wordt gedaan door deIdee en wel op de volgende manier:

    npm publish --access public

    Install

    npm i @deidee/dejade

    DownloadsWeekly Downloads

    16

    Version

    2.0.0

    License

    UNLICENSED

    Unpacked Size

    25.8 kB

    Total Files

    13

    Last publish

    Collaborators

    • acj