Opened 11 years ago

Closed 11 years ago

Last modified 11 years ago

#12655 closed enhancement (fixed) LESS support in mobile themes

Reported by: ykami Owned by: ykami
Priority: high Milestone: 1.7
Component: DojoX Mobile Version: 1.6.0
Keywords: 1.7-mobile Cc:
Blocked By: Blocking:


Provide new mobile theme scheme using Less.js

Change History (2)

comment:1 Changed 11 years ago by ykami

Resolution: fixed
Status: newclosed

(In [24415]) Fixes #12655 !strict. Refactored the theme css files, and added LESS files.

comment:2 Changed 11 years ago by ykami

[Description contributed by Masato Noguchi (IBM)]


Main objectives for this CSS restructuring and "less" support are:

  • Make it easy to maintain theme CSS for devices
  • Enable creating a custom theme for mobile widgets

CSS files under themes folder are categorized into two types:

  • Device (or theme) dependant CSS files

Located under device (theme) folders and compiled (generated) from corresponding ".less" files in "common" folder and "variables.less" under the device folder.

    ex) base.css, Button.css
  • Device independent CSS files

Located under "common" folder and, in some cases, imported from other CSS files, such as base.css.

    ex) SpinWheel.css, domButtons.css

Basically, CSS files are provided per "widget" and named after widgets, while there are a few special CSS files:

  • <device>.css

All-in-one CSS file,with the same name of its device (theme) folder, importing all CSS files which may be used for the device.

    ex) iphone.css, android.css, blackberry.css
  • base.css

Located under device folders and including generic styles for the device.

  • <feature>.css and <feature>/*.css

Typically, located under "common" folder. Not associated with a particular widget, but providing CSS for particular feature, such as "transition".
<feature>.css including all CSS files for the feature located under the feature name folder.

    ex) domButtons.css, transitions.css

Overall structure of "themes" folder looks like as follows:

themes/common/base.less // source for <device>/base.css
themes/common/<widget>.css // device independent
themes/common/<widget>.less // source for <device>/<widget>.css
themes/common/<feature>.css // all-in-one for <feature>
themes/common/<feature>/*.css // device independent
themes/<device>/<device>.css // all-in-one for <device>
themes/<device>/base.css // generaged from base.less
themes/<device>/base.less // importing source files to generate base.css
themes/<device>/<widget>.css // generated from <widget>.less
themes/<device>/<widget>.less // importing source files to generate <widget>.css
themes/<device>/variables.less // variables for <device>

Note that the following CSS files are not applied above rules yet, which may be revised later:

  • *-comat.css (for compatible mode)
  • *-app.css (for
  • iphone/ipad.css

How to Compile

You need "node" and "less" installed for compiling less files to generate target CSS files. Refer to dijit/themes/claro/README for set them up. To compile all less files under "themes" folder:

> cd themes\common
> node compile.js

Note that this process is only required when you modify less files. Compiled CSS files are checked in, along with their source ".less" files. Refer to the following section.

How to Modify

The process to modify styles under "themes" folder is different based on their types described above:

  • Device independent CSS files (".css" files under "common" folder)

You may just edit and check in the CSS file as usual.

  • Device dependent CSS files (".css" files under device folders)

If you want to add new style rules, edit corresponding ".less" file under "common" folder.

If you want to make existing style rules device-dependent, put less parameters (@<variable>;) in corresponding ".less" file under "common" folder and assign values to the parameter in each "variables.less" file under device folders.

If you just want to change the current parameterized value for a particular device, modify it in "variables.less" file under the device folder.

You may add "@import" in ".less" files to import common CSS files into device dependent CSS files.

Before committing these changes, you must compile ".less" files (refer to the previous section). And then check in the resulted CSS files along with ".less" files you have modified.

Note that as mentioned above there are some CSS files under device folders, which do not have corresponding ".less" files, such as "-compat.css". You may just edit and check in these CSS file in the same way as device independent CSS files.

How to Import

Application HTML files can import theme CSS files in one of the following ways:

  • Import base.css and individual <widget>.css under <device> folder

Optimized and recommended way. You need to import only widget CSS files for widgets used in the application.

    @import "dojox/mobile/themes/iphone/base.css";
    @import "dojox/mobile/themes/iphone/Button.css";
    @import "dojox/mobile/themes/iphone/TabBar.css";
  • Import <device>.css under <device> folder

Automatically loading all CSS files for the device. Convenient, but not optimized.

    @import "dojox/mobile/themes/iphone/iphone.css";
Note: See TracTickets for help on using tickets.