[Cubicweb] refactoring in style

Nicolas Chauvat nicolas.chauvat at logilab.fr
Mon Feb 15 23:02:34 CET 2010


Hi,

The goals
~~~~~~~~~~

Over the weekend, I got started on refactoring style-related things in
CW. I would like to replace what we currently have for css/styling with
a machinery that will allow to skin the cw applications so that it
becomes easy to change their appearance or apply a given style to an
existing cube.

1/ A first design goal would be being able to define a color scheme
   and apply it within 5 mins

I suggest you read about colors at
http://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/
this is a series of 3 articles. The last ones points to online tools
that help to create color schemes. Another list of tools is available from
http://vandelaydesign.com/blog/design/find-the-perfect-colors-for-your-website/

2/ A second design goal would be to shorten drastically CSS by
   introducing variables to reduce their verbosity and repetitivity

Inspiration can be drawn from Sass, xCSS and CleverCSS:
http://sass-lang.com/ http://xcss.antpaw.org/
http://sandbox.pocoo.org/clevercss/

3/ A third design goal would be to help with type setting and prevent
   the most obvious mistakes that lead to ugly and unreadable web
   pages (ever tried reading logilab's blog?)

http://lamb.cc/typograph/ seems like a good start to me.

Please tell us about the other goals you can think of.

The work done
~~~~~~~~~~~~~~

I consider doing 1/ requires having 2/ done, since having a proper CSS
language/framework would allow to define a new color scheme or a new
scheme as a set of values for the key variables.

Regarding 2/, I have something already, but would like to hear about
your opinions about the preferred syntax. Would you rather use the
syntax of Sass, the one of xCSS or the one of CleverCSS ?

The language could be as close to CSS as possible (xCSS), or try to be
as close to Python as possible (CleverCSS and mine) or try to be
CSS-like, but with less punctuation (remove the brackets {}).

See attached file for what I started (run it with logilab's pytest).

About 3/, I implemented a new cw.web.actions name GotRhythm that does
what the typograph or hgtip.com do, which is use a js function to
replace the background with an image that shows the tempo. I will
commit that tomorrow after having it reviewed.

What's next
~~~~~~~~~~~

Sharing your comments and ideas early on during the design process to
prevent us from re-doing too many times before we get it right.

-- 
Nicolas Chauvat

logilab.fr - services en informatique scientifique et gestion de connaissances  
-------------- next part --------------
A non-text attachment was scrubbed...
Name: cissy.py
Type: text/x-python
Size: 3867 bytes
Desc: not available
URL: <http://lists.cubicweb.org/pipermail/cubicweb/attachments/20100215/8594fdfb/attachment-0251.py>


More information about the Cubicweb mailing list