6

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

10
  • If you want to take this way, you should have a look at Opa
    – Andrea
    Commented Dec 16, 2011 at 10:56
  • If you want to take this way, you should have a look at Opa
    – Andrea
    Commented Dec 16, 2011 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
    Commented Dec 16, 2011 at 11:02
  • Particularly the layout.order() function would lower development or refactoring time down considerably.
    – A T
    Commented Dec 16, 2011 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
    Commented Dec 16, 2011 at 11:36

2 Answers 2

Reset to default
5

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.

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.

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