Site44 Blog

CoffeeScript and LESS in Site44 With WebMatrix 2

| Comments

I’m happy to report that WebMatrix 2 shipped today. WebMatrix is a lightweight (and free!) web development tool. It excels at editing HTML, JavaScript, and CSS, which makes it a natural fit to use with Site44. This latest release also adds first-class support for CoffeeScript and LESS.

Getting started with WebMatrix and Site44

If you’re not already a Site44 user, please give it a try. All you need is a Dropbox account, and creating a free website takes only a minute. To create a site, browse to Site44 and click “Sign in with Dropbox.” Once you’ve signed in, click “Create a new website,” give it a name, and you’re done!

At this point, you should have a new folder in Dropbox. Any changes you make in that folder are directly reflected on your website. (When I did this, I called my website “webmatrix.site44.com,” so my folder is called “Dropbox\Apps\site44\webmatrix.site44.com.”)

When you open up WebMatrix, choose “open folder as a site,” and browse to the folder in Dropbox. That’s all you need to do to edit a Site44 website with WebMatrix.

Using CoffeeScript and LESS

CoffeeScript and LESS are languages that compile to JavaScript and CSS, respectively. WebMatrix 2 supports both right out of the box. When you create a new file, click on “All” to show all supported file types, and you’ll see CoffeeScript and LESS there.

WebMatrix has nice support (including syntax-highlighting and autocomplete) for these languages, but note that browsers don’t understand them natively, so you need to compile them down to JavaScript and CSS for them to work.

WebMatrix can actually do that compilation for us, through an extension called “OrangeBits.” To enable this functionality, you’ll need to click on the “Gallery” button in the ribbon. This opens the extension gallery, and from there you can choose OrangeBits and install it. (This all takes just a few seconds, and you only need to do it once.)

Once you’ve installed OrangeBits, every time you save a .coffee or .less file, it will automatically be compiled to a corresponding .js or .css file. OrangeBits itself is open source, so if you want to learn more about how it works, check it out on GitHub.

An example

When I was playing around with CoffeeScript and LESS in WebMatrix, I built a little site at webmatrix.site44.com. It’s an utterly useless website, but I hope it serves as an example of what you can do when you combine WebMatrix with Site44.

The HTML of the page is simple:

index.html 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!doctype html>
<html>
<head>
  <title>Playing with WebMatrix</title>
    <link rel="stylesheet" href="StyleSheet.css" />
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="clicky.js"></script>
</head>
<body>
    <div id="main">
        <h1>WebMatrix + Site44 = web development joy! :-)</h1>
        <button id="clickMe">Click Me</button>
    </div>
</body>
</html>

Notice that I’m referencing clicky.js and StyleSheet.css. Those are being automatically generated from CoffeeScript and LESS. The CoffeeScript handles button clicks and uses jQuery to toggle a CSS class on the content part of the page:

clicky.coffee 
1
2

$ ->
    $('#clickMe').click -> $('#main').toggleClass 'reverse'

Here are a few tips to understanding CoffeeScript:

  1. The arrow operator translates to function () { ... }. This saves a lot of typing when writing callbacks and event handlers.
  2. Functions can be called Ruby-style (with a space instead of parentheses). foo bar, baz translates to foo(bar, baz).

The stylesheet is created by a similar process. Here’s the source:

StyleSheet.less 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

.box-shadow(@style, @c) when (iscolor(@c)) {
  box-shadow:         @style @c;
  -webkit-box-shadow: @style @c;
  -moz-box-shadow:    @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}

@color: #a0a0c0;

body {
    background-color:  @color;
    font-family:  Arial;
}

#main {
    background-color:  lighten(@color, 30%);
    border:  solid 1px desaturate(@color, 50%);
    .box-shadow(2px 2px 10px, 30%);
    width:  800px;
    padding:  30px;
    margin:  auto;
}

#main.reverse {
    background-color:  darken(@color, 30%);
    h1 {
        color:  white;
    }
}

Here are a few things to notice about LESS:

  1. Those .box-shadow rules are essentially reusable subroutines. These “mixins,” as they’re called, can save a ton of copy/pasting when writing CSS.
  2. There’s a variable: @color, and it’s manipulated in a few places (lighten, desaturate, and darken). I can change the entire style of the page by just changing that variable, rather than having to update four different colors.
  3. Instead of having to write #main.reverse h1 { ... }, I was able to just nest the h1 rule inside the #main.reverse rule. This nesting makes the styles easier to read and maintain.

“Just save”

WebMatrix’s support for CoffeeScript and LESS (via the OrangeBits extension) shares a common philosophy with Site44, which is that you should be able to just save a file and be done. When you save a .coffee or .less file, WebMatrix automatically compiles it into .js or .css. And when you save anything to your folder in Dropbox, Site44 automatically picks up those changes and reflects them in your website. In this way, WebMatrix makes a great addition to your Site44 workflow.

Download WebMatrix

Comments