Descartes | Write CSS in JavaScript
CSS HTML JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css Make font awesome local Jun 15, 2016
dist
docs Added docs, first pass at extending plato Jun 10, 2016
fonts
highlight
img Modified tests and slides for accuracy Aug 10, 2016
node_modules/babel-preset-es2015 Add babel dependencies, moved _mixins consant and css rules ref, firs… Feb 2, 2016
slides Modified tests and slides for accuracy Aug 10, 2016
src Upgrade to 0.0.4 and minify Aug 10, 2016
tests Updated karma config and first test Jul 19, 2016
.babelrc
.gitignore Adding testing framework with jasmine, karma, npm, and travis Jul 19, 2016
.travis.yaml
CNAME
LICENSE Update licenses and copyrights Feb 18, 2016
README.md
bower.json add bower support Mar 15, 2016
index.html Upgrade status from 0.0.2 to 0.0.3 Jul 21, 2016
jquery-2.2.0.min.js
karma.conf.js Updated karma config and first test Jul 19, 2016
package.json
test.html

README.md

Descartes

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.

Quickstart

  1. Download descartes.js from the dist folder

  2. Set up Descartes in a webpage by inserting it in your <head> tag, like so:

    <!doctype html>
    <html>
    	<head>
    		<script type="text/javascript" src="/path/to/descartes.js"></script>
    	</head>
    	<body>
    		<h1>I compute, therefore I am.</h1>
    		<script type="text/javascript" src="/path/to/styles.js"></script>
    	</body>
    </html>
  3. 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);
    			}
    		}
    	}
    })
  4. Save and open up your HTML file in a browser. Clicking anywhere on the window should randomize the size of your heading.

Overview

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).