Initialization

Description: The ctr Javascript API is a simple ECMAScript 2015 class exported under the js identifier. Accordingly, a ctr instance must be initialized with the new operator. During initialization, a global option Object can be passed to the new ctr instance to set initial options.

Example

// requirie, which that I admire
const CTR = require('ctr').js;
// kick it with the new kids and use an es2015 import
import {js as CTR} from 'ctr';
// ctr instance is initialized and ready to rock'n roll
const ctr = new CTR();

Notes

create

Description: The create method is the main squeeze. It creates and processes styles which are aggregated in the ctr instance as a Set.

Parameters

Arguments

Example

// (String, Object) -> (<selector>, <data>)
ctr.create('.test-1', {
width: '200px'
});
// Option parameter
ctr.create('.test-2', {
height: '400px',
'hover-on': {
color: 'red'
}
}, {
hover: {
duration: '10s',
ease: 'ease-in'
}
});
const ctrResult = ctr.getResult();
// .test-1 {
// width: 200px;
// }
// .test-2 {
// height: 400px;
// }
// .test-2:hover {
// color: #f00;
// transition-delay: 0s;
// transition-duration: 10s;
// transition-property: color;
// transition-timing-function: ease-in;
// }
// (Object) -> ({<selector>: <data>})
ctr.create({
// selector
'.test-1': {
width: '200px',
// stylus alpha built-in function
background: 'alpha(red, 20%)'
}
});
// Two separate styles, processed in the same ctr set instance
ctr.create({
'.test-2': {
height: '400px'
},
'.test-3': {
height: '800px'
}
});
const ctrResult = ctr.getResult();
// .test-1 {
// width: 200px;
// background: rgba(255,0,0,0.2);
// }
// .test-2 {
// height: 400px;
// }
// .test-3 {
// height: 800px;
// }
// NOTE: Processed through the YAML parser, white space sensitive
// (String, Template Literal) -> (<selector>, <data>)
ctr.create('.test-1', `
width: 200px
`);
const ctrResult = ctr.getResult();
// .test-1 {
// width: 200px;
// }
// NOTE: Processed through the YAML parser, white space sensitive
// (String, String) -> (<selector>, <data>)
ctr.create('.test-1', 'width: 200px');
const ctrResult = ctr.getResult();
// .test-1 {
// width: 200px;
// }

Notes

getResult

Description: The getResult method returns the rendered CSS for the ctr instance. Once getResult is invoked the result Set is cleared.

Parameters

Arguments

Example

ctr.create('.test-1', {
width: '200px'
});
ctr.create('.test-2', {
height: '400px'
});
const ctrResult = ctr.getResult();
// .test-1 {
// width: 200px;
// }
// .test-2 {
// height: 400px;
// }
ctr.create('.test-1', {
width: '200px'
});
const ctrResOne = ctr.getResult();
// .test-1 {
// width: 200px;
// }
ctr.create('.test-2', {
height: '400px'
});
const ctrResTwo = ctr.getResult();
// .test-2 {
// height: 400px;
// }
// Example: raw
ctr.create('.test-1', {
width: '200px'
});
ctr.create('.test-2', {
height: '400px'
});
//Returns the raw Set
let ctrResult = ctr.getResult({
raw: true
});
// To convert the Set into a String
ctrResult = [...ctrResult.values()].join('');
// .test-1 {
// width: 200px;
// }
// .test-2 {
// height: 400px;
// }
// Example: reset
ctr.create('.test-1', {
width: '200px'
});
const ctrResOne = ctr.getResult({reset: false});
// .test-1 {
// width: 200px;
// }
ctr.create('.test-2', {
height: '400px'
});
const ctrResTwo = ctr.getResult({reset: false});
// .test-1 {
// width: 200px;
// }
// .test-2 {
// height: 400px;
// }

Notes

getLastResult

Description: The getLastResult method returns the rendered CSS for the last result Set processed by the ctr instance. Unlike getResult by default it does not clear out the result Set.

Parameters

Arguments

Example

ctr.create('.test-1', {
width: '200px'
});
ctr.create('.test-2', {
height: '400px'
});
const ctrResOne = ctr.getLastResult();
// .test-2 {
// height: 400px;
// }
// Still returns both styles
const ctrResTwo = ctr.getResult();
// .test-1 {
// width: 200px;
// }
// .test-2 {
// height: 400px;
// }
// Example: reset
ctr.create('.test-1', {
width: '200px'
});
ctr.create('.test-2', {
height: '400px'
});
const ctrResOne = ctr.getLastResult({
reset: true
});
// .test-2 {
// height: 400px;
// }
// .test-2 will not be in the return
const ctrResTwo = ctr.getResult();
// .test-1 {
// width: 200px;
// }

Notes

setClass

Description: The setClass method sets (adds) a ctr class instance.

Parameters

Arguments

Example

// (String, Object) -> (<class>, <data>)
ctr.setClass('Gettin', {
width: '200px'
});
ctr.setClass('Crazy', {
height: '400px'
});
ctr.create('.test', {
extend: 'Gettin',
before: {
extend: 'Crazy'
}
});
const ctrResult = ctr.getResult();
// .test {
// width: 200px;
// }
// .test::before {
// height: 400px;
// }
// (Object) -> ({<class>: <data>})
ctr.setClass({
MakeIt: {
width: '200px'
},
Funky: {
height: '400px'
}
});
ctr.create('.test', {
extend: 'MakeIt',
before: {
extend: 'Funky'
}
});
const ctrResult = ctr.getResult();
// .test {
// width: 200px;
// }
// .test::before {
// height: 400px;
// }

Notes

setOption

Description: The setOption method sets global ctr options to replace the defaults through merging the new options with the default options. These set global options are applied to all styles processed by the instance.

Parameters

Arguments

Example

// set option
ctr.setOption({
hover: {
duration: '10s'
}
});
// create style
ctr.create('.test', {
height: '200px',
hover: {
height: '400px'
}
});
const crtResult = ctr.getResult();
/* ctrResult */
.test {
height: 200px;
}
.test:hover {
height: 400px;
transition-delay: 0s;
transition-duration: 10s;
transition-property: height;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:hover) {
transition-delay: 0s;
transition-duration: 10s;
transition-property: height;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
// set option only once
ctr.setOption({
global: {
sort: '-len'
}
}, {once: true});
// sorted by '-len'
ctr.create('.test-1', {
height: '200px',
background: 'red'
});
//revets back to `len` sort
ctr.create('.test-2', {
height: '200px',
background: 'red'
});
const ctrResult = ctr.getResult();
/* ctrResult */
.test-1 {
background: #f00;
height: 200px;
}
.test-2 {
height: 200px;
background: #f00;
}

Notes

setReset

Description: The setReset method resets all or specific “set” methods set in setOption, setTransform, setVariable, setYamlTransfrom.

Parameters

Arguments

Example

ctr.setVariable({
width: '444px'
});
ctr.setOption({
hover: {
ease: 'ease-in'
}
});
ctr.setTransform(function (css) {
return css.toUpperCase();
});
ctr.setClass('Sorcery', {
$$: {
width: '200px'
},
'hover-on': {
width: '$width$'
}
});
// will have above "set's" applied
ctr.create('.test-1', {
extend: 'Sorcery'
});
// reset all
ctr.setReset();
// will not have "set's" applied
ctr.create('.test-2', {
extend: 'Sorcery'
});
const ctrResult = ctr.getResult();
/* ctrResult */
.TEST-1:HOVER {
WIDTH: 444PX;
TRANSITION-DELAY: 0S;
TRANSITION-DURATION: 0.5S;
TRANSITION-PROPERTY: WIDTH;
TRANSITION-TIMING-FUNCTION: EASE-IN;
}
.test-2:hover {
width: 200px;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: width;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

Notes

setTransform

Description: The setTransform method creates a hook in the render callback to allow for the transformation of the resulting CSS String.

Parameters

Arguments

Example

// make a design statement
ctr.setTransform(function (css) {
return css.toUpperCase();
});
ctr.create('.test', {
width: '200px',
before: {
content: 'can you even css?'
}
});
const ctrResult = ctr.getResult();
.TEST {
WIDTH: 200PX;
}
.TEST::BEFORE {
CONTENT: "CAN YOU EVEN CSS?";
}

Notes

setVariable

Description: The setVariable method sets global variables that can be referenced through the variable String syntax: $<variable>$.

Parameters

Arguments

Example

// set
ctr.setVariable({
width: '200px',
height: '400px',
// nesting is okie-doke
mySecretColor: {
sauce: '#eee'
}
});
ctr.create('.test-1', {
width: '$width$',
height: '$height$',
color: '$mySecretColor.sauce$'
});
ctr.create('.test-2', {
width: '$width$',
height: '$height$',
color: '$mySecretColor.sauce$'
});
const ctrResult = ctr.getResult();
// .test-1 {
// color: #eee;
// width: 200px;
// height: 400px;
// }
// .test-2 {
// color: #eee;
// width: 200px;
// height: 400px;
// }
// set
ctr.setVariable({
width: '200px'
});
ctr.create('.test-1', {
width: '$width$'
});
// set once overwrite var
ctr.setVariable({
width: '400px'
}, {once: true});
ctr.create('.test-2', {
width: '$width$'
});
// .test-3 === .test-1
ctr.create('.test-3', {
width: '$width$'
});
const ctrResult = ctr.getResult();
// .test-1 {
// width: 200px;
// }
// .test-2 {
// width: 400px;
// }
// .test-3 {
// width: 200px;
// }

Notes

writeFile

Description: The writeFile method is essentially a wrapper around fs.writeFileSync with other goodies packaged in to streamline the process of writing out the rendered results.

Parameters

Arguments

Example

ctr.create('.test', {
width: '200px'
});
// write file, auto-gen file location
ctr.writeFile();
/* --------------------------------------- *
* NOTICE : This CSS was generated by ctr *
* DO NOT : Do not, edit CSS directly *
* CTR LOC : [file-location].js *
* --------------------------------------- */
.test {
width: 200px;
}
ctr.create('.test', {
width: '200px'
});
// write file, custom comment
ctr.writeFile({
comment: '/*My custom comment, yo!*/'
});
/*My custom comment, yo!*/
.test {
width: 200px;
}
ctr.create('.test', {
width: '200px'
});
// write file, no comment prepended
ctr.writeFile({
comment: false
});
.test {
width: 200px;
}

Notes