❤
npm
Sign UpSign In

This package has been deprecated

css-var-helper

0.1.1 • Public • Published

WARNING : This package has been deprecated and replaced by an improved implementation, with a better approach. New package name : css-global-variables (Available here)

[DEPRECATED] css-var-helper : CSS3 Variables Manipulation with JS (ES6)

The cssVar helper provides easy manipulation of your GLOBAL (:root) CSS3 variables, simplifying the templating related scenarios & tasks, through a natural interface:

// set the CSS global --myVariableName value  to "myVariableNewValue"
cssVar.myVariableName = "myVariableNewValue";

Features:

  • All your CSS global (:root selector) variables are stored in the cssVar Object as properties. Any change on them will be instantly reflected into the CSS realm.
  • The -- variable name prefix , is not required when setting or getting variables using cssVar. It is included automatically by the library when not explicitly set. This provides a more natural & fast coding experience. (However is still required on the CSS realm)
  • Automagically detects any new CSS attachment in the document, performed after the initial load.

Limitations :

  • cssVar only operates with Global (:root) CSS Variables. Any definition/overwritting done inside another CSS selector will not be detected, and could affect the proper behavior of cssVar.
  • When cssVar library is loaded into the document, can generate a small delay, if the document has extensive CSS definitions.

Installation :

1- Clone the repository locally, and attach the library to your Html document

<script src="path/to/css-var.js"></script>

2- Use the online delivery network

<script src="https://cdn.rawgit.com/colxi/css-var/master/css-var.js"></script>

3- Install it using npm and dynamically import it. (unsafe! Not available in all browsers)

$ npm install css-var-helper
import("./css-var.js")

Once he library is attached/imported with any of the previous methods, the global Object cssVar will be available, and ready for usage!

Usage

The cssVar Object behaves as a regular Js Object. Any regular Object operation can be performed in cssvar. We are going to focus here, only in the most useful and interesting ones : enumeration , getters , setters

Enumerate all declared CSS3 global variables iterating the cssVar Object :

for(let v in cssVar){
    if ( cssVar.hasOwnProperty(v) ) console.log(v);
}

Set a new value to a CSS3 Global variabe :

/* The following assigments behave equally, and are all valid */
cssVar.myVariable = 'newValue';
cssVar['myVariable'] = 'newValue';
cssVar['--myVariable'] = 'newValue';

Get the value of a CSS3 Global variabe :

/* The following value retrievals behave equally, and are all valid */
console.log( cssVar.myVariable );
console.log( cssVar['myVariable'] );
console.log( cssVar['--myVariable'] );

Example

The following example (available in ./demo), randomizes the background color, and the font size, each time receives a click. You can test it here

style.css

:root{
    /* declaration of some CSS3 global variables */
    --primaryColor : #F2A2BB;
    --textSize : 12;
}
 
body{
    /* Body background color will be set by the CSS variable --primaryColor */
    background-color: var(--primaryColor);
    /* Some extra styling ... */
    text-align:center;
    margin: 0;
    height: 100%;
    cursor:pointer;
}
 
div{
    /* The size of the text is set by --textSize */
    /* Trick : Multiplying * 1px the value of th var, will add the needd "px" sufix */
    font-size: calc( var(--textSize) * 1px );
    /* Some extra styling ... */
    position: relative;
    top: 50%;
}

demo.js

// on document ready...
document.addEventListener('DOMContentLoaded', function(){
    // ...attach click event to te body
    document.body.addEventListener('click', function(){
        /* Generate and assign random color */
    cssVar.primaryColor = '#'+Math.random().toString(16).substr(-6);
    /* Generate and assign random size, betwen 15 and 45 */
    cssVar.textSize = Math.floor( Math.random()*30 + 15 );
    })
} , false);

index.html

<html>
    <head>
         <script src="https://cdn.rawgit.com/colxi/css-var/master/css-var.js"></script> 
         <link rel="stylesheet" href="./style.css" />
         <script src="./demo.js"></script> 
    </head>
     <body>
        <div>Randomize!</div>
     </body>
 <html>

Readme

Keywords

Package Sidebar

Install

npm i css-var-helper

Repository

git+https://github.com/colxi/

Homepage

github.com/colxi/

Weekly Downloads

3

Version

0.1.1

License

GPL-3.0

Unpacked Size

48.7 kB

Total Files

8

Last publish

Collaborators

  • colxi
Try on RunKit
Report malware