Styleaby CSS Plugin

Update: Andrew Stewart has answered the call with his css_dryer plugin.

According to this article from Geoff, Keith Rowell is working on a plugin in the vein of markaby and builder that will allow you to create your stylesheets in ruby.

Why does this interest me? Well, I’m a web developer who loves to program as opposed to a programmer who dabbles in the web. I love standards and stylesheets and I have a dream. What is this dream? Inheritance is groovy in stylesheets but css declarations like the following annoy the programmer in me, especially the ruby programmer:

div#content {/* some styles ... */}
div#content h2 {/* some styles ... */}
div#content a {/* some styles ... */}
/* etc., etc., you get the point ... */

What I have always dreamed of is, for lack of a better term, stackable css declarations like so:

div#content {
    /* some styles which apply only to div#content ... */
    h2  {/* some styles which apply only to div#content h2 ... */}
    a  {/* some styles which apply only to div#content a ... */}
}

…which would create the same declarations as above (as far as specificity is concerned). Now, this isn’t possible with css, as of yet, but that doesn’t mean a sweet little css plugin for rails couldn’t make my dreams come true. It doesn’t seem like it would be too hard using ruby blocks to get this syntactical suger.

What I’m hoping is that Keith, or Geoff, or someone else likes this idea as well and adapts the plugin to work in the aforementioned way. If not, maybe I’ll tackle it myself when I get a chance. Anyone else think this would be cool or find it a bit interesting? Is it clear what I’m after?

10 Comments

Zach Baker
Dec 07, 2006

Me too! I’ve used an RCSS controller to embed ruby in my CSS files and it makes things flow much easier. But I still hope for a Builder-style syntax like you’re describing. It really can’t be all that hard…
Kyle Maxwell
Dec 07, 2006

Not hard at all. I was just about to write a horrendously long CSS file, but I thought this would be a better use of the evening:

http://svn.kylemaxwell.com/rails_plugins/dynamic_stylesheets
http://svn.kylemaxwell.com/rails_plugins/dynamic_stylesheets/README
Chris Lloyd
Dec 07, 2006

Good idea. Sort of makes CSS object orientated. Borat style, I liking very much.

Jamie Hill

Dec 07, 2006

We were looking at something similar a couple of months ago. We’ve not got it into a plugin as yet.

Something like:


p do
  color '#c00'
  strong do
    font_weight 'bold'
    em do
      color 'pink'
    end
  end
end
strong do
  color '#0f0'
  font_weight 'normal'
end

Will output:


body {
  background: #fff;
  color: #333;
}
p {
  color: #c00;
}
p strong {
  font-weight: bold;
}
p strong em {
  color: pink;
}

We’re yet finalise the syntax so any suggestions are welcome. I think attributes should probably be handled with a hash.

Mislav
Dec 07, 2006

Don’t make a builder out of it. Keep the CSS syntax like in the article example.

BTW you read my mind. It is exactly what I was thinking for some time now
topfunky
Dec 07, 2006

Thanks for the link, but I think what you’re looking for is Myles Byrne’s DCSS plugin:

http://myles.id.au/2006/11/20/introducing-dcss/

http://svn.ducknewmedia.com.au/public/rails_plugins/dcss/

It lets you write with a syntax very similar to CSS, but you get nested blocks and can use ERB tags.

Mine is a modification of something Scott Barron started and is much closer to Markaby in syntax…it’s all Ruby.
John Nunemaker
Dec 08, 2006

@Kyle – nice.

@Jamie – hmm…yes along those lines except I don’t think I would take it quite that far. Very cool though.

@Mislav – Agreed.

@topfunky – Myles plugin looks pretty close to what I’m thinking of but looks like to much syntax. I’m thinking maybe I’ll just try doing something like this on my own since I’m the one being picky. Thanks for the clarification on what yours is.
Andy Stewart
Dec 09, 2006

I liked this idea so much that I sat down and wrote the code to do it, using your example as a test case.

I’ll convert it into a plugin tomorrow and post you a link.
John Nunemaker
Dec 10, 2006

@Andy – You are my new hero. Let me know when you get it working and I’ll help you beta test and post it here when you are ready for it to be consumed.
Andy Stewart
Dec 11, 2006

John,

Excellent! I would greatly appreciate your beta-testing and posting it.

I’ve called it css_dryer and you can grab it here. I’ve also written it up here.

Looking forward to your feedback!