Controller (CSSC)

The controller object (CSSC) is a function to get handler object or to import new style sheets.

• get handler object

var h = CSSC(".className"); //get handler object with all CSS objects are defined as .className
    h = CSSC([".className1", ".className2"]); //get handler object with .className1 and .className2
    h = CSSC(/\.className[0-9]/); //get handler obejct with objects matched to regular expression
    h = CSSC(); //get handler object with all defined CSS objects

• define CSS (import)

//define new style sheets
CSSC({
    ".className": {
        border: "1px solid #000"
    },
    ".className1": {
        border: "1px dotted #000"
    },
    ".className2": function(){ //updatable object
        return {
            border: "none"
        };
    }
});

Methods

---

.init()

init is a method to initialize allready defined CSS. After init you can change, show or delete CSS.

.init(initObj)

• initObj - DOM "<style>", "<link>" element, an other CSSC object, StyleSheet object or Array containing it.

Return value - Controller object (CSSC)

Example

// init all defined CSS rules in 
// '<style id="style-sheet">...</style>' element
CSSC.init(document.getElementById("style-sheet")); 

// init all CSS rules in all 
// '<style>...</style>' elements
CSSC.init(document.querySelectorAll("style")); 

---

.import()

import is a method to import JS objects to the CSS Controller.

.import(importObj)

• importObj - an object with style sheets

Return value - Controller object (CSSC)

Example

var importObj = {
    body: {
        margin: 1
    },
    p: {
        width: 500,
        margin: "auto",
        "span.first": { // generate CSS rule "p span.first"
            "font-size": 25
        },
        "@media screen and (max-width: 500px)": { // generate media rule with "p" rule
            width: "100%"
        }
    },
    ".updatable": function(){ // generate updatable class
        return {
            'font-size': 10 + (Math.random() * 10),
        };
    }
};

CSSC.import(importObj); //alternativly can be used simply CSSC(importObj);

---

.update()

update is a method for updating CSS properties which have been defined via functions

.update([selector])

• selector [optional] - a selector as String or RegEx or Array of Strings

Return value - Controller object (CSSC)

Example

CSSC.update(); // update all CSS rules which were defined through functions
// or
CSSC.update(".updatable"); // update CSS rule .updatable when it was defined through function

---

.export()

export is a method to export defined CSS as String, Object or Array

.export([exportType])

• exportType [optional] - String with export type (default: "object")
  • "css" - export as CSS String
  • "min" - export as minified CSS String
  • "obj" - export as JS-Object
  • "arr" - export as array
  • "object" - the same as "obj"
  • "objNMD" - export as not multidimensional object
  • "array" - the same as "arr"

Return value - Mixed

Example

CSSC({
    body: {
        margin: 1
    },
    p: {
        width: 500,
        margin: "auto",
        "span.first": { // generate CSS rule "p span.first"
            "font-size": 25
        },
        "@media screen and (max-width: 500px)": { // generate media rule with "p" rule
            width: "100%"
        }
    },
    ".updatable": function(){ // generate updatable class
        return {
            'font-size': 10 + (Math.random() * 10),
        };
    }
});

var exportObject = CSSC.export(); // or CSSC.export("obj") or CSSC.export("object")
console.log(JSON.stringify(exportObject, true, 4));
/*
{
    "body": {
        "margin": "1px"
    },
    "p": {
        "width": "500px",
        "margin": "auto",
        "span.first": {
            "font-size": "25px"
        },
        "@media screen and (max-width: 500px)": {
            "width": "100%"
        }
    },
    ".updatable": {
        "font-size": "18.34px"
    }
}
*/

exportObject = CSSC.export("css");
console.log(exportObject);
/*
body {
  margin: 1px;
}
p {
  width: 500px;
  margin: auto;
}
p span.first {
  font-size: 25px;
}
@media screen and (max-width: 500px) {
  p {
    width: 100%;
  }
}
.updatable {
  font-size: 18.34px;
}
*/

exportObject = CSSC.export("min");
console.log(exportObject);
/*
body{margin:1px;}p{width:500px;margin:auto;}p span.first{font-size:25px;}@media screen and (max-width:500px){p{width:100%;}}.updatable{font-size:18.34px;}
*/

exportObject = CSSC.export("objNMD");
console.log(JSON.stringify(exportObject, true, 4));
/*
{
    "body": {
        "margin": "1px"
    },
    "p": {
        "width": "500px",
        "margin": "auto"
    },
    "p span.first": {
        "font-size": "25px"
    },
    "@media screen and (max-width: 500px)": {
        "p": {
            "width": "100%"
        }
    },
    ".updatable": {
        "font-size": "18.34px"
    }
}
*/

exportObject = CSSC.export("array");
console.log(JSON.stringify(exportObject, true, 4));
/*
[
    {
        "body": {
            "margin": "1px"
        }
    },
    {
        "p": {
            "width": "500px",
            "margin": "auto"
        }
    },
    {
        "p span.first": {
            "font-size": "25px"
        }
    },
    {
        "@media screen and (max-width: 500px)": [
            {
                "p": {
                    "width": "100%"
                }
            }
        ]
    },
    {
        ".updatable": {
            "font-size": "18.34px"
        }
    }
]
*/

---

.parse()

parse is a method to parse defined CSS. This method is identical to .export(CSSC.typeexport.css) or export(CSSC.typeexport.min)

.parse([min])

• min [optional] - Boolean, if true return a minified CSS (default: false)

Return value - String with CSS

Example

/*
this method returns the same result as .export("css") or .export("min");
*/

exportObject = CSSC.parse(); // or .parse(false)
console.log(exportObject);
/*
body {
  margin: 1px;
}
p {
  width: 500px;
  margin: auto;
}
p span.first {
  font-size: 25px;
}
@media screen and (max-width: 500px) {
  p {
    width: 100%;
  }
}
.updatable {
  font-size: 18.34px;
}
*/

exportObject = CSSC.parse(true);
console.log(exportObject);
/*
body{margin:1px;}p{width:500px;margin:auto;}p span.first{font-size:25px;}@media screen and (max-width:500px){p{width:100%;}}.updatable{font-size:18.34px;}
*/

---

.conf()

conf is a method to set or get configurations.

.conf([conf[, value]])

• conf [optional] - An object with key-value pair to set, Array of Strings to get or key as String to set/get
• value [optional] - if conf a String becomes value to set

Return value - Mixed -> Controller object (CSSC) if set, or object key-value pair, or configuration value

Example

CSSC.conf({ // set as object
    style_id: "my-style-sheets", // [String]  Document element ID 
    view_err: true,              // [Boolean] Show errors in console
    parse_tab_len: 4             // [Integer] Length of space characters by export
});

CSSC.conf("style_id", "cssc-sheet");      // set with key String
CSSC.conf("style_id");                    // get with key String 
CSSC.conf(["style_id", "parse_tab_len"]); // get with Array of strings, return an object as key-value pair
CSSC.conf();                              // get all defined configurations

---

.vars()

vars is a method to set or get variables. If you need to use variable keys, you can use this method.

.vars([varName[, value]])

• varName [optional] - An object with key-value pair to set, Array of Strings to get or key as String to set/get
• value [optional] - if varName a String becomes value to set

Return value - Mixed -> Controller object (CSSC) if set, or object key-value pair, or variable value

Example

//The principle of set and get vars is the same as with conf method.

CSSC.vars({
    T: "-top", // use String / Integer / Float
    R: "-right",
    B: "-bottom",
    L: "-left",
    box: { // use Objects or Arrays
        m: "margin",
        p: "padding"
    },
    media: function(a, b) // use Functions
    {
        return "@media "+a+" and (max-width: "+b+"px)";
    },
    MT: "$box.m$T", // use vars in vars
});


// begin the var with "$" character
CSSC({
    body: {
        "$box.m": 10,
        "$box.p$T": 15,
        "$media(screen, 500)": {
            "$box.m$B": 20,
            $MT: 25
        }
    }
});

console.log(CSSC.parse());
/*
body {
  margin: 10px;
  padding-top: 15px;
}
@media screen and (max-width: 500px) {
  body {
    margin-bottom: 20px;
    margin-top: 25px;
  }
}
*/

---

.units()

units is a method to set or get units. If you need multiple units, you can use this method.

.units([property[, unit]])

• property [optional] - An object with key-value pair to set, Array of Strings to get or key as String to set/get
• unit [optional] - if property a String becomes value to set

Return value - Mixed -> Controller object (CSSC) if set, or object key-value pair, or unit value

Example

CSSC.units("font-size", "em");
CSSC.units({
    'margin': "px",
    'margin-top': "%"
});

CSSC({
    ".myClass": {
        "font-size": 2,
        "margin": 20,
        "margin-top": 1,
        "padding": 20    // <- "px" by default (CSSC.conf("parse_unit_default"))
    }
});

console.log(CSSC.parse());
/*
.myClass {
  font-size: 2em;
  margin: 20px;
  margin-top: 1%;
  padding: 20px;
}
*/

---

.parseVars()

this method is a helper function, can be used to test your vars.

.parseVars(text[, vars])

• text - A String, the text to parse
• vars [optional] - An object with variables as key-value pair

Return value - Parsed string

Example

CSSC.vars({
    myVar: "my variable text",
});

var val = CSSC.parseVars("this is $myVar");
console.log(val);
/*
this is my variable text
*/

val = CSSC.parseVars("this is $myVar", {myVar: "my temporarily overwritten text"});
console.log(val);
/*
this is my temporarily overwritten text
*/

val = CSSC.parseVars("this var $notExists");
console.log(val);
/*
this var $notExists
*/

---

.objFromCss()

this method is a helper function, can be used to generate an object from a css string.

.objFromCss(css)

• css - A CSS String

Return value - Generated object

Example

var cssObj = CSSC.objFromCss("body{margin:20px;}");
console.log(JSON.stringify(cssObj, true, 4));
/*
{
    "margin": "20px"
}
*/

---

Properties

---

.version

version is a String with version number of CSS Controller

console.log(CSSC.version);
/*
1.0b
*/

---

.type

type is an object with CSS type definitions

console.log(JSON.stringify(CSSC.type, true, 4));
/*
{
    "rule": 1,
    "charset": 2,
    "import": 3,
    "media": 4,
    "fontFace": 5,
    "page": 6,
    "keyframes": 7,
    "keyframe": 8,
    "namespace": 10,
    "counterStyle": 11,
    "supports": 12,
    "fontFeatureValues": 14,
    "viewport": 15
}
*/

---

.type_export

type_export is an object with CSS Controller export-type definitions

console.log(JSON.stringify(CSSC.type_export, true, 4));
/*
{
    "css": "css",
    "min": "min",
    "obj": "obj",
    "arr": "arr",
    "object": "object",
    "notMDObject": "objNMD",
    "array": "array"
}
*/

---

._conf

_conf is an object with default CSSC configurations

console.log(JSON.stringify(CSSC._conf, true, 4));
/*
{
    "style_id": "cssc-style",   // [String] ID of the "<style>" element
    "view_err": true,           // [Boolean] if true, the errors are displayed in console
    "parse_tab": 2,             // [String/Integer] A tabulator string or length of space characters as integer
    "parse_unit_default": "px", // [String] default unit to set on values if integer or float given
    "parse_vars_limit": 100     // [Integer] limit to max parse variables
}
*/

---