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

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

• From the brackets and omission of commas to syntax highlighting Stylus is nothing short of sexy

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

• What’s the big fuss about? Cognitive fatigue — it’s the small things in life or so phycology suggests

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

• YAML, the likely or unlikely champion?