Need help with descartes?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

JonHMChan
449 Stars 21 Forks MIT License 178 Commits 7 Opened issues

Description

Descartes | Write CSS in JavaScript

Services available

!
?

Need anything else?

Contributors list

# 268,012
JavaScr...
HTML
171 commits
# 690,039
JavaScr...
HTML
2 commits
# 1,513
clean-c...
2d-fram...
2d-game...
sketch-...
1 commit
# 648,287
JavaScr...
HTML
1 commit

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

     tag, like so:
    
        <script type="text/javascript" src="/path/to/descartes.js"></script>
    
    
        <h1>I compute, therefore I am.</h1>
        <script type="text/javascript" src="/path/to/styles.js"></script>

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.