Issue 331 in iui: Use LESS CSS for creating iUI CSS stylesheets

[i...@googlecode.com]

Status: Accepted
Owner: msgilli...@gmail.com
Labels: Type-Enhancement Milestone-REL-0.50

New issue 331 by msgilli...@gmail.com: Use LESS CSS for creating iUI CSS
stylesheets
http://code.google.com/p/iui/issues/detail?id=331

Use lesscss.js to generate iUI and theme CSS stylesheets. This will make
it much easier for the development team to maintain multiple stylesheets
and for end users to customize them.

iUI should support all 3 ways of generating CSS from LESS:
1) Command-line tool as part of the iUI build
2) Client-side conversion using lesscss.js
3) Server-side conversion for localhost test server during development

[i...@googlecode.com]

Comment #1 on issue 331 by msgilli...@gmail.com: Use LESS CSS for creating

iUI CSS stylesheets
http://code.google.com/p/iui/issues/detail?id=331

See http://lesscss.org/

[i...@googlecode.com]

Updates:
Status: Started

Comment #2 on issue 331 by msgilli...@gmail.com: Use LESS CSS for creating

iUI CSS stylesheets
http://code.google.com/p/iui/issues/detail?id=331

Here's a proof-of-concept for method #1 (command-line generation):
http://code.google.com/r/msgilligan-iui-dev/source/detail?r=589f247407542c3dba9098c5082a983e6e880083

Checkout out the above revision and use:
./gradlew lessCompile
to generate CSS output files in the following locations:
target/<iui-version>/web-app/iui/iui-from-less.css
and
target/<iui-version>/web-app/iui/t/default/default-theme-from-less.css

[i...@googlecode.com]

Comment #3 on issue 331 by msgilli...@gmail.com: Use LESS CSS for creating

iUI CSS stylesheets
http://code.google.com/p/iui/issues/detail?id=331

Issue 339 has been merged into this issue.

[i...@googlecode.com]

Comment #4 on issue 331 by dko...@gmail.com: Use LESS CSS for creating iUI
CSS stylesheets
http://code.google.com/p/iui/issues/detail?id=331

The lessframework.com project has a nice build system as well, and an
interesting development model. It isn't actively maintained far as I can
tell. It uses a very interesting concept whereby you don't compile ... it
compiles dynamically. When you've completed your development cycle, you
disable the "dev" mode, and take the final generated CSS to use in your
production project. I did an experiment a year or so ago to incorporate
the lessframework approach into a mobile oriented set of stylesheets for my
own project. Let's have a look at their approach. What I like is that it
did not require any new learning (just LESS) and no new build system to
compile anything.

[i...@googlecode.com]

Comment #5 on issue 331 by dko...@gmail.com: Use LESS CSS for creating iUI
CSS stylesheets
http://code.google.com/p/iui/issues/detail?id=331

I think this is the big feature for your next big release, because this
lets you open up to contributions from platform/stylesheets that you don't
actively support. In fact, you might end up taking in sheets into a
contrib dir that aren't tested as part of the regular release, but that
make sense for sharing to the wider community.

[i...@googlecode.com]

Comment #6 on issue 331 by msgilli...@gmail.com: Use LESS CSS for creating

It's like you read my mind. Part of this comes from my own experience of
adding iPad (aka split-screen) support.

[i...@googlecode.com]

Comment #7 on issue 331 by msgilli...@gmail.com: Use LESS CSS for creating

iUI CSS stylesheets
http://code.google.com/p/iui/issues/detail?id=331

lessframework.com??? It seems unrelated to LESSCSS and it has no build
system that I can see just a handful of .css files.

[i...@googlecode.com]

Comment #8 on issue 331 by dko...@gmail.com: Use LESS CSS for creating iUI
CSS stylesheets
http://code.google.com/p/iui/issues/detail?id=331

Ooops, wrong site. Flawless: https://github.com/DominikGuzei/flawless.css

Not well maintained. But interesting concept.

[i...@googlecode.com]

Comment #9 on issue 331 by msgilli...@gmail.com: Use LESS CSS for creating

iUI CSS stylesheets
http://code.google.com/p/iui/issues/detail?id=331

I did want to make good use of .mixins in the iUI less - we can't start out
at 0kb like flawless, but the mixins will make things pretty customizable.

We'll need a command-line build script no matter what we do because we'll
want to ship a prebuilt version of iUI that includes the .css files so
people that don't know LESSCSS don't have to touch it. But if you want to
make a client-side script to create .css in a window like flawless does,
that would be really cool.

[i...@googlecode.com]

Comment #10 on issue 331 by dko...@gmail.com: Use LESS CSS for creating iUI
CSS stylesheets
http://code.google.com/p/iui/issues/detail?id=331

Might make sense to have a "designer" mode using flawless, but otherwise,
it's off and not shipped with the minified versions/package that gets
deployed. Anyway, I did start prototyping something with this awhile back,
but would be good to start with a goal like iUi in mind (I was starting
from scratch previously).

[i...@googlecode.com]

Updates:
Cc: dko...@gmail.com

Comment #11 on issue 331 by msgilli...@gmail.com: Use LESS CSS for creating

iUI CSS stylesheets
http://code.google.com/p/iui/issues/detail?id=331

Have you looked at the LESS CSS branch that I made?

It's also interesting to plug iUI into http://css2less.cc/ and see what
happens.

Once we get the basics working, if it's not too much work, I'd love to see
a quick branch with some kind of "designer" mode. I've been thinking of
something more in line with the Twitter Bootstrap web form -- where you'd
make a few choices in a form and then download a custom zip.