CODEWITHSUNDEEP
csseditorfirebug
Tom Lehman
Tom Lehman

Reputation: 89373

Firebug-esque CSS editor

Here's my current workflow for editing CSS:

  1. Me: "Take a look at this page!"
  2. Guys: "Try making the post titles bigger"
  3. Right click on a post title, choose "inspect" (to inspect it in firebug)
  4. Find the appropriate CSS statement in Firebug (h2.post_title or something)
  5. Modify the CSS in Firebug, ask friends how it looks
  6. 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

Upvotes: 9

Views: 928

Answers (8)

Edwin Yip
Edwin Yip

Reputation: 4220

What's why I'm developing LIVEditor, because I don't want to manually redo the change again in the text editor after tweaking my css styles in Firebug (or the likes).

Upvotes: 0

Jhonte
Jhonte

Reputation: 93

Check out my contribution to this problem: http://www.cssupdater.com

Step 6 would then be: 6: One click on the "Sync now" button in Firebug!!

The click sends your changes to the desktop application, which syncs your orignal css files. You can also choose the changes you want to sync in the application. It works with your favorite text editor or IDE and on both Windows and Mac!

Heureka?

Upvotes: 1

Martin Kool
Martin Kool

Reputation: 4245

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.

Upvotes: -1

Bryan Downing
Bryan Downing

Reputation: 15472

Check out Backfire:

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

Haven't tried it, but sounds promising.

Upvotes: 1

Antonin Hildebrand
Antonin Hildebrand

Reputation: 783

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

Upvotes: 0

Bryan Downing
Bryan Downing

Reputation: 15472

http://www.skybound.ca/

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

Upvotes: 3

Laurence Gonsalves
Laurence Gonsalves

Reputation: 143314

Another possible workflow:

  1. "Hey guys, take a look at this page!"
  2. "Try making the post titles bigger"
  3. Make the change to the CSS file
  4. 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.

Upvotes: 2

TK.
TK.

Reputation: 28193

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

Upvotes: 4

Related Questions