Feature Request : Inline CSS

[bravocado]

I don't know if you think this is posible or not. But i think CodeKit would be more awesome if CodeKit can inlining a CSS to create (example) an email template. Right now, i'm using Juice to inlining a CSS to HTML. Maybe that juicy thing can be your reference to make CodeKit more powerful. :)

[quickstep25]

You can use Jade to output your HTML which also supports inline CSS. CodeKit already has Jade as a language that it supports and compiles.

Turn this line of Jade

a(style={color: 'red', background: 'green'})

into this output

<a style="color:red;background:green"></a>

[bravocado]

thanks @quickstep25 for your reference. Yes, I'm using Jade right now. But, i feel pain when the styling is repetitive. What i'm expecting is when i'm writing a regular Jade, then on that document linked a stylesheet. And i wish CodeKit have an ability to read that CSS and apply it to each class on Jade/HTML, and maybe have an ability to delete the applied class on Jade/HTML file.

for example : CSS:

.btn { padding:20px 10px; background-color: #7A7A7A; color: #FFF; }

Jade:

a.btn

output:

<a style=" padding:20px 10px; background-color: #7A7A7A; color: #FFF;"></a>

So when i need to a change on button color, it's just as simple as changing on CSS. Not by find and replace on code editor. Well, it's easy to replace it if you have only 1 or 2 files. But, it's a pain in ass when -- let's say -- you have 20 email templates (a general example when inline CSS needed) and maybe it's a major update on your design.

And after playing with CodeKit hooks, i think this is possible. But, right now CodeKit is limiting the hooks (3 hooks). And i need more slot to do it. But, what if CodeKit have that ability too without hooking? I think this is would be awesome! Or maybe you have another solution?

[feekApp]

@bravocado you can use premailer for this! This tool converts all CSS styles to inline style attributes. Perfect for making email templates. You can easily install it on your Mac via:

sudo gem install premailer

and process your nicely -with jade and sass/less (and of course Codekit)- build templates via your command line and all your css is inline.

I've also make a request to post-process Codekit' .kit files in this request