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

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

Improve this answer
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.

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.