Firebug-esque CSS editor

views:

375

answers:

+8 Q:

Firebug-esque CSS editor

Here's my current workflow for editing CSS:

Me: "Hey guys, take a look at this page!"
Guys: "Try making the post titles bigger"
Right click on a post title, choose "inspect" (to inspect it in firebug)
Find the appropriate CSS statement in Firebug (h2.post_title or something)
Modify the CSS in Firebug, ask friends how it looks
If it looks good, make the change again in Textmate

I want to avoid step 6. I.e., I want the ability to edit CSS via a Firebug-like UI and be able to commit my changes to the relevant file immediately (rather than having to copy them by hand as I do with Firebug)

Edit: Something that works on a Mac would be ideal

+4 A:

Have you tried "Web Developer" extension in Firefox? It allows you to open, edit and save CSS files.

TK 2009-12-15 18:22:22

I believe what Horace is looking for is a CSS Editor that would allow you to traverse the DOM and see applied styles (à la Firebug), but also save or export it once done. The closest seems to be Skybound as pointed out by Bryan

K Prime 2009-12-16 05:41:46

I see. Right. Skybound looks nice. Hoping that'll be available on Mac and Linux as well.

TK 2009-12-16 09:06:29

+1 A:

Another possible workflow:

"Hey guys, take a look at this page!"
"Try making the post titles bigger"
Make the change to the CSS file
Hit reload

I only use Firebug for debugging (eg: "why is this thing getting that style?") not for making changes when I know where they need to go in the CSS. This workflow does depend somewhat on being able to reload the CSS easily. If you're working on an app where hitting reload completely disrupts your state it might not be ideal.

Laurence Gonsalves 2009-12-15 18:27:38

But how do you know the right place in the CSS file to edit? I.e., don't you have to inspect the element in Firebug first to find the relevant selector? Also, as you say, reloading the page is a pain in the ass (it's nice to see your change immediately)

Horace Loeb 2009-12-15 23:18:36

It depends. Most of the times you know where the element exists in the code, so you go there, see what classes it has, and then search for the appropriate class in the CSS. When it gets trickier than that I do use Firebug, but only in that case.

Laurence Gonsalves 2009-12-16 01:35:38

That isn't to say that something that combined the two would be great. I'm just describing how I deal with reality. :-)

Laurence Gonsalves 2009-12-16 01:43:31

+2 A:

http://www.skybound.ca/

Go forth and be enlightened. This is truly a life changing program.

Bryan Downing 2009-12-16 05:09:20

This looks bomb (sadly I need to wait for the mac version)

Horace Loeb 2009-12-16 17:16:50

Oh bummer man! I didn't realize you were on a mac. The good news is that they're working on the mac version: http://blog.skybound.ca/2009/11/13/new-developments-in-stylizer-for-mac-and-linux/It isn't often that an application completely alters my workflow for the better, but holy crap, Stylizer has made my CSS development WAY cleaner and faster.

Bryan Downing 2009-12-17 02:04:06

The mac version of Stylizer is now available.

Bryan Downing 2010-09-02 20:32:30

XRefresh with "Soft Refresh" enabled may help your workflow, but you still need to know what CSS selectors do you want to add/edit.

Darwin 2010-01-05 03:57:45

Check out Backfire:

http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/

Haven't tried it, but sounds promising.

Bryan Downing 2010-09-13 22:05:01

Backfire (see post below) was created specifically for Quplo (http://quplo.com), which is a tool that specificly does what you describe. You write html and css, then talk about what needs to be changed, make the changes (using firebug or web developer toolbar) and hit save.

Martin Kool 2010-10-13 11:08:46

Backfire has already been mentioned, several weeks ago. -1

Matt Ellen 2010-10-13 11:10:41

ansaurus

tags:

views:

answers:

Firebug-esque CSS editor

related questions