Clueless

h1. Cluesless -CSS- LESS CSS Framework

Clueless is a CSS (actually, LESS) framework based on "less.js":http://github.com/cloudhead/less.js, which is the new, node.js based version of "LESS CSS":http://lesscss.org; and "HTML5 Boilerplate":http://html5boilerplate.com/. It is inspired by the "Flaw{LESS} CSS framework":http://github.com/DominikGuzei/flawless.css, which is a brilliant idea that takes advantage of less.js's flexilibity and modularity in order to allow easily creating powerful, modular CSS based HTML5 websites. Clueless is also inspired by "LESS Framework 2":http://lessframework.com/ which is a CSS framework (the "LESS" in the name has nothing to do with the "LESS" from lesscss.org) for responsive web design. However, Clueless does not impose LESS Framework in any way (much like Flaw{LESS}).

The reason why I've decided to create my own Flaw{LESS} inspired framework is mainly that it has a complex interface and is rather heavy, with too many JavaScript libraries which I don't really plan to use, and don't like how they've been integrated into the framework. As opposed to Flaw{LESS}, which modified the HTML5 Boilerplate too much (IMHO), I plan to modify the HTML5 Boilerplate base as less as possible (or not at all), while providing a powerful CSS framework without making any assertions on the JavaScript libraries you plan to use.

The advantage of using a LESS-based CSS framework, apart from absolute modularity and clean code, is that by default it weighs nothing, not 1KB or 12KB, but 0KB. You add the modules you wish to use (provided modules are different CSS reset methods, different grids, print styles, base styles and more) and only them, and only the modules you actually use will be added to the output CSS. It should be noted that LESS-based CSS frameworks differ from other CSS frameworks in how much they abuse your code. CSS frameworks abuse your HTML with many classes and added DOM elements (mostly divs), and abuse your CSS with plenty of styles you wouldn't use, or almost always override. Clueless (and Flaw{LESS}), on the other hand, do not abuse your HTML at all, allowing you to create much more semantic HTML with almost no classes at all. There's a tradeoff for this, as you will abuse your CSS a little more, by pushing the same styles to different elements where you previously used classes. But this tradeoff is worth it, not only because you will write more semantic HTML, but also because your CSS will still be better off as it won't be polluted with a ton of styles you'll never use.

It should also be noted that Clueless uses less.js, which means your website won't serve CSS files, it will serve your clean, modular LESS files which will be automatically compiled to CSS on the fly, in the browser. If you think this is going to be slow, you're wrong, less.js is fast. But that doesn't mean you have to use it, you can still compile your LESS files to CSS beforehand and serve them, but by default they will be compiled in the browser.

Clueless is very early, so documentation is lacking and implementation is likely to change.