Cute

CSS in Javascript

Cute allows you to write CSS code in Javascript

Utilising tagged template literals and the power of CSS.
Automatic CSS - adds css to a web page on demand, fully automatically. Your users load the least amount of code necessary.
No class name bugs - unique class names for your styles. You never have to worry about duplication or misspellings.
Removes the mapping between components and styles
FREE

Download

Currently Cute 1.0. Only 4 KB

Installation

Include cute.js files via npm.

npm install cute-css

Getting Started

With Cute you write CSS in Javascript. CSS is automatically injected into the page.

See the Pen Cute by Boyko Markov (@boyko-markov) on CodePen.

This example creates two simple components, a wrapper and a title, with some styles attached to it:

Styling multiple elements

We can use querySelector or querySelectorAll with Cute to style HTML Element or multiple HTML Elements with a single call.

See the Pen Cute Nav by Boyko Markov (@boyko-markov) on CodePen.

Adapting based on properties

Conditionally apply CSS

See the Pen Cute Buttons by Boyko Markov (@boyko-markov) on CodePen.

Styling based on attributes. With Cute, you can add Conditional CSS based on attributes, class names or states.

Property based:

${properties => properties.secondary ? cute.css`
	background: white;
	color: #3F51B5;
` : ''}

Attribute based:

${attrThemed => cute.css`
	background: white;
	color: #3F51B5;
`}

Class Name based:

${classNameThemed => cute.css`
	background: white;
	color: #3F51B5;
`}

Hover:

${onhover => cute.css`
	background: #fff;
	color: #007ACC;
	border-color: #007ACC;
`}

Active:

${onactive => cute.css`
	background: #fff;
	color: #444;
	border-color: #444;
`}

Focus:

${onfocus => cute.css`
	background: #fff;
	color: #444;
	border-color: #444;
`}

Disabled:

${ondisabled => cute.css`
	background: #ff0000;
	color: #fff;
	border-color: #ff0000;
`}

Extending Styles

Quite often you might want to use HTML Element, but change its Style slightly for a single case. To achieve that, you can call again the cute function.

See the Pen Cute Extending Styles by Boyko Markov (@boyko-markov) on CodePen.

We can see that the new OrangeButton still resembles Button, but has additional CSS rules applied.

Cute with Custom Elements

Cute can create and style Custom Elements. The example below shows how to dynamically create and style Custom Elements

See the Pen Cute Properties and Custom Elements by Boyko Markov (@boyko-markov) on CodePen.