Search

CSS Tools Coda Plugin

Posted: December 15, 2008 Comments(99)

Update: CSS Tools is no longer maintained by me and is available on GitHub.

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:

CSS Tools plugin for Coda on Viddler

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

Related Content

  1. Year in Review: Highlights from 2008
  2. CSS Tools Coda Plugin

Categories

Categories Development

Tags

Tags , , , , , ,

Get my newsletter

Receive periodic updates right in the mail!

  • This field is for validation purposes and should be left unchanged.

Comments

  1. 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. 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. @Derek: I’m doing my best to fully commit. I’ve been a die hard TextMate user for quite some time, but editors (specifically for front end Web development) are making a lot of advancement lately and I’m trying to keep an open mind. I’ve got to believe Panic is working on an implementation of code folding, as the current plugin architecture, as Sam mentioned, won’t support anything like that (yet).

    @Sam Rayner: Thanks! I hope you (and other designers) find the plugins helpful, especially as more features are added.

  4. 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!

  5. 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.

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

  7. 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?

  10. 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?)

  11. 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;

  13. Sorry to hear about the troubles people are having with this plugin! I’m going to hop back in the code, and start with some fresh installs of Coda to see if I can replicate the plugin blatantly not working. Thanks so much for the other reports, I’ll be sure to try and come up with some fixes. The plugin is based on CSSTidy so some of the formatting issues may take a bit to solve.

  14. 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

  15. Terribly sorry about the plugin simply not working for a number of you. I’ve just now published what I hope is a fix for the issue. If anyone can check it out and see if their test case no longer fails that would be superb. Thanks in advance!

  16. 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.

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

    mac 10.4.11 Tiger

  21. Thank you very much for the feedback and notes on the plugin, I’m anxious to try and implement some of the much needed fixes and will post anything I’ve got as soon as I’ve got it!

    @notha: The plugin should definitely be working in the latest releases of Coda. Have you tried upgrading to 1.6.3?

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

  24. 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.

  26. 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!

  27. 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

  28. 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?

  31. 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.

  32. 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?

  39. 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

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

  49. 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.

  51. 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.

  53. 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.

  55. 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-等幅”, “ＭＳ Ｐゴシック”, 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－等幅, "ＭＳ Ｐゴシック", monospace; <- here (double-quote has disappeared)
    }

  58. 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

  59. Thanks everyone for the bug reports. Unfortunately they seem to be a results of CSSTidy itself, but I will do my best to take a look as soon as possible. If you’re so inclined, please feel free to extract the plugin and check things out on that level as well!

    @Davor: I haven’t had any issues with it myself, but will check on a few more machines to see if I can replicate.

  60. 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!

  63. Thanks for the plugin, the video looks great. And, unfortunately, that ist all: I also see the plugin after the installation, but nothing happens to any css-file I tested 🙁

    I hope you can solve the issue! 🙂

  64. Same here. Installed on Leopard with Coda 1.6.10. Plugin appears but does not work. Are there any other CSS formatting solutions for Coda? Thanks!

  70. Hi, was a great plugin but after upgrading Coda to 1.6.10 this plugin stopped working.

    Running 10.6.3 Leopard on a 2009 Mac Mini (Macmini3,1)

    I’d love to see this working again. Is there any alternative CSS reformatters/compressors in the meantime?

  71. Hi, I’ve been using your plugin for a while and it was a great until it stopped working after I upgraded Coda to 1.6.10 Any idea what I can do to get it running again?

    Many thanks for your plugin and help.

    BTW, if this helps: Running Leopard 10.6.3 on macbook pro

  72. I am getting this when formatting the css with any type of format option.

    Notice: Undefined index: CODA_FILEPATH in /Users/cameronbrewer/Library/Application Support/Coda/Plug-ins/CSS Tools.codaplugin/Contents/Resources/26A08D11-48D7-4D9D-900C-252A4065DEFA/css-compress-high.php on line 7

    Is there’s something that i did wrong. I have Coda 1.6.10 installed.

  75. Hi Erick I’m sorry you’re having the issue, some others have been having the issue as well. I haven’t been able to replicate the plugin simply ceasing to work. I’m in a bit of a holding pattern on the plugin until Coda 2.0 is released which I imagine will be sometime later this year.

  78. Question:

    Some css formatters will remove css hacks (i.e. *width: 45px; for IE7 and below). I know it’s not officially valid, but I do it anyway sometimes and don’t want it deleted. Also, with some, -webkit-border-radius will be reformatted to webkit-border-radius losing the initial hyphen and making it useless. How are these dealt with in your plugin?

    Sorry, I haven’t gone through all the comments to see if this was answered.

  79. Okay, i just downloaded it and answered my own question. Your plugin works perfectly. Thank you very much for your work!

  81. I updated to 1.0.1 and I still get this every time I use it.

    Notice: Undefined index: CODA_FILEPATH in /Users/Justin/Library/Application Support/Coda/Plug-ins/CSS Tools.codaplugin/Contents/Resources/09BAC165-0A95-4DAC-9039-F4E7B53D7FDC/css-reformat-single-line.php on line 7

    It was working great for a long time then all of a sudden it just stopped. Any ideas?

  82. Justin, did you read Cameron Brewer’s comments just (5) above yours? He had the same problem, and solved it by saving the file first.

  83. Yeah I tried that. I tried saving it locally and on the server, opening a file and changing nothing, open a file make a change and then save it, select all text, select no text, select some text. I’ve tried it every which way and it always deletes everything and prints that error.

  84. Fine Tool, but it do not work with large files with many lines. You can use it only with small files with few lines. I hope you’ll fix it.

  86. Nice plugin but it needs an update for CSS3. Does not recognize -webkit-gradient so it deletes some important properties when converting to Single Line

  87. Hey mate -its the small things in life but i’ve been a multi-line guy forever and im contracting at a place that thinks that stinks so thanks to your plugin they will never know 😀

  88. Hey Jonathan, thank you for your plugin. I bought my new Mac 🙂 about 6 months ago and installed Coda for PHP dev. it’s a nice tool and I’m constantly looking for good plugins to speed up my work. I found yours and I will give it a try, as soon as I try it i will post comments on it if I find anything that will improve it. Again, thank you for your work.

  93. For some reason this plugin doesn’t work anymore (I know it used to but I haven’t used it in a while so I can’t say when it stopped working). I have Coda 1.7 on Mac OS 10.6. Could that be related somehow?

  98. Yes. This plugin is works really well, but it hoses any gradients when you convert to the single line format. Oh well. Can work around it for now.

Leave a Reply

Your email address will not be published. Required fields are marked *