Open-sourcing Stylo

I learn by setting projects for myself, and so a few months ago I decided to create an app called Stylo. The idea was to let people design basic web apps using a Fireworks-like interface, ultimately exporting the finished design as CSS.

I'd always admired complex apps like 280 Slides, so was excited to be building something with similar problems. I started writing the app with CoffeeScript, Spine and Sprockets, my technologies of choice. A month later, after working in the evenings and weekends, I had a basic prototype which you can see a demo of here (webkit only).

[](http://styloapp.com)

Have a play around with the app. You can draw shapes, apply shadows, background gradients and add a variety of other styles. Double click on an element to add text, and use keyboard shortcuts, such as command z to undo. In the latest versions of Chrome, you can even copy elements and paste their CSS into a text editor.

Now the time has come to open source Stylo, and the code should provide good examples of how to achieve the following:

• Element snapping, resizing and drag/drop
• Copy/paste, undo/redo & keyboard shortcuts
• Context menus and z-index ordering
• Color picker using canvas
• JSON object instance serialization

The part of Stylo I'm most proud of is the encapsulation. I believe that decoupling and abstracting your programs is the secret to good code, and that's what I've tried to achieve with Stylo. Each behavior is split into its own CommonJS module, while each part of the right hand inspector is a different controller.

I've written a custom guard task to compile the CoffeeScript down to one file whenever anything changes. Stylo is also using my CommonJS extension to Sprockets, giving us explicit requires and exports.

One thing I particularly enjoyed learning about was color theory, required for making the canvas color picker. As a self-taught programmer, color theory is one of those things I hadn't had the chance to be immersed in yet, and learning about HSL and HSV was fascinating. I'll be releasing the color picker as a separate library soon.

The other aspect I loved writing was the PEG CSS3 parser. PEG.js is an extraordinarily simple yet powerful tool, allowing you to write complex parsers by combining basic constructs.

So checkout the source code and have a rummage around. The best way to become a writer is to read other books, and programming is no different. I'm hoping Stylo will become a useful resource for programmers creating similar things.