UPDATE! I'm moving this site to: www.emirplicanic.com.

BeWebmaster

Sumatra: CSS Editor

Ad

Sumatra is a web based CSS Editor created using basic Javascript, AJAX and PHP. It's a product of some free time and lots' of coffee (Sumatra blend). I am known to be a big "coffee monster" and since the coffee played a big role in creating this editor I just decided to call it Sumatra.

Sumatra CSS Editor can be used as part of your CMS or WYSIWYG editor. It's pretty easy to implement. Take a look at this sample page. The editor loads any well formed CSS file into a textarea or GUI editor. It includes a file browser, so you can easily locate and load a CSS file you need to edit.

I tested it in Firefox and IE6.

Here are couple of screen shots.

The browser allows you to view CSS and image files only. When clicked, selected style loads in the right page.

The right page displays all styles. In this example "body" styles are loaded. Now you can edit your selector and styles. At the bottom of the right panel is the button for adding additional selectors.

You can add additional properties by clicking on one of the CSS property group buttons.

Things to add

  • Color picker
  • Smart options (so when a background-repeat is selected, a drop-down with "repeat-x, repeat-y, no-repeat etc is displayed).

Bugs

I didn't test the script enough to discover any, but as it always is, you'll probably find some. If you find and/or fix a bug, let me know so I can update the files.

Feel free to use this script however you want. And if you end up using it and you really like it, you can buy me a coffee. And then... who know what could happen to Sumatra. :)