Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

I find writing CSS by hand to be extremely tedious.

Coming across a concept such as fluid, makes me want to write all my websites so that the CSS resizes nicely and looks the same in different browsers.

My question to you is: Can my design be generated programmically?

e.g.:

#include <css>
#include <html>
#include <vector>
#include <string>

int main(void) {
    HTML::HTML page;
    page.title("my title");
    page.heading.font(15);
    std::vector<std::string> para = <vector of paragraphs>;

    CSS::CSS layout;
    layout.grid(2,2);
    layout.fill(xcoords_as_percentage, ycoords_as_percentage);

    page.use_css(layout);
    for(int i=0; i<para.size() && y!=grid.y.size()+1; i++, x++) {
        if(x==grid.x.size()) x=0, y++;
        page.grid[x][y]=para[i];
    }
    page.header1("I am header1");
    page.footer("I am page footer");
    layout.order(page.header1[0], page.grid.all(), page.footer());

    generate_html("index.html");
    generate_css("layout.css");
}

This will allow me to concentrate on the actual contents, abstracting away from "Oh, IE7 doesn't support this option, so do this hack..."

FYI: I am coding the actual site in Django (Python), so the HTML/CSS generator doesn't have to be in C++. I am aware of work being done in this direction in the C++ Wt framework

share|improve this question

closed as off topic by Mark Trapp Dec 18 '11 at 13:40

Questions on Programmers Stack Exchange are expected to relate to software development within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

    
If you want to take this way, you should have a look at Opa –  Andrea Dec 16 '11 at 10:56
    
If you want to take this way, you should have a look at Opa –  Andrea Dec 16 '11 at 10:56
    
Thanks, but Opa seems to be more of a templating library (like Chameleon), rather than the design logic library I am looking for. –  A T Dec 16 '11 at 11:02
    
Particularly the layout.order() function would lower development or refactoring time down considerably. –  A T Dec 16 '11 at 11:22
    
Try using a fluid layout on a mobile device or tablet. Try to use pinch-zoom functionality and flipping between orientations. You'll soon understand why mobile users dislike fluid layouts so much. And please don't to resort to using a watered down 'mobile' site either. –  jfrankcarr Dec 16 '11 at 11:36

2 Answers 2

Adding to Magnus Wolffelt's answer, you should take a look at LESS:

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (IE 6+, Webkit, Firefox) and server-side, with Node.js.

I prefer its syntax over Sass's, but that's a matter of opinion. Django Compressor works fine with LESS with the added bonus of producing minified scripts:

Django Compressor combines and compresses linked and inline Javascript or CSS in a Django templates into cacheable static files by using the compress template tag.

There's also a very handy Apache filter that provides on demand conversion of CSS LESS files to CSS using CSS::LESSp under mod_perl2., if you really want to go there. It should provide language & framework agnostic use of LESS, but I just played with it for a few minutes, I'm using a PHP solution similar to Django Compressor and never had much need for it.

share|improve this answer

This question is more proper on Stack Overflow, but.. it sounds like you want to use a programmatic CSS language/framework, like SASS or Stylus:

http://sass-lang.com/

http://learnboost.github.com/stylus/

In particular, variables, functions and mixins are very useful in these languages.

share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.