Wanted: Open Source CSS Editor

19 08 2006

My notebook is running Ubuntu 6.06 LTS and I can’t run the latest version of Dreamweaver, so I went searching to see what was out there. Google gave me this (Google: Open Source CSS Editor). I went here (W3.org : CSS Editors). Based on the W3.org suggestions, I downloaded Bluefish and Amaya.

My Initial Thoughts: I don’t review every single feature, and as the beginning of this line says ‘Initial Thoughts’. I’ll install it, start it, open a CSS file, and then attempt to edit that file. I don’t need it to do anything else for me. I can preview with Swiftfox of Firefox, and I can ftp with gFTP. What I am looking for. I wanted syntax highlighting and auto completion/code hinting. gEdit supports syntax highlighting, but doesn’t do the code hinting, so really I was looking for an editor that has CSS support with code hinting/auto completion.

Bluefish (http://bluefish.openoffice.nl/index.html) :

  • Pretty intuitive to use
  • Syntax Highlighting
  • Did not support code hinting

Amaya (http://www.w3.org/Amaya/):

  • Older Interface
  • When trying to open file types, you set filters for the file type you’re looking for. Default is *.htm*. To me it was just a pain to change ‘htm’ to ‘css’
  • Syntax Highlighting
  • Did not support code hinting

Though I could have settled for Blue Fish, I hate to settle and was determined to find either a plugin that offered code hinting or another Open Source solution for a CSS editor that offered code hinting. So I went to the Ubuntu Forums (http://www.ubuntuforums.org) and searched for CSS Editors. I was led to Blue Fish (see above), nvu (http://www.nvu.com), screem (http://www.screem.org), eclipse (http://www.eclipse.org), Aptana (http://www.aptana.com).

Initial Thoughts on the above:

nvu:

  • Already Had it — downloaded it a while back to do some simple editing
  • WYSIWYG Editor –
  • If you like Front Page for Windows, nvu seems most similar to Front Page
  • Syntax Highlighting
  • No Code Hinting
  • Really just not my cup of tea

Screem:

  • lightweight
  • very similar to nvu
  • syntax highlighting
  • no code hinting

Aptana:

  • When viewing the site, it appeared to be everything I wanted it to be
  • Couldn’t get it to install — I’ll be the first to say, I had to clue with the .bin extension
  • Never did get it installed, but did find some great how-to information on the Ubuntu Forums
  • Does have a plug-in that is fully supported in Eclipse

Eclipse:

  • Easy to install
  • Seems ‘heavy’
  • Doesn’t seem to be directed towards (x)html/css
  • Most of the menus and toolbars are worthless/pointless for what I’m doing
  • Syntax Highlighting
  • Able to Install the Aptana Plug-in

So here’s what I’ve got…Eclipse (http://www.eclipse.org), Configured Eclipse to download the Aptana plug-in (http://www.aptana.com) via these directions from http://aptana.com/docs/index.php/Plugging_Aptana_into_an_existing_Eclipse_configuration :

To plug Aptana into an existing Eclipse configuration:

  1. From the Help menu in Eclipse, select Software Updates > Find and Install… to open an Install/Update pop-up window.
  2. On the Install/Update pop-up window, choose the Search for new features to install option, and click the Next button.
  3. Set up a new remote site to scan for updates.
    1. Click the New Remote Site… button to open a New Update Site pop-up window.
    2. On the New Update Site pop-up window, type “Aptana” in the site Name text box.
    3. In the URL text box, type the URL for the Aptana update site: http://update.aptana.com/update/ and click OK.
    4. Click the Finish button to open an Updates window.
  4. On the Updates window, check the Aptana box, and click the Next button.
  5. Choose the option to accept the terms of the license agreement, and click the Next button.
  6. Click the Finish button.Aptana promps you to enter a username and password.
  7. Specify the username and password to access the Aptana web site.Eclipse scans for updates
  8. Click the Install All button.

Eclipse installs the Aptana plug-in. To finish the installation process, follow the prompts to shut down and re-start Eclipse.

To access all of Aptana’s features as they are described in the Aptana documentation, you will need to change your Eclipse Perspective to the Aptana perspective. See Changing your Eclipse Perspective for instructions on how to change your Eclipse Perspective.

Final Thoughts:

Does everything I need it to do…Maybe I’ll just install Aptana as Eclipse has a lot of features and such that I do not need. So…tonight — Success.

If anyone has any suggestions for Open Source Editors that Support CSS, have syntax highlighting and code hinting, feel free to post up. I’m always open to new software.

UPDATE:

In Regards to the Post for Quanta…Nice Interface, has syntax highlighting, but did not see any means to enable code hinting. Also, I didn’t play around much with settings, but the syntax highlighting seemed to be 2 or 3 colors — dark colors at that.

Personally I just want something that works out of the box, and Eclipse with Aptana gives me that better than anyone else.

Enjoyed installing Quanta and using it, just not what I was looking for.


Actions

Information

3 responses

28 08 2006
Bigfoot

Check out Quanta Plus at http://quanta.kdewebdev.org/ . It is being merged with KDevelop and together will become the “official” KDE web development tool.

Quanta has a very nice CSS editor. To use it load up any .CSS file and then click the little “CSS” button. It will pop up a list of all the attributes — double click one and an editing tool will come up. Nice.

28 08 2006
basketcase

I’ve book marked it, but looking at the features, I’m excited to get it loaded up and take a look at it.

Thanks for the recommendation

12 02 2007
healtharticle

Thank’s for you article. I’ using eclipse too. But
I’m don’t knew about Aptana. :-)

Leave a comment