doc/refactoring-the-css-with-uiprops.rst
author Alain Leufroy <alain.leufroy@logilab.fr>
Wed, 20 May 2015 16:13:07 +0200
changeset 10434 8e04ab5582d9
parent 10121 23af005426bf
permissions -rw-r--r--
[web/views/formrenderer] do not use `cubicweb:target` attribute on form (closes #5534074) The `cubicweb:target` is a flag indicating that the form data (with file input) shall be posted inside an iframe - this is a well known "ajax-like" workaround to post files with browsers that do not support `FormData` (a.k.a IE<10). The `cubicweb:target` was introduced when CW used the "xhtml strict" doctype. Now that CW uses the "html5" doctype, this namespaced attribute is no longer necessary and the iframe can be generated directly. Before this patch, CW inserts the `cubicweb:target` attribute in the form DOM element (server side) and `setFormsTarget()` updates the DOM with a new `<iframe>` element (client side). Now, CW inserts the `<iframe>` DOM element directly (server side), making `setFormsTarget` useless.

=========================================
Refactoring the CSSs with UI properties
=========================================

Overview
=========

Managing styles progressively became difficult in CubicWeb. The
introduction of uiprops is an attempt to fix this problem.

The goal is to make it possible to use variables in our CSSs.

These variables are defined or computed in the uiprops.py python file
and inserted in the CSS using the Python string interpolation syntax.

A quick example, put in ``uiprops.py``::

  defaultBgColor = '#eee'

and in your css::

  body { background-color: %(defaultBgColor)s; }


The good practices are:

- define a variable in uiprops to avoid repetitions in the CSS
  (colors, borders, fonts, etc.)

- define a variable in uiprops when you need to compute values
  (compute a color palette, etc.)

The algorithm implemented in CubicWeb is the following:

- read uiprops file while walk up the chain of cube dependencies: if
  cube myblog depends on cube comment, the variables defined in myblog
  will have precedence over the ones in comment

- replace the %(varname)s in all the CSSs of all the cubes

Keep in mind that the browser will then interpret the CSSs and apply
the standard cascading mechanism.