Feature Proposal: Adopt a CSS framework from another project

Motivation

We currently have our own, and with all respect to the designers, fairly crude, CSS framework.

If we adopt another project's work, then we can leverage all the themes designed for that project - not to mention the testing, documentation, and support.

Description and Documentation

The proposal is to adopt the jquery CSS framework, as described in http://jqueryui.com/docs/Theming/API

We have already adopted jquery as a standard, so this is a natural next step.

Ideally it will be possible to merge the current CSS framework with this.

Impact

Impact on plugins?

-- Contributors: CrawfordCurrie - 15 Oct 2010

Discussion

Adoption of jQuery's css framework seems to be a natural next step. Most jquery plugin authors added themability using jquery UI css classes to their work.

However, this is by far a complete css framework from the perspective of a web designer. It only covers standard css classes as they are emitted by jquery widgets.

Having worked with jQuery UI and other themable widgets, I've found the available themes to be extremenly limited and hard to extend. I was very hard to extend coverage of an own theme in a way that all standard widgets of jquery ui look non-jquery-ish. Infact, the used css classes are used in a way that they sometimes conflict with each other, that is: a property in one place was not desired in another place even though both places used the same css class.

So my advice is to be extremely cautious when applying this as a standard: while you change the look & feel of a lot of jquery UI elements quickly with ease, it is rather hard to proceed from that point in any fruitful way.

Besides that, the available jquery themes already show their aged being createrd at a time when apple's aqua look was en vogue. As far as I know there is no kind of marketplace for jquery UI themes with more high quality designs.

Baseline is: besides foswiki's own base styles, we should create a jquery UI theme for foswiki usable by skin authors removing some of the jquery-ishness and providing a good and clean neutral look and feel.

But things obviously won't stop here coming to some kind of css framework.

Instead of just looking at jquery's css "framework", I'd prefer to agree on some of the grid frameworks like blueprint, 960, combined with something like SASS or LESS.

-- MichaelDaum - 15 Oct 2010

While jQuery doesn't come with a css framework, Compass is one. Here's some stuff to read up.

• Mastering Sass: Lesson 1
• Mastering Sass: Lesson 2
• Mastering Sass: Lesson 3: using Compass

-- MichaelDaum - 15 Apr 2011

I've been working with SASS/Compass for a while, on a non-Foswiki project, and it has to be said, it's a revelation. Makes life soooo much easier.

-- CrawfordCurrie - 15 Apr 2011

so long as we avoid the indent based syntax, I'd be very happy - I've been using LESS from before SASS changed over - as I think its important for users to be able to c&p css they find in the wild.

-- SvenDowideit - 16 Apr 2011

Yeah, agreed - we use the CSS based syntax with SASS, and it works really well so far.

-- CrawfordCurrie - 16 Apr 2011

Base skin will be implementing Twitter Bootstrap, that uses LESS.

-- ArthurClemens - 22 Feb 2012

One word of warning; Bootstrap is OK, but is an utter PITA for scrollable areas (or maybe I'm just using it wrong). Also, don't use anything older than v2.

-- CrawfordCurrie - 23 Feb 2012