by Jon Chan @jonhmchan
This is an experimental library for writing CSS in JavaScript. The current version is a beta and highly unstable, with changes happening on a daily basis. This library is not recommended for production use. It is actively being developed with your help.
Download descartes.js from the dist folder
Set up Descartes in a webpage by inserting it in your <head> tag, like so:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="https://github.com/JonHMChan/descartes/raw/master/path/to/descartes.js"></script>
</head>
<body>
<h1>I compute, therefore I am.</h1>
<script type="text/javascript" src="https://github.com/JonHMChan/descartes/raw/master/path/to/styles.js"></script>
</body>
</html>Create a styles.js where you will write your styles. Try the following:
Descartes.add({
"body": {
"color": "#555",
"font-family": "Arial",
"h1": {
"font-family": "Helvetica",
"font-size": function() {
return 16 + Math.round(Math.random() * 42);
}
}
}
})Save and open up your HTML file in a browser. Clicking anywhere on the window should randomize the size of your heading.
For a full overview of features, take a look at the presentation I typically give at https://descartes.io/slides (just your right and left arrow keys to go through the slides).