December 15th, 2008

CSS Tools Coda Plugin

I’ve been using Coda on a more consistent basis lately, primarily due to the inclusion of third party plugins. As I work, I’ll find myself missing a few features from TextMate bundles. Since it’s terribly easy to write your own Coda plugin, I’m going to make a consistent effort to write and maintain a small library of plugins over the coming months.

CSS Tools

My latest plugin finds its roots in an article I wrote not too long ago; CSS Organization Methods and Writing Style. In the article, I took a quick look at a small rift that brought up quite a bit of conversation in the Web community. There are two distinct camps, it seems, when it comes to people who write CSS. There is one side that writes their CSS properties on a single line, and another that will devote a line to each property in a selector. Personally I’m in the ’single line’ camp, but I absolutely understand why other authors prefer multi line.

I came up with a proposed solution; reformat your CSS. That tool uses CSSTidy to allow a simple transformation of your CSS formatting. It will retain any comments, and leaves all properties as written (instead of converting to shorthand, for example.)

Basically, CSS Tools brings that functionality to Coda. You’re able to convert a style sheet from single line to multi line and vice versa. You’re also able to compress your CSS if you’d like. Take a look:

I plan on making the plugin more elaborate over the coming weeks, hopefully beefing up the template which handles reformatting, as well as providing more methods for compression, possibly the ability to include your own CSSTidy template for processing.

Download CSS Tools

Version 1.0.1
February 4, 2009 – Attempt to fix issues with plugin failing to execute commands
Version 1.0
December 15, 2008 – Initial release

 Comments

60 Comments

  1. Derek December 15th, 2008

    Appreciate you releasing this plugin. I haven’t committed to Coda 100% just yet, but at least your CSS Tools will be waiting for me when I do. I’m still missing cold folding. Is there a plugin out there for that yet?

  2. Sam Rayner December 15th, 2008

    Great work John, thanks a lot. This will come in very handy. Good luck fixing your JavaScript plugin too, looks like it would be just as useful!

    Derek, I don’t think code folding would be possible to implement properly as a plugin. It would really require an update to Coda’s chrome.

  3. Ray Brown December 25th, 2008

    Wow. Great work! I can’t wait to use this with my CSS files, let alone the CSS files I get from the other guys in the office.

    Some use tabs, some use spaces, some write one-line CSS, and others use more space than you can shake a stick at. This will make my workflow so much easier to handle.

    Thanks again!

  4. Dorian December 26th, 2008

    wow, great plugin! now i have no reason to have Dreamweaver on my computer! Handing over unformated css it pretty embrassing.

    Just one thing. some of my css is layout as such:
    ul.nice-menu-down li.menuparent:hover,
    #header-region ul.nice-menu-down li.menuparent:hover,
    #header-region ul.nice-menu-down li.over
    {
    }
    gets formated into one line even with multiline. I assume multline means only the styles and not the tags. I really would love to keep the tags multiline.

  5. Eli January 2nd, 2009

    Great work – this will come in handy for me. +1 for multi-line selectors. Code folding will be a welcome addition to Coda!

  6. Matze January 12th, 2009

    The plugin looks great, but doesn’t work for me. After Double-Clicking the downloaded and unzipped file, the plugin is available in Coda. But nothings happens after clicking one of the four options… Other plugins work fine for me. Any suggestions?

  7. David January 12th, 2009

    @matze
    same problem here :/

  8. Matze January 13th, 2009

    No, I’m working with an .css-file on a server, connection per ftp (but I think coda is saving that file on the hd to edit it..right?)

  9. tom (dB) January 17th, 2009

    Great plugin, this will save me a lot of time, thanks.

    Just one note, when doing any form of reformat or compress the quotes on @import are removed.

    e.g.

    @import ’style-header.css’;

    becomes

    @import style-header.css;

  10. David January 18th, 2009

    no chance, it dosnt work.

  11. Jesse M February 4th, 2009

    Hey Jonathan,

    Great work, on the plugins and content of your site.. always great to probe the minds of other developers! Greatly appreciated.

    As for the CSS plugin.. my whole team wants it,.. but we cannot get it to work. In the hopes of helping solve the issue, here are some specs of our working systems:

    Intel iMac 24″
    MAC OS X 10.5.6
    Coda 1.6
    Local files, all with .css extensions

    When selecting ‘Reformat > Single Line’ nothing happens,.. so, I tried selecting css text in the file.. no change.. none of the other menu options produce results, or errors for that matter, either.

    Thanks again!
    J

  12. Nils Hendriks February 10th, 2009

    Hi there, just downloaded and tried the plugin. Looks cool but there’s still some issues:

    - Above mentioned stripping of quotes around @import rules. (@import url(“reset.css”);)

    - the Curly brackets in @media screen, tv, projection {} rules are being stripped as well.

  13. federico Parrella February 16th, 2009

    many thanks, it’ really good

  14. Johnny March 27th, 2009

    very cool! thanks, man! :)

  15. Jess March 28th, 2009

    brilliant! can you create on for formatting HTML next? :)

  16. notha April 4th, 2009

    Does this work with coda 1.6.1 ? It doesn’t show up in the plugin list.

    mac 10.4.11 Tiger

  17. notha April 6th, 2009

    Using 1.6.3, it doesn’t show up in the plugin list even though it’s in the plugin folder

  18. notha April 7th, 2009

    The 1.0 version appears in the plugin list but the 1.0.1 does not.

  19. Dave May 1st, 2009

    I really like the idea of some of the compression features such as a situation where you have combined files and have multiple selectors that could be combined together. However somewhere along the line I was convinced that using camel back in my code had it’s advantages and I agree. Example:

    #thisDiv {
    your compression medium or high turns it into
    #thisdiv {
    which renders the file useless. I just downloaded and checked the newer plugin, same thing. If you could fix this it would be awesome.

  20. Julian May 24th, 2009

    Thanks so much for this!

  21. Jonas June 1st, 2009

    Works perfectly here.

    Only problem with compressing Wordpress css files is that the first lines of commented code are getting removed. Is there a way to leave those few lines there?

    Keep up the good work!

  22. Luke June 5th, 2009

    Awesome plugin, Jonathan.

    Question: There’s no license information associated with it. I’d like to make some modifications–would that be okay (I’d be happy to share my changes back to you &/or the community).

    Thanks, mate!
    -Luke

  23. hiro June 7th, 2009

    i looked for such a plugin – but now, it is not working. i’ve a G4 PowerBook and a Dua-G5 PowerMac – i tested the Plugin on the office-iMac (intel) and it worked. Why the plugin did not apear in the plugin-menu on PPC – or how can i get it work?

  24. CSS Tools Coda Plugin | Extra Future June 12th, 2009

    [...] Super useful Coda plugin, which uses CSSTidy. Can translate back to human-readable code for changes, then re-compress. [...]

  25. Phil Nelson June 12th, 2009

    Thanks for this. I nearly did started to write a plugin with these exact features, glad to find I didn’t have to.

  26. Phil Nelson June 12th, 2009

    Couple of notes, though: It seems to strip CSS properties that it doesn’t know, like -webkit-text-shadow. This is kind of a big deal for me.

  27. Dinis Correia June 14th, 2009

    Looks like great work, Jonathan – however, can’t get it to work on my (old) PowerBook G4.

    It is installed, apparently, but it doesn’t show up on the plugins menu.

    Is it Intel-only?

  28. 35 CSS-Lifesavers For Efficient Web Design | CSS | Smashing Magazine June 25th, 2009

    [...] CSS Tools Coda PluginCSS Tools brings the power to reformat your CSS to Coda. With this tool you are able to convert a style sheet from a single line to multi-line and vise-versa and compress your CSS code if you’d like. [...]

  29. 35 CSS-Lifesavers For Efficient Web Design | CSS | Smashing Magazine June 25th, 2009

    [...] CSS Tools Coda PluginCSS Tools brings the power to reformat your CSS to Coda. With this tool you are able to convert a style sheet from a single line to multi-line and vise-versa and compress your CSS code if you’d like. [...]

  30. Myfreepedia.com » Blog Archive » 35 CSS-Lifesavers For Efficient Web Design June 25th, 2009

    [...] CSS Tools Coda PluginCSS Tools brings the power to reformat your CSS to Coda. With this tool you are able to convert a style sheet from a single line to multi-line and vise-versa and compress your CSS code if you’d like. [...]

  31. 35 CSS-Lifesavers For Efficient Web Design « Tech7.Net June 25th, 2009

    [...] CSS Tools Coda PluginCSS Tools brings the power to reformat your CSS to Coda. With this tool you are able to convert a style sheet from a single line to multi-line and vise-versa and compress your CSS code if you’d like. [...]

  32. 35 CSS-Lifesavers For Efficient Web Design | zbTech June 26th, 2009

    [...] CSS Tools Coda PluginCSS Tools brings the power to reformat your CSS to Coda. With this tool you are able to convert a style sheet from a single line to multi-line and vise-versa and compress your CSS code if you’d like. [...]

  33. 13 plugins essentiels pour Coda | iVicta July 2nd, 2009

    [...] Css Tools Coda Plugin [...]

  34. solidcolour July 4th, 2009

    can you make it to be able to put a extra blank after “:” for each property e.g. “float: left;” instead of “float:left”. thanks

  35. 35 CSS-Lifesavers For Efficient Web Design July 5th, 2009

    [...] CSS Tools Coda Plugin CSS Tools brings the power to reformat your CSS to Coda. With this tool you are able to convert a style sheet from a single line to multi-line and vise-versa and compress your CSS code if you’d like. [...]

  36. Why I Use Coda for Web Development July 6th, 2009

    [...] allows anyone to create plugins for the software, meaning some great addons are available like CSS Tools (compress and tidy your CSS) and PHP [...]

  37. 35 CSS-Lifesavers For Efficient Web Design « Ramesh July 8th, 2009

    [...] CSS Tools Coda Plugin CSS Tools brings the power to reformat your CSS to Coda. With this tool you are able to convert a style sheet from a single line to multi-line and vise-versa and compress your CSS code if you’d like. [...]

  38. Nils Hendriks July 21st, 2009

    Sorry, but it’s still useless.

  39. Yuri August 3rd, 2009

    overflow-y: scroll; disappears after compression.

  40. Johan August 11th, 2009

    Nice. I was thinking about making the same plugin. But now I can skip that thanks to you. =)

  41. Twitter Trackbacks for CSS Tools Coda Plugin - Monday By Noon [mondaybynoon.com] on Topsy.com August 30th, 2009

    [...] CSS Tools Coda Plugin – Monday By Noon mondaybynoon.com/2008/12/15/css-tools-coda-plugin – view page – cached CSS Tools allows you to reformat and compress your style sheets — From the page [...]

  42. Dan September 23rd, 2009

    Fantastic! Indeed, with this plugin, I can stop going back and forth to Dreamweaver to beautify my CSS.

  43. 35 CSS-Lifesavers For Efficient Web Design » Om Net Solution September 29th, 2009

    [...] CSS Tools Coda Plugin CSS Tools brings the power to reformat your CSS to Coda. With this tool you are able to convert a style sheet from a single line to multi-line and vise-versa and compress your CSS code if you’d like. [...]

  44. Jon Kokke October 30th, 2009

    I just wanted to say thank you! I use this plugin every day, it’s such a simple thing, but it makes life so easy to be able to switch between multi-line and single line.

  45. Coda: A Collection of 120+ Plugins, Clips, Snippets and Tuts For Designers and Developers November 5th, 2009

    [...] CSS Tools Coda Plugin [...]

  46. FlatErik November 8th, 2009

    I think I’ve read somewhere in a interview w/ people from Panic that code folding is one of the features coming in Coda 2.0. So hopefully we don’t have to wait that long.

  47. » Un plug in CSS pour Coda oxynel, blog communication - Agence de communication Montpellier November 8th, 2009

    [...] via CSS Tools Coda Plugin sur mondaybynoon.com VN:F [1.7.4_987]please wait…Rating: 0.0/10 (0 votes cast) Partager: [...]

  48. Marko Röper November 8th, 2009

    Hi,

    the single line transformation seems not working properly with for example:
    html * { … }
    lines.

    maybe you can fix this ? Everything else is working very well, but i need this (html *) within my yaml stylesheets.

  49. Vitaminiza Panic Coda « Geeksfera November 9th, 2009

    [...] CSS Tools Coda Plugin [...]

  50. ken November 11th, 2009

    I found bugs in “Reformat Multi Line” like breaking css code.
    Would you please correct program?
    thank you.

    === BEFORE ===
    blockquote p {
    margin: 1em 0 1em 0;
    padding: 0 1em;
    }
    blockquote blockquote {
    margin: 0.2em 0;
    padding: 0.2em 0 0.2em 0.2em;
    }
    code, pre code {
    font-family: “Courier New”, “Osaka-等幅”, “MS Pゴシック”, monospace;
    }

    === AFTER ===
    blockquote p {
    margin:1em 0; <- here
    padding:0 1em;
    }
    blockquote blockquote {
    margin:.2em 0;
    padding:.2em 0 .2em .2em; <- here (zero has gone)
    }
    code,pre code {
    font-family:"Courier New", Osaka-等幅, "MS Pゴシック", monospace; <- here (double-quote has disappeared)
    }

  51. Jari Lehtinen November 25th, 2009

    Very nice, but it strips all the -webkit* and -moz* properties. Any idea when this is fixed?

  52. links for 2010-01-06 | manicwave.com January 6th, 2010

    [...] CSS Tools Coda Plugin – Monday By Noon (tags: coda css tidy plugin) [...]

  53. Davor January 20th, 2010

    After the upgrade to snow leopard I cant get plugin to work, I reinstalled but nothing happens when I try to use it. any reports on this?

    thanx

    coda 1.6.10

  54. Jon Wright January 31st, 2010

    Love this plugin! – I am a recovering Dreamweaver user – and there are still some things I miss from DW – but plugins like this remind me why I moved to Coda.
    Thanks!

 Leave your mark

Leave a comment