Info

The Javascript API is a handful of practical methods to make using ctr in Javascript a breeze in the park. In the grand scheme of utility, without adequate CSS or ctr knowledge this API will be of no value. In addition, if Stylus is your target language, there is no need to go over this material. I recommend going through the rest of documentation before learning this complementary API.

I initially did not plan on creating this API for the initial release. But, one thing led to another, and over the course of a weekend, Javascript and YAML came crashing into the ctr universe. As the documentation progressed so did the Javascript API and currently I feel tentatively content with the API. That being said, I don’t foresee any radical changes in the future, but I can’t make any promises. Nonetheless, with the hopeful rewrite there will be a much larger emphasis on incorporating ctr into JavaScript from the get-go and not as a weekend afterthought.

Mode of Operation

ctr in Javascript is the same as ctr in Stylus, in that the data flows through the same pipeline. This also means, ctr is not a run-time CSS in Javascript library nor will it ever be. Moreover, if the use of a CSS in Javascript design pattern is warranted run-time performance and size is of the utmost importance, and this is not the focus of ctr. If you are looking for a CSS in Javascript solution, the styled components library is my only recommendation.

Usage

Webpack: The majority will feel right at home with the ctr-loader. It simply plugs into Webpack as a loader to do the heavy lifting for you. It also allows you to chain ctr with other loaders such as postcss-loader to utilize Autoprefixer, css-modules, and/or ExtractTextPlugin with webpack ease.

Node: If you have custom needs or Webpack does not fit the bill the ctr Javascript API should offer all the tools necessary to do whatever you please.

JS vs. Stylus vs. YAML

Right now you might be trying to figure out what flavor of ctr you should use. Let me start out by saying all the flavors are one in the same. What is important is the input, not how you input the input. In goes Objects, outcomes CSS. There is no right or wrong answer, but there is a better answer depending on your workflow. What I will say is that migrating from one ctr flavor to another is a relatively trivial operation, so don’t feel as if your fate is sealed.

Style Evolution

Writing ctr in Javascript is a pain in the ass. There are no if’s, and’s, or but’s about it. The whole reason I crafted ctr around Stylus was to avoid the monotony of wrapping every Object property and value in a String. Not to mention, the readability of Javascript CSS styles is piss-poor without the aid of visual cues of syntax highlighting. But let’s turn that Javascript frown upside down and talk about YAML because it ain’t a markup language it is the bomb diggity. The best way to convey what I mean, and why you might want to use YAML is through a demonstration of the style evolution.

Stylus The Gold Standard

Edit
ctr('.test', {
size: 200px
hover-on: {
color: red
background-color: green
}
})
.test {
width: 200px;
height: 200px;
}
.test:hover {
color: #f00;
transition-delay: 0s, 0s;
background-color: #008000;
transition-duration: 0.5s, 0.5s;
transition-property: color, background-color;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}

Notes

Javascript The Dilemma

ctr.create('.test', {
size: '200px',
'hover-on': {
color: 'red',
'background-color': 'green'
}
});
const ctrResult = ctr.getResult();
/* ctrResult */
.test {
width: 200px;
height: 200px;
}
.test:hover {
color: #f00;
transition-delay: 0s, 0s;
background-color: #008000;
transition-duration: 0.5s, 0.5s;
transition-property: color, background-color;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}

Notes

YAML The Relief Pitcher

# YAML its a beautiful thing
.test:
size: 200px
hover:
on:
color: red
background-color: green
/* YAML results */
.test {
width: 200px;
height: 200px;
}
.test:hover {
color: #f00;
background-color: #008000;
transition-delay: 0s, 0s;
transition-duration: 0.5s, 0.5s;
transition-property: color, background-color;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}

Notes